diff --git a/sanityIo/schemas/sections/web-dev/FooterSection.js b/sanityIo/schemas/sections/web-dev/FooterSection.js
index 3755a39a..e67ab604 100644
--- a/sanityIo/schemas/sections/web-dev/FooterSection.js
+++ b/sanityIo/schemas/sections/web-dev/FooterSection.js
@@ -8,6 +8,11 @@ export default {
             title: 'Name',
             type: 'string',
         },
+        {
+            name: 'isSocialMediaBlock',
+            title: 'Show Social Media Block',
+            type: 'boolean',
+        },
         {
             name: 'footerMenuRef',
             title: 'Footer Menu',
diff --git a/src/common/sanityIo/Types.ts b/src/common/sanityIo/Types.ts
index 3a9c7993..5a93f1b7 100644
--- a/src/common/sanityIo/Types.ts
+++ b/src/common/sanityIo/Types.ts
@@ -241,7 +241,6 @@ export type SanityMenuContainer = {
     logoAccentText?: string
     logoImageSrc?: SanityImageAsset
     isSearch?: boolean
-
 }
 
 export type MainMenuAnchorType = 'left' | 'top' | 'right' | 'bottom'
\ No newline at end of file
diff --git a/src/components/BlockContentLayoutContainer.tsx b/src/components/BlockContentLayoutContainer.tsx
index 2093a061..742a92af 100644
--- a/src/components/BlockContentLayoutContainer.tsx
+++ b/src/components/BlockContentLayoutContainer.tsx
@@ -463,6 +463,8 @@ const BlockContentLayoutContainer: FunctionComponent<BlockContentLayoutContainer
                         const mapSection: MapSectionType = columnLayoutContainer
 
                         return <Grid key={'map-section'} container item>
+                            <Link id={"MAP_SECTION"} underline="hover"><></>
+                            </Link>
                             <MapSection
                                 sectionData={mapSection}
                             />
diff --git a/src/components/BlockContentTypes.ts b/src/components/BlockContentTypes.ts
index fc9f8560..06772a55 100644
--- a/src/components/BlockContentTypes.ts
+++ b/src/components/BlockContentTypes.ts
@@ -615,6 +615,7 @@ export type DevelopmentFooterSectionType = {
 }
 export type FooterSectionType = {
     name: string
+    isSocialMediaBlock: boolean
     footerMenuRef: SanityMenuContainer
 }
 
diff --git a/src/components/FooterBlockContentLayoutContainer.tsx b/src/components/FooterBlockContentLayoutContainer.tsx
index fac0e901..7a494e8c 100644
--- a/src/components/FooterBlockContentLayoutContainer.tsx
+++ b/src/components/FooterBlockContentLayoutContainer.tsx
@@ -86,6 +86,7 @@ const FooterBlockContentLayoutContainer: FunctionComponent<FooterBlockContentLay
                                 <Link id={"BOTTOM_OF_PAGE"} underline="hover"><></>
                                 </Link>
                                 <Footer
+                                    isSocialMediaBlock={footer.isSocialMediaBlock}
                                     pageFooter={footer.footerMenuRef}
                                 />
                             </Grid>
diff --git a/src/components/animated/MapSection.tsx b/src/components/animated/MapSection.tsx
index 66eb59e0..0bac9c92 100644
--- a/src/components/animated/MapSection.tsx
+++ b/src/components/animated/MapSection.tsx
@@ -2,12 +2,12 @@ import React, {FunctionComponent} from 'react'
 
 import makeStyles from "@mui/styles/makeStyles";
 import {Theme} from "@mui/material/styles";
-import {Box, Card, CircularProgress, Grid, Typography, useMediaQuery, useTheme} from "@mui/material";
+import {Card, CircularProgress, Grid, Typography, useMediaQuery, useTheme} from "@mui/material";
 import {MapSectionType, ServiceAmenityType} from "../BlockContentTypes";
-import {Email, LocationOn, Phone, Rectangle} from "@mui/icons-material";
+import {Email, LocationOn, Phone} from "@mui/icons-material";
 import {urlFor} from "../block-content-ui/static-pages/cmsStaticPagesClient";
 import {COLORS} from "../../theme/common/ColorPalette";
-import {GoogleMap, Marker, useJsApiLoader, Data} from '@react-google-maps/api';
+import {GoogleMap, Marker, useJsApiLoader} from '@react-google-maps/api';
 
 
 export const useStyles = makeStyles((theme: Theme) => ({
@@ -75,7 +75,6 @@ const MapSection: FunctionComponent<IProps> = (props: IProps) => {
     }
 
 
-
     return (<Grid container item>
         <Grid item container className={classes.grayscale}>
             {
@@ -90,70 +89,76 @@ const MapSection: FunctionComponent<IProps> = (props: IProps) => {
                                     text: props.sectionData?.mapMarkerTitle ?? " ",
                                     className: classes.markerClass,
                                     fontSize: "18px"
-                        }}></Marker>
+                                }}></Marker>
 
 
                     </GoogleMap>
                     : <CircularProgress/>
             }
         </Grid>
-        <Grid container item style={{position: "relative"}}>
+        <Grid container item style={{position: "relative",}}>
             <Grid item container sx={{
-                position: "relative",
+                position: mdDown?"relative":"absolute",
                 top: mdDown ? 0 : -66,
-                backgroundColor: COLORS.TRANSPARENT_DARKBLUE,
-                border: "1px solid white",
-                marginLeft: mdDown ? 0 : "32px",
-                marginRight: mdDown ? 0 : "32px",
-                padding: theme.spacing(4, 4, 2, 4)
-            }} justifyContent='space-between'>{
-                props.sectionData?.contactInfo.map((detail: ServiceAmenityType, index) =>
-                    <Grid key={index}
-                          container
-                          xs={12}
-                          md={3}
-                          style={{marginBottom: "16px"}}
-                          justifyContent='center'
-                    >
-                        <Grid item container alignItems='center' maxWidth={380} minWidth={290}
-                              justifyContent='center'>
-                            <Grid item xs={12} md={3} style={{marginRight: "8px", marginBottom: "4px"}} container
+                paddingLeft: mdDown?0:"32px",
+                paddingRight: mdDown?0:"32px",
+            }}>
+                <Grid item container
+                      sx={{
+                          backgroundColor: COLORS.TRANSPARENT_DARKBLUE,
+                          border: "1px solid white",
+                          padding: theme.spacing(4, 4, 2, 4)
+                      }}
+                      justifyContent='space-between'>{
+                    props.sectionData?.contactInfo.map((detail: ServiceAmenityType, index) =>
+                        <Grid key={index}
+                              container
+                              xs={12}
+                              md={3}
+                              style={{marginBottom: "16px"}}
+                              justifyContent='center'
+                        >
+                            <Grid item container alignItems='center' maxWidth={380} minWidth={290}
                                   justifyContent='center'>
-                                <Card
-                                    elevation={0}
-                                    style={{
-                                        width: "60px",
-                                        height: "60px",
-                                        backgroundColor: theme.palette.primary.main,
-                                        borderRadius: "50%",
-                                        border: `3px solid ${theme.palette.secondary.main}`
-                                    }}>
-                                    <Grid container justifyContent='center' alignContent='center' alignItems='center'
-                                          style={{height: "100%",}}>
-                                        <Grid item style={{paddingTop: "6px"}}>
-                                            {
-                                                detail.imageSrc ?
-                                                    <img width={24} src={urlFor(detail.imageSrc ?? "").url() ?? ""}
-                                                    /> : getIcon(detail.muiIcon)
-                                            }
+                                <Grid item xs={12} md={3} style={{marginRight: "8px", marginBottom: "4px"}} container
+                                      justifyContent='center'>
+                                    <Card
+                                        elevation={0}
+                                        style={{
+                                            width: "60px",
+                                            height: "60px",
+                                            backgroundColor: theme.palette.primary.main,
+                                            borderRadius: "50%",
+                                            border: `3px solid ${theme.palette.secondary.main}`
+                                        }}>
+                                        <Grid container justifyContent='center' alignContent='center'
+                                              alignItems='center'
+                                              style={{height: "100%",}}>
+                                            <Grid item style={{paddingTop: "6px"}}>
+                                                {
+                                                    detail.imageSrc ?
+                                                        <img width={24} src={urlFor(detail.imageSrc ?? "").url() ?? ""}
+                                                        /> : getIcon(detail.muiIcon)
+                                                }
+                                            </Grid>
                                         </Grid>
-                                    </Grid>
-                                </Card>
-                            </Grid>
-                            <Grid item maxWidth={260}>
-                                <Grid item>
-                                    <Typography variant='body1' color='textSecondary' noWrap
-                                                align={mdDown ? "center" : "left"}>{detail.name}</Typography>
+                                    </Card>
                                 </Grid>
-                                <Grid item>
-                                    <Typography fontWeight='bold' fontSize='16px' variant='body2'
-                                                color='textSecondary'
-                                                align={mdDown ? "center" : "left"}>{detail.description}</Typography>
+                                <Grid item maxWidth={260}>
+                                    <Grid item>
+                                        <Typography variant='body1' color='textSecondary' noWrap
+                                                    align={mdDown ? "center" : "left"}>{detail.name}</Typography>
+                                    </Grid>
+                                    <Grid item>
+                                        <Typography fontWeight='bold' fontSize='16px' variant='body2'
+                                                    color='textSecondary'
+                                                    align={mdDown ? "center" : "left"}>{detail.description}</Typography>
+                                    </Grid>
                                 </Grid>
                             </Grid>
-                        </Grid>
-                    </Grid>)
-            }</Grid>
+                        </Grid>)
+                }</Grid>
+            </Grid>
         </Grid>
     </Grid>)
 }
diff --git a/src/components/templates/mackenzies-mind/footer/Footer.tsx b/src/components/templates/mackenzies-mind/footer/Footer.tsx
index 8751bb7b..da920e6a 100644
--- a/src/components/templates/mackenzies-mind/footer/Footer.tsx
+++ b/src/components/templates/mackenzies-mind/footer/Footer.tsx
@@ -1,19 +1,19 @@
-import React, {FunctionComponent, useContext} from 'react'
-import {Theme, ThemeProvider} from '@mui/material/styles';
+import React, {FunctionComponent} from 'react'
+import {Theme} from '@mui/material/styles';
 import makeStyles from '@mui/styles/makeStyles';
-import {Grid} from '@mui/material'
+import {Grid, useMediaQuery, useTheme} from '@mui/material'
 import FooterMenuContainer from './FooterMenuContainer'
 import {SanityMenuContainer} from "../../../../common/sanityIo/Types";
 import {COLORS} from "../../../../theme/common/ColorPalette";
-import CustomizedThemeContext from "../../../customized-theme-provider/CustomizedThemeContext";
 
 export const useStyles = makeStyles((theme: Theme) => ({
     root: {
+        // paddingTop: "32px",
         backgroundColor: COLORS.DARK_GRAY,
         // color: '#FDF3EB',
         // marginLeft: -1 * theme.spacing(1),
         // zIndex: 1000,
-        padding: theme.spacing(4),
+        padding: theme.spacing(4, 4, 1, 4),
         '& .MuiFormLabel-root': {
             color: 'white',
         },
@@ -42,24 +42,26 @@ interface IProps {
     pageFooter?: SanityMenuContainer
     footerMenuSlug?: string
     updateIsLoading?: (value: boolean) => void
+    isSocialMediaBlock?: boolean
 }
 
 const Footer: FunctionComponent<IProps> = (props: IProps) => {
-    const customizedTheme = useContext(CustomizedThemeContext)
-    const classes = useStyles(customizedTheme)
+    const classes = useStyles()
 
+    const theme = useTheme()
+
+    const mdDown = useMediaQuery(theme.breakpoints.down('md'))
     return (
-        <ThemeProvider theme={customizedTheme.customizedTheme}>
-            <Grid container className={classes.root}>
-                <Grid container justifyContent="flex-start">
-                    <Grid item xs={12}>
-                        {props.pageFooter && <FooterMenuContainer pageFooterMenu={props.pageFooter}
-                                                                  updateIsLoading={props.updateIsLoading}
-                        />}
-                    </Grid>
+        <Grid container className={classes.root}>
+            <Grid container justifyContent="flex-start" sx={{paddingTop: mdDown ? 0 : "56px"}}>
+                <Grid item xs={12}>
+                    {props.pageFooter && <FooterMenuContainer isSocialMediaBlock={props.isSocialMediaBlock}
+                                                              pageFooterMenu={props.pageFooter}
+                                                              updateIsLoading={props.updateIsLoading}
+                    />}
                 </Grid>
             </Grid>
-        </ThemeProvider>
+        </Grid>
     )
 }
 
diff --git a/src/components/templates/mackenzies-mind/footer/FooterMenuContainer.tsx b/src/components/templates/mackenzies-mind/footer/FooterMenuContainer.tsx
index 52abfd07..21c7bd42 100644
--- a/src/components/templates/mackenzies-mind/footer/FooterMenuContainer.tsx
+++ b/src/components/templates/mackenzies-mind/footer/FooterMenuContainer.tsx
@@ -7,14 +7,17 @@ import PageContext from "../../../page-context/PageContext";
 import MailTo from "../../../mail-to/MailTo";
 import Logo from "../../../logo/Logo";
 import AlternatingText from "../../../logo/AlternatingText";
+import SocialMediaBlock from "../../my-digital-resume/social-media-block/SocialMediaBlock";
 
 interface IProps {
     pageFooterMenu?: SanityMenuContainer
     updateIsLoading?: (value: boolean) => void
+    isSocialMediaBlock?:boolean
 }
 
 const FooterMenuContainer: FunctionComponent<IProps> = (props: IProps) => {
 
+    const theme = useTheme()
 
     const pageContext = useContext(PageContext)
     const customizedThemeContext = useTheme()
@@ -26,6 +29,9 @@ const FooterMenuContainer: FunctionComponent<IProps> = (props: IProps) => {
     const classes = useStyles(customizedThemeContext)
 
     const smDown = useMediaQuery(customizedThemeContext.breakpoints.down('sm'))
+    const mdDown = useMediaQuery(customizedThemeContext.breakpoints.down('md'))
+    const mdOnly = useMediaQuery(customizedThemeContext.breakpoints.only('md'))
+    const mdUp = useMediaQuery(customizedThemeContext.breakpoints.up('md'))
     return (
         <Grid container item className={classes.root}>
             <Grid container item xs={12} md={4}
@@ -41,14 +47,14 @@ const FooterMenuContainer: FunctionComponent<IProps> = (props: IProps) => {
                 {
                     props.pageFooterMenu?.subMenus?.map((menuGroup: any, index: number) => {
                         return (
-                            <Grid key={index} item xs={6}>
-                                <FooterMenuGroup menuGroup={menuGroup}/>
+                            <Grid key={index} item xs={12} container justifyContent={mdUp?'flex-start':'center'}>
+                                <Grid item><FooterMenuGroup menuGroup={menuGroup}/></Grid>
                             </Grid>
                         )
                     })
                 }
             </Grid>
-            <Grid item container xs={12} md={4} justifyContent='center'>
+            <Grid item container xs={12} md={4} justifyContent='center' sx={{paddingTop: mdDown?2:0}}>
                 {props.pageFooterMenu?.logoImageSrc ?
                     <Logo isCenter logoImageSrc={props.pageFooterMenu.logoImageSrc} height={108}/> :
                     <Grid container item justifyContent='center' alignContent='center'>
@@ -91,8 +97,26 @@ const FooterMenuContainer: FunctionComponent<IProps> = (props: IProps) => {
                     </Grid>
                 </Grid>
             </Grid>
-            <Grid item container xs={12} md={4} alignContent='flex-start' spacing={2}>
-
+            <Grid item container xs={12} md={4} spacing={2} alignItems='center' alignContent='center'>
+                {!mdDown && <Grid container item justifyContent='flex-end' xs={6} md={12}>
+                    <Typography variant='body2'>Social Media</Typography>
+                </Grid>}
+                <Grid container item xs={12} md={12} sx={{paddingTop:"4px !important", marginTop:mdDown?4:0,borderTop:"1px solid "+theme.palette.primary.main}}>
+                    {mdDown && <Grid container item justifyContent='flex-end' >
+                        <Typography variant='body2'>Social Media</Typography>
+                    </Grid>}
+                    {
+                    props.isSocialMediaBlock && <SocialMediaBlock
+                        bgColor={true}
+                        color='secondary'
+                        spacing={1}
+                        facebook={pageContext.page?.businessContact?.facebook}
+                        twitter={pageContext.page?.businessContact?.twitter}
+                        instagram={pageContext.page?.businessContact?.instagram}
+                        linkedIn={pageContext.page?.businessContact?.linkedIn}
+                        github={pageContext.page?.businessContact?.linkedIn}
+                    />
+                }</Grid>
             </Grid>
         </Grid>
     )
diff --git a/src/components/templates/mackenzies-mind/footer/FooterMenuGroup.tsx b/src/components/templates/mackenzies-mind/footer/FooterMenuGroup.tsx
index 416929d6..d822c05b 100644
--- a/src/components/templates/mackenzies-mind/footer/FooterMenuGroup.tsx
+++ b/src/components/templates/mackenzies-mind/footer/FooterMenuGroup.tsx
@@ -3,7 +3,7 @@ import {Theme} from '@mui/material/styles';
 
 import makeStyles from '@mui/styles/makeStyles';
 
-import {Grid, Link, Typography} from '@mui/material'
+import {Grid, Link, Typography, useMediaQuery, useTheme} from '@mui/material'
 import {SanityMenuGroup, SanityMenuItem} from "../../../../common/sanityIo/Types";
 
 export const useStyles = makeStyles((theme: Theme) => ({
@@ -43,7 +43,7 @@ export type LandingPagesFooterMenuGroupProps = {
 
 const FooterMenuGroup: FunctionComponent<LandingPagesFooterMenuGroupProps> = ({menuGroup}) => {
     const classes = useStyles()
-
+    const theme = useTheme()
     const [menuGroupContents, setMenuGroupContents] = useState<SanityMenuGroup>()
     const [menuItemContents, setMenuItemContents] = useState<SanityMenuItem>()
 
@@ -55,14 +55,18 @@ const FooterMenuGroup: FunctionComponent<LandingPagesFooterMenuGroupProps> = ({m
         }
     }, [menuGroup])
 
+    const mdOnly = useMediaQuery(theme.breakpoints.only('sm'))
+    const lgUp = useMediaQuery(theme.breakpoints.up('md'))
+    const mdUp = useMediaQuery(theme.breakpoints.up('md'))
+
     return (
-        <Grid container direction="column" spacing={2} className={classes.root}>
-            <Grid container item>
+        <Grid container direction="column" spacing={2} className={classes.root} >
+            <Grid container item justifyContent={lgUp?'flex-start':'center'}>
                 <Typography color='primary' variant="body2"
                             className={classes.menuTitle}>{menuGroupContents && menuGroupContents.menuGroupTitle}</Typography>
             </Grid>
             <Grid item container>
-                <Grid container item xs={8} direction='column' spacing={2}>
+                <Grid container item xs={12} direction={mdOnly ? 'row' : 'column'} spacing={2} alignItems={lgUp?'flex-start':'center'} alignContent={lgUp?'flex-start':'center'} justifyContent={mdUp?'flex-start':'center'} >
                     {
                         menuGroup?.links && menuGroup.links.map((menuLink: any, index: any) => {
                             return (
diff --git a/src/components/templates/my-digital-resume/social-media-block/SocialMediaBlock.tsx b/src/components/templates/my-digital-resume/social-media-block/SocialMediaBlock.tsx
index c307c2b9..c9506fa8 100644
--- a/src/components/templates/my-digital-resume/social-media-block/SocialMediaBlock.tsx
+++ b/src/components/templates/my-digital-resume/social-media-block/SocialMediaBlock.tsx
@@ -32,15 +32,14 @@ const SocialMediaBlock: FunctionComponent<IProps> = (props: IProps) => {
     }))
     const classes = useStyles()
     return (
-        <ThemeProvider theme={customizedThemeContext.customizedTheme}>
-            <Grid data-testid='social-media-block' item xs={12} container alignItems='center' justifyContent='center'
-                  spacing={props.spacing ? props.spacing : 0}>
+            <Grid data-testid='social-media-block' item xs={12} container alignItems='center' justifyContent='flex-end'
+                  spacing={props.spacing ? props.spacing : 0} wrap={'nowrap'}>
                 {props.facebook && <Grid item>
                     <Grid item className={clsx({[classes.buttonBackground]: props.bgColor})}>
                         <IconButton
                             color={props.color ?? 'primary'}
                             href={`https://facebook.com/${props.facebook}`}
-                            size="large"><Facebook/></IconButton>
+                            size="medium"><Facebook/></IconButton>
                     </Grid>
                 </Grid>}
                 {props.twitter && <Grid item>
@@ -48,7 +47,7 @@ const SocialMediaBlock: FunctionComponent<IProps> = (props: IProps) => {
                         <IconButton
                             color={props.color ?? 'primary'}
                             href={`https://twitter.com/${props.twitter}`}
-                            size="large"><Twitter/></IconButton>
+                            size="medium"><Twitter/></IconButton>
                     </Grid>
                 </Grid>}
                 {props.instagram && <Grid item>
@@ -56,7 +55,7 @@ const SocialMediaBlock: FunctionComponent<IProps> = (props: IProps) => {
                         <IconButton
                             color={props.color ?? 'primary'}
                             href={`https://instagram.com/${props.instagram}`}
-                            size="large"><Instagram/></IconButton>
+                            size="medium"><Instagram/></IconButton>
                     </Grid>
                 </Grid>}
                 {props.linkedIn && <Grid item>
@@ -64,7 +63,7 @@ const SocialMediaBlock: FunctionComponent<IProps> = (props: IProps) => {
                         <IconButton
                             color={props.color ?? 'primary'}
                             href={`https://linkedIn.com/in/${props.linkedIn}`}
-                            size="large"><LinkedIn/></IconButton>
+                            size="medium"><LinkedIn/></IconButton>
                     </Grid>
                 </Grid>}
                 {props.github && <Grid item>
@@ -72,10 +71,11 @@ const SocialMediaBlock: FunctionComponent<IProps> = (props: IProps) => {
                         <IconButton
                             color={props.color ?? 'primary'}
                             href={`https://github.com/${props.github}`}
-                            size="large"><GitHub/></IconButton>
+                            size="medium"><GitHub/></IconButton>
                     </Grid>
                 </Grid>}
-            </Grid></ThemeProvider>
+            </Grid>
+
     );
 }
 
diff --git a/src/components/templates/transform-hw/HeaderMenuItemButton.tsx b/src/components/templates/transform-hw/HeaderMenuItemButton.tsx
index 53b725f5..476118de 100644
--- a/src/components/templates/transform-hw/HeaderMenuItemButton.tsx
+++ b/src/components/templates/transform-hw/HeaderMenuItemButton.tsx
@@ -44,7 +44,7 @@ const HeaderMenuItemButton: FunctionComponent<HeaderMenuItemButtonProps> = ({men
                     }}
                     variant={menuItem.isContainedButton ? 'contained' : (menuItem.isOutlinedButton ? 'outlined' : 'text')}>
         <Typography noWrap
-                    color={menuItem.isOutlinedButton || menuItem.isContainedButton ? 'textPrimary' : 'textPrimary'}
+                    color={menuItem.isOutlinedButton || menuItem.isContainedButton ? 'textPrimary':theme.palette.secondary.main }
                     variant={menuItem.isOutlinedButton || menuItem.isContainedButton ? "button" : 'body2'}
                     style={{fontSize: "18px", ...textStyle, fontWeight: "bold"}}>{menuItem.displayText}</Typography>
     </Button>)