diff --git a/sanityIo/schemas/mui/MuiTypography.js b/sanityIo/schemas/mui/MuiTypography.js
index 27456aee..00b666aa 100644
--- a/sanityIo/schemas/mui/MuiTypography.js
+++ b/sanityIo/schemas/mui/MuiTypography.js
@@ -15,7 +15,9 @@ export default {
             of:[{type: "string", options: {
                     list: [
                         {value: "OSWALD", title: "Oswald"},
-                        {value: "RALEWAY", title: "Raleway"}
+                        {value: "RALEWAY", title: "Raleway"},
+                        {value: "POPPINS", title: "Poppins"},
+                        {value: "MONTESERRAT", title: "Monteserrat"}
                     ]
                 }}],
 
diff --git a/src/components/BusinessCard.tsx b/src/components/BusinessCard.tsx
index e799dc18..13e3bf2d 100644
--- a/src/components/BusinessCard.tsx
+++ b/src/components/BusinessCard.tsx
@@ -75,7 +75,6 @@ const BusinessCard: FunctionComponent<MainMenuProps> = ({anchor, homePage}) => {
             return false
         })
 
-        console.log("Found bio", bioSection[0])
         setUserBio(bioSection[0])
 
 
diff --git a/src/components/FooterBlockContentLayoutContainer.tsx b/src/components/FooterBlockContentLayoutContainer.tsx
index 59068320..56fd63d3 100644
--- a/src/components/FooterBlockContentLayoutContainer.tsx
+++ b/src/components/FooterBlockContentLayoutContainer.tsx
@@ -68,8 +68,7 @@ const FooterBlockContentLayoutContainer: FunctionComponent<FooterBlockContentLay
                         const developmentFooter: DevelopmentFooterSectionType = columnLayoutContainer
 
                         return (
-                            <StyledEngineProvider injectFirst>
-                                <ThemeProvider theme={WebDevSiteTheme}><Grid key={'BOTTOM_OF_PAGE_DEV'} container item
+                                <ThemeProvider key={'BOTTOM_OF_PAGE_DEV'}  theme={WebDevSiteTheme}><Grid container item
                                                                                        xs={12}
                                                                                        >
                                     <Link id={"BOTTOM_OF_PAGE"} underline="hover"><></>
@@ -78,14 +77,12 @@ const FooterBlockContentLayoutContainer: FunctionComponent<FooterBlockContentLay
                                         pageFooter={developmentFooter.footerMenuRef}
                                     />
                                 </Grid></ThemeProvider>
-                            </StyledEngineProvider>
                         );
                     case 'FooterSection':
                         const footer: FooterSectionType = columnLayoutContainer
 
                         return (
-                            <StyledEngineProvider injectFirst>
-                                <ThemeProvider theme={TheWebsiteTheme}><Grid key={'BOTTOM_OF_PAGE'} container item xs={12}
+                                <ThemeProvider key={'BOTTOM_OF_PAGE'}  theme={TheWebsiteTheme}><Grid container item xs={12}
                                                                                           >
                                     <Link id={"BOTTOM_OF_PAGE"} underline="hover"><></>
                                     </Link>
@@ -93,7 +90,6 @@ const FooterBlockContentLayoutContainer: FunctionComponent<FooterBlockContentLay
                                         pageFooter={footer.footerMenuRef}
                                     />
                                 </Grid></ThemeProvider>
-                            </StyledEngineProvider>
                         );
                     default:
                         return <span key={index}>Undefined section {columnLayoutContainer._type}</span>
diff --git a/src/components/HeaderBlockContentLayoutContainer.tsx b/src/components/HeaderBlockContentLayoutContainer.tsx
index 95b6aabd..ef3f8676 100644
--- a/src/components/HeaderBlockContentLayoutContainer.tsx
+++ b/src/components/HeaderBlockContentLayoutContainer.tsx
@@ -82,7 +82,7 @@ const HeaderBlockContentLayoutContainer: FunctionComponent<HeaderBlockContentLay
                         const developmentHeader: DevelopmentHeaderSectionType = columnLayoutContainer
 
                         return (
-                                <ThemeProvider theme={WebDevSiteTheme}><Grid key={'TOP_OF_PAGE_DEV'} container item xs={12} style={{height: WebDevSiteTheme.mixins.toolbar.height}} alignContent='center' alignItems='center'>
+                                <ThemeProvider theme={WebDevSiteTheme} key={'TOP_OF_PAGE_DEV'}><Grid  container item xs={12} style={{height: WebDevSiteTheme.mixins.toolbar.height}} alignContent='center' alignItems='center'>
                                     <Link id={"TOP_OF_PAGE"} underline="hover"><></>
                                     </Link>
                                     <DevelopmentHeader
@@ -94,7 +94,7 @@ const HeaderBlockContentLayoutContainer: FunctionComponent<HeaderBlockContentLay
                         const header: HeaderSectionType = columnLayoutContainer
 
                         return (
-                                <ThemeProvider theme={TheWebsiteTheme}><Grid key={'TOP_OF_PAGE'} container item xs={12} style={{height: TheWebsiteTheme.mixins.toolbar.height}}>
+                                <ThemeProvider theme={TheWebsiteTheme}  key={'TOP_OF_PAGE'}><Grid container item xs={12} style={{height: TheWebsiteTheme.mixins.toolbar.height}}>
                                     <Link id={"TOP_OF_PAGE"} underline="hover"><></>
                                     </Link>
                                     <Header
diff --git a/src/components/amenity-context/AmenityProvider.tsx b/src/components/amenity-context/AmenityProvider.tsx
index 4ff16e2b..afb88a18 100644
--- a/src/components/amenity-context/AmenityProvider.tsx
+++ b/src/components/amenity-context/AmenityProvider.tsx
@@ -69,16 +69,15 @@ const AmenityProvider: FunctionComponent<IProps & PropsWithChildren> = (
     const pageContext = useContext(PageContext)
 
     React.useEffect(() => {
-        console.log("Generating amenities", pageContext.page?.servicesAvailable)
         pageContext.page?.servicesAvailable?.map((service) => {
             const serviceElements = generateAmenitiesElement(service.serviceAmenities, service.slug.current, service.contentTitle)
-            console.log("Generated amenties", serviceElements, service.slug.current)
+            // console.log("Generated amenties", serviceElements, service.slug.current)
             dispatch({type: "ADD_ELEMENTS", payload: {serviceId: service.slug.current, elements: serviceElements}})
         })
     }, [pageContext.page?.servicesAvailable])
 
     const generateAmenitiesElement = (amenities: any[], serviceSlug: string, serviceTitle: string) => {
-        console.log(" generate", serviceSlug, state.serviceId)
+        // console.log(" generate", serviceSlug, state.serviceId)
         // if(serviceSlug === state.serviceId)
         const newElements = amenities?.map((serviceAmenity: ServiceAmenityType) => {
             return <ListItem
diff --git a/src/components/block-content-ui/cmsClient.ts b/src/components/block-content-ui/cmsClient.ts
index 611488de..dcc5df0f 100644
--- a/src/components/block-content-ui/cmsClient.ts
+++ b/src/components/block-content-ui/cmsClient.ts
@@ -3,7 +3,7 @@ import {
     SanityBlog,
     SanityBlogCategory,
     SanityBlogGroup, SanityBlogPreview,
-    SanityLandingPage, SanityMenuContainer,
+    SanityLandingPage, SanityMenuContainer, SanityMuiTheme,
     SanityRef, SanityTransformHwHomePage
 } from '../../common/sanityIo/Types'
 
@@ -67,6 +67,16 @@ const fetchBlogPost = (slug: string): Promise<SanityBlog> => {
         })
 }
 
+const fetchMuiTheme = (slug: string): Promise<SanityMuiTheme> => {
+    return sanityClient
+        .fetch(
+            `*[_type=="MuiTheme" && slug.current == $slug]`,
+            {slug}
+        ).then((data: SanityMuiTheme[]) => {
+            return data[0]
+        })
+}
+
 const fetchLatestBlogPostPreview = (): Promise<SanityBlogPreview> => {
     return sanityClient
         .fetch(
@@ -294,13 +304,12 @@ const fetchRefs = async (sanityRefs: SanityRef[]): Promise<any> => {
 }
 
 const useFetchPageBySlugQuery = (slug: string) => {
-    console.log("slug", slug)
+    // console.log("slug", slug)
     return useQuery(
         ['fetchPageBySlug', slug],
         async ({queryKey}) => {
             const [_, pageSlug] = queryKey
 
-            console.log(" Lookin for page with slug", pageSlug, queryKey)
             if (pageSlug && pageSlug.length > 0) {
                 return sanityClient
                     .fetch(
@@ -475,5 +484,6 @@ export default {
     useFetchMenuBySlugQuery,
     useFetchServicesQuery,
     useFetchRefsQuery,
-    useFetchMenuByRefQuery
+    useFetchMenuByRefQuery,
+    fetchMuiTheme
 }
\ No newline at end of file
diff --git a/src/components/customized-theme-provider/CustomizedThemeContext.tsx b/src/components/customized-theme-provider/CustomizedThemeContext.tsx
index f7cc4ea1..d2b18233 100644
--- a/src/components/customized-theme-provider/CustomizedThemeContext.tsx
+++ b/src/components/customized-theme-provider/CustomizedThemeContext.tsx
@@ -3,6 +3,7 @@ import {Theme} from "@mui/material/styles";
 
 export type CustomizedThemeContextType = {
     customizedTheme?: any
+    getThemeBySlug?: (slug:string)=> Promise<Partial<Theme>>
 };
 
 const CustomizedThemeContext = React.createContext<CustomizedThemeContextType>({});
diff --git a/src/components/customized-theme-provider/CustomizedThemeProvider.tsx b/src/components/customized-theme-provider/CustomizedThemeProvider.tsx
index 3b8932a8..65b7b2d0 100644
--- a/src/components/customized-theme-provider/CustomizedThemeProvider.tsx
+++ b/src/components/customized-theme-provider/CustomizedThemeProvider.tsx
@@ -7,6 +7,8 @@ import {grey} from "@mui/material/colors";
 import {SanityMuiTheme} from "../../common/sanityIo/Types";
 import PageContext from "../page-context/PageContext";
 import TheWebsiteTheme from "../../theme/Theme";
+import cmsClient from "../block-content-ui/cmsClient";
+import sanityClient from "../../sanityClient";
 
 type IProps = {
     pageTheme?: SanityMuiTheme
@@ -25,313 +27,312 @@ const CustomizedThemeProvider: FunctionComponent<IProps & PropsWithChildren> = (
         console.log('Theme ',pageContext.page?.theme)
         if(pageContext.page?.theme)
         {
-            const convertToHexCode  = (value?:string)=>{
-            let defaultBg = COLORS.WHITESMOKE;
-                switch(value){
-                    case 'WHITESMOKE':
-                        defaultBg = COLORS.WHITESMOKE
-                        break;
-                    case 'DARKBLUE':
-                        defaultBg = COLORS.DARKBLUE
-                        break;
-                    case 'TRANSPARENT_DARKBLUE':
-                        defaultBg = COLORS.TRANSPARENT_DARKBLUE
-                        break;
-                    case 'BLUE':
-                        defaultBg = COLORS.BLUE
-                        break;
-                    case 'GRAY':
-                        defaultBg = COLORS.DARKBLUE
-                        break;
-                    case 'LIGHT_GRAY':
-                        defaultBg = COLORS.DARKBLUE
-                        break;
-                    case 'TRANSPARENTWHITE':
-                        defaultBg = COLORS.DARKBLUE
-                        break;
-                    case 'LIGHTBLUE':
-                        defaultBg = COLORS.DARKBLUE
-                        break;
-                    case 'ALMOSTPURPLE':
-                        defaultBg = COLORS.DARKBLUE
-                        break;
-                    case 'LIGHTGRAY':
-                        defaultBg = COLORS.DARKBLUE
-                        break;
-                    case 'TRANPARENTLIGHTGRAY':
-                        defaultBg = COLORS.TRANSPARENTLIGHTGRAY
-                        break;
-                    case 'MEDIUMGRAY':
-                        defaultBg = COLORS.MEDIUMGRAY
-                        break;
-                    case 'DARKGRAY':
-                        defaultBg = COLORS.DARKGRAY
-                        break;
-                    case 'TRANPARENTDARKGRAY':
-                        defaultBg = COLORS.TRANSPARENTDARKGRAY
-                        break;
-                    case 'AQUA':
-                        defaultBg = COLORS.AQUA
-                        break;
-                    case 'RED':
-                        defaultBg = COLORS.RED
-                        break;
-                    case 'ALMOSTWHITE':
-                        defaultBg = COLORS.ALMOSTWHITE
-                        break;
-                    case 'DARKERGRAY':
-                        defaultBg = COLORS.DARKERGRAY
-                        break;
-                    case 'DARKERGRAY':
-                        defaultBg = COLORS.DARKERGRAY
-                        break;
-                    case 'LIGHTER_GRAY':
-                        defaultBg = COLORS.DARKBLUE
-                        break;
-                    case 'DARK_GRAY':
-                        defaultBg = COLORS.DARKBLUE
-                        break;
-                    default:
-                        defaultBg = COLORS.WHITESMOKE
-                }
+            const theCustomizedTheme = getThemeFromSanity(pageContext.page?.theme)
 
-                return defaultBg
+            setCustomizedTheme(theCustomizedTheme)
+        } else {
+            setCustomizedTheme(TheWebsiteTheme
+)
+        }
+    }, [pageContext.page?.theme])
+
+    const getThemeFromSanity =  (theme: SanityMuiTheme) => {
+        const convertToHexCode  = (value?:string)=>{
+            let defaultBg = COLORS.WHITESMOKE;
+            switch(value){
+                case 'WHITESMOKE':
+                    defaultBg = COLORS.WHITESMOKE
+                    break;
+                case 'DARKBLUE':
+                    defaultBg = COLORS.DARKBLUE
+                    break;
+                case 'TRANSPARENT_DARKBLUE':
+                    defaultBg = COLORS.TRANSPARENT_DARKBLUE
+                    break;
+                case 'BLUE':
+                    defaultBg = COLORS.BLUE
+                    break;
+                case 'GRAY':
+                    defaultBg = COLORS.DARKBLUE
+                    break;
+                case 'LIGHT_GRAY':
+                    defaultBg = COLORS.DARKBLUE
+                    break;
+                case 'TRANSPARENTWHITE':
+                    defaultBg = COLORS.DARKBLUE
+                    break;
+                case 'LIGHTBLUE':
+                    defaultBg = COLORS.DARKBLUE
+                    break;
+                case 'ALMOSTPURPLE':
+                    defaultBg = COLORS.DARKBLUE
+                    break;
+                case 'LIGHTGRAY':
+                    defaultBg = COLORS.DARKBLUE
+                    break;
+                case 'TRANPARENTLIGHTGRAY':
+                    defaultBg = COLORS.TRANSPARENTLIGHTGRAY
+                    break;
+                case 'MEDIUMGRAY':
+                    defaultBg = COLORS.MEDIUMGRAY
+                    break;
+                case 'DARKGRAY':
+                    defaultBg = COLORS.DARKGRAY
+                    break;
+                case 'TRANPARENTDARKGRAY':
+                    defaultBg = COLORS.TRANSPARENTDARKGRAY
+                    break;
+                case 'AQUA':
+                    defaultBg = COLORS.AQUA
+                    break;
+                case 'RED':
+                    defaultBg = COLORS.RED
+                    break;
+                case 'ALMOSTWHITE':
+                    defaultBg = COLORS.ALMOSTWHITE
+                    break;
+                case 'DARKERGRAY':
+                    defaultBg = COLORS.DARKERGRAY
+                    break;
+                case 'DARKERGRAY':
+                    defaultBg = COLORS.DARKERGRAY
+                    break;
+                case 'LIGHTER_GRAY':
+                    defaultBg = COLORS.DARKBLUE
+                    break;
+                case 'DARK_GRAY':
+                    defaultBg = COLORS.DARKBLUE
+                    break;
+                default:
+                    defaultBg = COLORS.WHITESMOKE
             }
-            const theCustomizedTheme = createTheme({
-                breakpoints: {
-                    values: {
-                        xs: pageContext.page?.theme.breakpoints?.xs ?? 0,
-                        sm: pageContext.page?.theme.breakpoints?.sm ?? 640,
-                        md: pageContext.page?.theme.breakpoints?.md ?? 980,
-                        lg: pageContext.page?.theme.breakpoints?.lg ?? 1160,
-                        xl: pageContext.page?.theme.breakpoints?.xl ?? 1320,
-                    }
+
+            return defaultBg
+        }
+
+        const theCustomizedTheme = createTheme({
+            breakpoints: {
+                values: {
+                    xs: theme.breakpoints?.xs ?? 0,
+                    sm: theme.breakpoints?.sm ?? 640,
+                    md: theme.breakpoints?.md ?? 980,
+                    lg: theme.breakpoints?.lg ?? 1160,
+                    xl: theme.breakpoints?.xl ?? 1320,
+                }
+            },
+            palette: {
+                background: {
+                    default: theme.colorPalette?.defaultBackground ? convertToHexCode(theme.colorPalette?.defaultBackground):COLORS.WHITESMOKE,
+                    paper: theme.colorPalette?.defaultPaperBackgroundColor ? convertToHexCode(theme.colorPalette?.defaultPaperBackgroundColor):COLORS.DARKGRAY
                 },
-                palette: {
-                    background: {
-                        default: pageContext.page?.theme.colorPalette?.defaultBackground ? convertToHexCode(pageContext.page?.theme.colorPalette?.defaultBackground):COLORS.WHITESMOKE,
-                        paper: pageContext.page?.theme.colorPalette?.defaultPaperBackgroundColor ? convertToHexCode(pageContext.page?.theme.colorPalette?.defaultPaperBackgroundColor):COLORS.DARKGRAY
-                    },
-                    primary: {
-                        main: pageContext.page?.theme.colorPalette?.primaryColor ? convertToHexCode(pageContext.page?.theme.colorPalette?.primaryColor):COLORS.RED,
-                    },
-                    secondary: {
-                        main: pageContext.page?.theme.colorPalette?.secondaryColor ? convertToHexCode(pageContext.page?.theme.colorPalette?.secondaryColor):COLORS.ALMOSTWHITE,
-                    },
-                    error: {
-                        main: '#840E0E',
-                        light: '#D79393',
-                        dark: '#640E0E'
-                    },
-                    success: {
-                        main: '#27AE60',
-                        light: '#93D7B0',
-                        dark: '#0E8433'
-                    },
-                    warning: {
-                        main: '#E2AB1F',
-                        light: '#F1D58F',
-                        dark: '#CF800A'
-                    },
-                    text: {
-                        primary: pageContext.page?.theme.colorPalette?.primaryTextColor ? convertToHexCode(pageContext.page?.theme.colorPalette?.primaryTextColor):COLORS.DARKGRAY,
-                        secondary: pageContext.page?.theme.colorPalette?.secondaryTextColor ? convertToHexCode(pageContext.page?.theme.colorPalette?.secondaryTextColor):grey[100],
-                        disabled: pageContext.page?.theme.colorPalette?.disabledTextColor ? convertToHexCode(pageContext.page?.theme.colorPalette?.disabledTextColor):COLORS.LIGHT_GRAY
-                    }
+                primary: {
+                    main: theme.colorPalette?.primaryColor ? convertToHexCode(theme.colorPalette?.primaryColor):COLORS.RED,
                 },
-                mixins: {
-                    toolbar: {
-                        // height: "55px"
-                        height: pageContext.page?.theme.appBarHeight + "px"
-                    }
+                secondary: {
+                    main: theme.colorPalette?.secondaryColor ? convertToHexCode(theme.colorPalette?.secondaryColor):COLORS.ALMOSTWHITE,
                 },
-                typography: {
-                    fontFamily: pageContext.page?.theme.typography?.fontFamily?pageContext.page?.theme.typography?.fontFamily.join(','):fonts,
-                    h1: {
-                        // Title1
-                        fontSize: '70px',
-                        fontStyle: 'normal',
-                        fontWeight: "bold",
-                        lineHeight: 1.3,
-                        letterSpacing: '-0.01em'
-                    },
-                    h2: {
-                        // Title2
-                        fontSize: '53px',
-                        fontStyle: 'normal',
-                        fontWeight: 700,
-                        lineHeight: 1.25,
-                        letterSpacing: '-0.02em'
-                    },
-                    h3: {
-                        // Title3
-                        fontSize: '32px',
-                        fontStyle: 'normal',
-                        fontWeight: 600,
-                        lineHeight: 1.4,
-                        letterSpacing: '-0.03em'
-                    },
-                    h4: {
-                        fontWeight: 'bold',
-                        fontStyle: 'normal',
-                        fontSize: '30px',
-                        lineHeight: 1
-                    },
-                    h5: {
-                        fontWeight: 'bold',
-                        fontStyle: 'normal',
-                        fontSize: '28px',
-                        lineHeight: 1
-                    },
-                    h6: {
-                        fontWeight: 'bold',
-                        fontStyle: 'normal',
-                        fontSize: '24px',
-                        lineHeight: 1
-                    },
-                    body1: {
-                        // Body
-                        fontSize: '14.5px',
-                        fontStyle: 'normal',
-                        fontWeight: 400,
-                        lineHeight: 1.5,
-                        letterSpacing: '-0.02em'
-                    },
-                    body2: {
-                        // Large
-                        fontSize: '18px',
-                        fontStyle: 'normal',
-                        fontWeight: 550,
-                        lineHeight: 1.5,
-                        letterSpacing: '0.0em'
-                    },
-                    button: {
-                        // Button
-                        fontSize: '19px',
-                        fontStyle: 'normal',
-                        fontWeight: 700,
-                        lineHeight: 1,
-                        letterSpacing: '-0.03em',
-                        textTransform: 'none'
-                    },
-                    subtitle1: {
-                        // Small
-                        fontSize: '14px',
-                        fontStyle: 'normal',
-                        fontWeight: 750,
-                        lineHeight: 1,
-                        letterSpacing: '-0.03em'
-                    },
-                    subtitle2: {
-                        // Micro
-                        fontSize: '11px',
-                        fontStyle: 'normal',
-                        fontWeight: 600,
-                        lineHeight: 1.45,
-                        letterSpacing: '-0.03em'
-                    }
+                error: {
+                    main: '#840E0E',
+                    light: '#D79393',
+                    dark: '#640E0E'
                 },
-                components: {
-                    MuiCssBaseline: {
-                        styleOverrides: {
-                            'html': [
-                                //     {
-                                //     '@font-face': FontFaces.ralewayFontFace
-                                // },
-                                //     {
-                                //     '@font-face': FontFaces.rainbowFontFace
-                                // }
-                            ]
-
-                        }
-                    },
-                    MuiInputBase: {
-                        styleOverrides: {
-                            root: {
-                                borderRadius: 0,
-                                "& .Mui-focus": {
-                                    borderBottom: 0
-                                }
-                            },
-                        }
-                    },
-                    MuiSnackbarContent: {
-                        styleOverrides: {
-                            root: {
-                                marginTop: "100px",
-                                border: "3px solid white",
-                                backgroundColor: 'rgba(210,0,39,0.9) !important'
+                success: {
+                    main: '#27AE60',
+                    light: '#93D7B0',
+                    dark: '#0E8433'
+                },
+                warning: {
+                    main: '#E2AB1F',
+                    light: '#F1D58F',
+                    dark: '#CF800A'
+                },
+                text: {
+                    primary: theme.colorPalette?.primaryTextColor ? convertToHexCode(theme.colorPalette?.primaryTextColor):COLORS.DARKGRAY,
+                    secondary: theme.colorPalette?.secondaryTextColor ? convertToHexCode(theme.colorPalette?.secondaryTextColor):grey[100],
+                    disabled: theme.colorPalette?.disabledTextColor ? convertToHexCode(theme.colorPalette?.disabledTextColor):COLORS.LIGHT_GRAY
+                }
+            },
+            mixins: {
+                toolbar: {
+                    // height: "55px"
+                    height: (theme.appBarHeight??55) + "px"
+                }
+            },
+            typography: {
+                fontFamily: theme.typography?.fontFamily?theme.typography?.fontFamily.join(','):fonts,
+                h1: {
+                    // Title1
+                    fontSize: '70px',
+                    fontStyle: 'normal',
+                    fontWeight: "bold",
+                    lineHeight: 1.3,
+                    letterSpacing: '-0.01em'
+                },
+                h2: {
+                    // Title2
+                    fontSize: '53px',
+                    fontStyle: 'normal',
+                    fontWeight: 700,
+                    lineHeight: 1.25,
+                    letterSpacing: '-0.02em'
+                },
+                h3: {
+                    // Title3
+                    fontSize: '32px',
+                    fontStyle: 'normal',
+                    fontWeight: 600,
+                    lineHeight: 1.4,
+                    letterSpacing: '-0.03em'
+                },
+                h4: {
+                    fontWeight: 'bold',
+                    fontStyle: 'normal',
+                    fontSize: '30px',
+                    lineHeight: 1
+                },
+                h5: {
+                    fontWeight: 'bold',
+                    fontStyle: 'normal',
+                    fontSize: '28px',
+                    lineHeight: 1
+                },
+                h6: {
+                    fontWeight: 'bold',
+                    fontStyle: 'normal',
+                    fontSize: '24px',
+                    lineHeight: 1
+                },
+                body1: {
+                    // Body
+                    fontSize: '14.5px',
+                    fontStyle: 'normal',
+                    fontWeight: 400,
+                    lineHeight: 1.5,
+                    letterSpacing: '-0.02em'
+                },
+                body2: {
+                    // Large
+                    fontSize: '18px',
+                    fontStyle: 'normal',
+                    fontWeight: 550,
+                    lineHeight: 1.5,
+                    letterSpacing: '0.0em'
+                },
+                button: {
+                    // Button
+                    fontSize: '19px',
+                    fontStyle: 'normal',
+                    fontWeight: 700,
+                    lineHeight: 1,
+                    letterSpacing: '-0.03em',
+                    textTransform: 'none'
+                },
+                subtitle1: {
+                    // Small
+                    fontSize: '14px',
+                    fontStyle: 'normal',
+                    fontWeight: 750,
+                    lineHeight: 1,
+                    letterSpacing: '-0.03em'
+                },
+                subtitle2: {
+                    // Micro
+                    fontSize: '11px',
+                    fontStyle: 'normal',
+                    fontWeight: 600,
+                    lineHeight: 1.45,
+                    letterSpacing: '-0.03em'
+                }
+            },
+            components: {
+                MuiInputBase: {
+                    styleOverrides: {
+                        root: {
+                            borderRadius: 0,
+                            "& .Mui-focus": {
+                                borderBottom: 0
                             }
+                        },
+                    }
+                },
+                MuiSnackbarContent: {
+                    styleOverrides: {
+                        root: {
+                            marginTop: "100px",
+                            border: "3px solid white",
+                            backgroundColor: 'rgba(210,0,39,0.9) !important'
                         }
-                    },
-                    MuiFormLabel: {
-                        styleOverrides: {
-                            root: {
-                                color: "#383838 !important",
-                                paddingTop: "4px !important",
-                            }
+                    }
+                },
+                MuiFormLabel: {
+                    styleOverrides: {
+                        root: {
+                            color: "#383838 !important",
+                            paddingTop: "4px !important",
                         }
-                    },
-                    MuiButton: {
-                        styleOverrides: {
-                            root: {
-                                borderRadius: '5px',
-                                paddingTop: "16px",
-                                paddingBottom: "16px"
-                            },
-                            contained: {
-                                boxShadow: "none",
-                            },
-                            containedPrimary: {
-                                border: '1px solid white',
-                                '&.Mui-disabled': {
-                                    color: '#969284'
-                                },
-                            },
-                            containedSecondary: {
-                                border: '1px solid whitesmoke',
-                                '&.Mui-disabled': {
-                                    color: 'rgba(207, 207, 207, .5)',
-                                },
+                    }
+                },
+                MuiButton: {
+                    styleOverrides: {
+                        root: {
+                            borderRadius: '5px',
+                            paddingTop: "16px",
+                            paddingBottom: "16px"
+                        },
+                        contained: {
+                            boxShadow: "none",
+                        },
+                        containedPrimary: {
+                            border: '1px solid white',
+                            '&.Mui-disabled': {
+                                color: '#969284'
                             },
-                            outlinedPrimary: {
-                                borderWidth: '3px',
-                                paddingTop: "16px",
-                                paddingBottom: "16px",
-                                paddingLeft: "64px",
-                                paddingRight: "64px"
+                        },
+                        containedSecondary: {
+                            border: '1px solid whitesmoke',
+                            '&.Mui-disabled': {
+                                color: 'rgba(207, 207, 207, .5)',
                             },
-                            outlinedSecondary: {
-                                borderWidth: '3px',
-                                paddingTop: "16px",
-                                paddingBottom: "16px",
-                                paddingLeft: "64px",
-                                paddingRight: "64px",
-                            }
+                        },
+                        outlinedPrimary: {
+                            borderWidth: '3px',
+                            paddingTop: "16px",
+                            paddingBottom: "16px",
+                            paddingLeft: "64px",
+                            paddingRight: "64px"
+                        },
+                        outlinedSecondary: {
+                            borderWidth: '3px',
+                            paddingTop: "16px",
+                            paddingBottom: "16px",
+                            paddingLeft: "64px",
+                            paddingRight: "64px",
                         }
-                    },
-                    MuiOutlinedInput: {
-                        styleOverrides: {
-                            root: {
-                                paddingRight: "16px",
-                                border: "2px solid black",
-                            }
+                    }
+                },
+                MuiOutlinedInput: {
+                    styleOverrides: {
+                        root: {
+                            paddingRight: "16px",
+                            border: "2px solid black",
                         }
                     }
                 }
-            })
+            }
+        })
+        return theCustomizedTheme;
+    }
 
-            setCustomizedTheme(theCustomizedTheme)
-        } else {
-            setCustomizedTheme(TheWebsiteTheme
-)
-        }
-    }, [pageContext.page?.theme])
+    const getThemeBySlug = async (slug: string) => {
+        const theRetrievedTheme = await cmsClient.fetchMuiTheme(slug)
 
+        return getThemeFromSanity(theRetrievedTheme)
+    }
 
     const newValue = useMemo(
         () => ({
-            customizedTheme: customizedTheme
+            customizedTheme,
+            getThemeBySlug
         }),
         [customizedTheme]
     );
diff --git a/src/components/logo/AlternatingText.tsx b/src/components/logo/AlternatingText.tsx
index 714cf5ac..098a47a6 100644
--- a/src/components/logo/AlternatingText.tsx
+++ b/src/components/logo/AlternatingText.tsx
@@ -20,6 +20,7 @@ const AlternatingText: FunctionComponent<IProps> = (props: IProps) => {
 
     return <Typography display='inline' component='div' align='center'>{textArray.map((textArrayItem, index) => {
         return <Typography
+            key={index}
             display='inline'
             align='center'
             color='primary'
diff --git a/src/components/mackenzies-mind/header/DevelopmentHeader.tsx b/src/components/mackenzies-mind/header/DevelopmentHeader.tsx
index a19e3517..5e29aeb7 100644
--- a/src/components/mackenzies-mind/header/DevelopmentHeader.tsx
+++ b/src/components/mackenzies-mind/header/DevelopmentHeader.tsx
@@ -40,9 +40,9 @@ const DevelopmentHeader: FunctionComponent<DevelopmentHeaderProps> = (props) =>
     const classes = useStyles()
     const mdDown = widthUtils.useIsWidthDown('md')
     const theme = useTheme()
-    React.useEffect(() => {
-        console.log("Page header in the header", props.pageHeader)
-    }, [props.pageHeader])
+    // React.useEffect(() => {
+    //     console.log("Page header in the header", props.pageHeader)
+    // }, [props.pageHeader])
 
     const pageContext = useContext(PageContext)
 
diff --git a/src/components/mackenzies-mind/header/Header.tsx b/src/components/mackenzies-mind/header/Header.tsx
index ce17c1fc..f76ec17e 100644
--- a/src/components/mackenzies-mind/header/Header.tsx
+++ b/src/components/mackenzies-mind/header/Header.tsx
@@ -40,9 +40,9 @@ const Header: FunctionComponent<HeaderProps> = (props) => {
     const mdDown = widthUtils.useIsWidthDown('md')
 
     // const theme = useTheme()
-    React.useEffect(() => {
-        console.log("Page header in the header", props.pageHeader)
-    }, [props.pageHeader])
+    // React.useEffect(() => {
+    //     console.log("Page header in the header", props.pageHeader)
+    // }, [props.pageHeader])
 
     const lgUp = widthUtils.useIsWidthUp('md')
 
diff --git a/src/components/mackenzies-mind/pages/PageMux.tsx b/src/components/mackenzies-mind/pages/PageMux.tsx
index eb770f75..d5374193 100644
--- a/src/components/mackenzies-mind/pages/PageMux.tsx
+++ b/src/components/mackenzies-mind/pages/PageMux.tsx
@@ -20,7 +20,7 @@ const PageMux: FunctionComponent<IProps> = (props: IProps) => {
 
     React.useEffect(() => {
         if (urlParams.pageSlug) {
-            console.log("found a slug in the mux", urlParams)
+            // console.log("found a slug in the mux", urlParams)
             pageContext.fetchPage && pageContext.fetchPage(urlParams.pageSlug)
         }
     }, [])
diff --git a/src/components/my-digital-resume/ResumeContactUsSection.tsx b/src/components/my-digital-resume/ResumeContactUsSection.tsx
index 72b0e5b7..c32d29ff 100644
--- a/src/components/my-digital-resume/ResumeContactUsSection.tsx
+++ b/src/components/my-digital-resume/ResumeContactUsSection.tsx
@@ -147,9 +147,9 @@ const ResumeContactUsSection: FunctionComponent<ContactUsProps> = (props) => {
         }
     );
 
-    useEffect(() => {
-        console.log("data", data)
-    }, [data])
+    // useEffect(() => {
+    //     console.log("data", data)
+    // }, [data])
 
     const getHelperText = () => {
         if (data) {
@@ -195,12 +195,12 @@ const ResumeContactUsSection: FunctionComponent<ContactUsProps> = (props) => {
                         <Grid item>
                             <Typography
                                 variant='h6'
-                            >{props.sectionData.title}
+                            >{props.sectionData.title}</Typography>
                                 <Typography
                                     variant='h6'
                                     color='primary'
                                     display='inline'
-                                >.</Typography>
+                                >.
                             </Typography>
                         </Grid>
                         <Grid item>
diff --git a/src/components/my-digital-resume/ResumeEducationSection.tsx b/src/components/my-digital-resume/ResumeEducationSection.tsx
index 871e8285..a8211cab 100644
--- a/src/components/my-digital-resume/ResumeEducationSection.tsx
+++ b/src/components/my-digital-resume/ResumeEducationSection.tsx
@@ -26,15 +26,15 @@ const ResumeEducationSection: FunctionComponent<IProps> = (props: IProps) => {
                     <Grid
                         container item spacing={3}>
                         <Grid item container md={4} alignContent='flex-start' spacing={1}>
-                            <Grid item>
+                            <Grid item container>
                                 <Typography
                                     variant='h6'
-                                >{props.sectionData.title}
+                                >{props.sectionData.title}</Typography>
                                     <Typography
                                         variant='h6'
                                         color='primary'
                                         display='inline'
-                                    >.</Typography>
+                                    >.
                                 </Typography>
                             </Grid>
                             <Grid item>
@@ -43,7 +43,7 @@ const ResumeEducationSection: FunctionComponent<IProps> = (props: IProps) => {
                         <Grid item container md={8} spacing={2} justifyContent={xsOnly ? 'center' : 'flex-start'}>
                             {
                                 props.sectionData.educationExperiences?.map((experience: ResumeEducation, index2: number) => {
-                                    return <Grid item container alignContent='flex-start'
+                                    return <Grid key={index2} item container alignContent='flex-start'
                                                  style={{
                                                      borderBottom: `1px solid ${index2 >= (props.sectionData.educationExperiences?.length ?? 0) - 2 ? "transparent" : COLORS.LIGHTGRAY}`,
                                                      // padding: theme.spacing(1.75, 0)
diff --git a/src/components/my-digital-resume/ResumeExperienceSection.tsx b/src/components/my-digital-resume/ResumeExperienceSection.tsx
index 3e574ac9..d357049c 100644
--- a/src/components/my-digital-resume/ResumeExperienceSection.tsx
+++ b/src/components/my-digital-resume/ResumeExperienceSection.tsx
@@ -29,15 +29,15 @@ const ResumeExperienceSection: FunctionComponent<IProps> = (props: IProps) => {
         >
             <Grid container item spacing={3}>
                 <Grid item container md={4} alignContent='flex-start' spacing={1}>
-                    <Grid item><Typography variant='h6'>{props.sectionData.title}<Typography variant='h6'
+                    <Grid item container><Typography variant='h6'>{props.sectionData.title}</Typography><Typography variant='h6'
                                                                                              color='primary'
-                                                                                             display='inline'>.</Typography></Typography></Grid>
+                                                                                             display='inline'>.</Typography></Grid>
                     <Grid item><Typography variant='body1'>{props.sectionData.introduction}</Typography></Grid>
                 </Grid>
                 <Grid item container md={8} spacing={2} justifyContent={xsOnly ? 'center' : 'flex-start'}>
                     {
                         props.sectionData.experiences?.map((experience: ResumeExperience, index2: number) => {
-                            return <Grid item container alignContent='flex-start'
+                            return <Grid key={index2} item container alignContent='flex-start'
                                          style={{
                                              borderBottom: `1px solid ${index2 >= (props.sectionData.experiences?.length ?? 0) - 1 ? "transparent" : COLORS.LIGHTGRAY}`,
                                              // padding: theme.spacing(1.75, 0)
diff --git a/src/components/my-digital-resume/ResumeFeedbackSection.tsx b/src/components/my-digital-resume/ResumeFeedbackSection.tsx
index 4b5dc3b6..d9a8c887 100644
--- a/src/components/my-digital-resume/ResumeFeedbackSection.tsx
+++ b/src/components/my-digital-resume/ResumeFeedbackSection.tsx
@@ -1,4 +1,4 @@
-import React, {FunctionComponent, useContext} from 'react'
+import React, {FunctionComponent} from 'react'
 import {ThemeProvider} from "@mui/material/styles";
 import {Grid, Typography} from '@mui/material'
 import {ResumeFeedback, ResumeFeedbackSectionType} from "../BlockContentTypes";
@@ -20,70 +20,71 @@ const ResumeFeedbackSection: FunctionComponent<IProps> = (props: IProps) => {
     const xsOnly = widthUtils.useIsWidthDown('xs')
 
     return (
-            <ThemeProvider theme={TheWebsiteTheme
-}><Grid
-                container
-                item
-                style={{
-                    padding: TheWebsiteTheme
-.spacing(4)
-                }}
-                className={globalClasses.resumeSection}
-            >
-                <Grid container item spacing={3}>
-                    <Grid item container md={4} alignContent='flex-start' spacing={1}>
-                        <Grid item container>
-                            <Typography
-                                variant='h6'
-                            >{props.sectionData.title}
-                                <Typography
-                                    variant='h6'
-                                    color='primary'
-                                    display='inline'
-                                >.</Typography>
-                            </Typography>
-                        </Grid>
-                        <Grid item>
-                            <Typography variant='body1'>{props.sectionData.introduction}</Typography></Grid>
+        <ThemeProvider theme={TheWebsiteTheme
+        }><Grid
+            container
+            item
+            style={{
+                padding: TheWebsiteTheme
+                    .spacing(4)
+            }}
+            className={globalClasses.resumeSection}
+        >
+            <Grid container item spacing={3}>
+                <Grid item container md={4} alignContent='flex-start' spacing={1}>
+                    <Grid item container>
+                        <Typography
+                            variant='h6'
+                        >{props.sectionData.title}</Typography>
+                        <Typography
+                            variant='h6'
+                            color='primary'
+                            display='inline'
+                        >.
+                        </Typography>
                     </Grid>
-                    <Grid item container md={8} spacing={2} justifyContent={xsOnly?"center":"flex-start"}>
-                        {
-                            props.sectionData.feedbackEntries?.map((feedbackEntry: ResumeFeedback, index2: number) => {
-                                return <Grid item container alignContent='flex-start'
-                                             style={{
-                                                 borderBottom: `1px solid ${index2 >= (props.sectionData.feedbackEntries?.length ?? 0) - 2 ? "transparent" : COLORS.LIGHTGRAY}`,
-                                                 // padding: theme.spacing(1.75, 0)
-                                             }} xs={12} spacing={2} justifyContent='flex-start'>
-                                    <Grid item md={3} lg={2} xl={2} container>
-                                        <img src={urlFor(feedbackEntry.imageSrc ?? "").url() ?? ""} height={50} style={{maxWidth:"100%"}}/>
+                    <Grid item>
+                        <Typography variant='body1'>{props.sectionData.introduction}</Typography></Grid>
+                </Grid>
+                <Grid item container md={8} spacing={2} justifyContent={xsOnly ? "center" : "flex-start"}>
+                    {
+                        props.sectionData.feedbackEntries?.map((feedbackEntry: ResumeFeedback, index2: number) => {
+                            return <Grid key={index2} item container alignContent='flex-start'
+                                         style={{
+                                             borderBottom: `1px solid ${index2 >= (props.sectionData.feedbackEntries?.length ?? 0) - 2 ? "transparent" : COLORS.LIGHTGRAY}`,
+                                             // padding: theme.spacing(1.75, 0)
+                                         }} xs={12} spacing={2} justifyContent='flex-start'>
+                                <Grid item md={3} lg={2} xl={2} container>
+                                    <img src={urlFor(feedbackEntry.imageSrc ?? "").url() ?? ""} height={50}
+                                         style={{maxWidth: "100%"}}/>
+                                </Grid>
+                                <Grid item md={9} lg={10} xl={10} container>
+                                    <Grid container item>
+                                        <Typography display='inline'
+                                                    variant='body2'>{feedbackEntry.customerName}</Typography>
                                     </Grid>
-                                    <Grid item md={9} lg={10} xl={10} container>
-                                        <Grid container item>
-                                                <Typography display='inline'
-                                                            variant='body2'>{feedbackEntry.customerName}</Typography>
-                                        </Grid>
-                                        <Grid container item>
-                                            <Grid item>
+                                    <Grid container item>
+                                        <Grid item>
 
-                                                <Typography display='inline'
-                                                            variant='subtitle1'>{feedbackEntry.customerTitle}</Typography>@
-                                                <Typography display='inline'
-                                                            variant='subtitle1'>{feedbackEntry.companyName}</Typography>
-                                            </Grid>
-                                        </Grid>
-                                        <Grid container item>
-                                            <Typography
-                                                variant='body1' gutterBottom>"{feedbackEntry.quote}"</Typography>
+                                            <Typography display='inline'
+                                                        variant='subtitle1'>{feedbackEntry.customerTitle}</Typography>@
+                                            <Typography display='inline'
+                                                        variant='subtitle1'>{feedbackEntry.companyName}</Typography>
                                         </Grid>
                                     </Grid>
+                                    <Grid container item>
+                                        <Typography
+                                            variant='body1' gutterBottom>"{feedbackEntry.quote}"</Typography>
+                                    </Grid>
                                 </Grid>
-                            })
-                        }
+                            </Grid>
+                        })
+                    }
 
-                    </Grid>
                 </Grid>
             </Grid>
-            </ThemeProvider>
+        </Grid>
+        </ThemeProvider>
     );
 }
 
diff --git a/src/components/my-digital-resume/ResumePortfolioSection.tsx b/src/components/my-digital-resume/ResumePortfolioSection.tsx
index ec5eac58..4280f30b 100644
--- a/src/components/my-digital-resume/ResumePortfolioSection.tsx
+++ b/src/components/my-digital-resume/ResumePortfolioSection.tsx
@@ -42,12 +42,12 @@ const ResumePortfolioSection: FunctionComponent<IProps> = (props: IProps) => {
                         <Grid item container>
                             <Typography
                                 variant='h6'
-                            >{props.sectionData.title}
+                            >{props.sectionData.title}</Typography>
                                 <Typography
                                     variant='h6'
                                     color='primary'
                                     display='inline'
-                                >.</Typography>
+                                >.
                             </Typography>
                         </Grid>
                         <Grid item container>
@@ -56,7 +56,7 @@ const ResumePortfolioSection: FunctionComponent<IProps> = (props: IProps) => {
                     <Grid item container justifyContent={xsOnly ? 'center' : 'flex-start'}>
                         {
                             props.sectionData.portfolioEntries?.map((portfolioItem: ResumePortfolioItem, index2: number) => {
-                                return <Grid container item xs={12} sm={4} lg={3} xl={2} alignContent='flex-start'>
+                                return <Grid key={index2} container item xs={12} sm={4} lg={3} xl={2} alignContent='flex-start'>
                                     <Button onClick={(e) => sendToModal(portfolioItem)}>
                                         <Grid
                                             item container
diff --git a/src/components/my-digital-resume/ResumeSkillsSection.tsx b/src/components/my-digital-resume/ResumeSkillsSection.tsx
index bc1fcc6f..68a2f693 100644
--- a/src/components/my-digital-resume/ResumeSkillsSection.tsx
+++ b/src/components/my-digital-resume/ResumeSkillsSection.tsx
@@ -37,9 +37,9 @@ const ResumeSkillsSection: FunctionComponent<IProps> = (props: IProps) => {
             >
                 <Grid container item spacing={3}>
                     <Grid item container md={4} alignContent='flex-start' spacing={1}>
-                        <Grid item><Typography variant='h6'>{props.sectionData.title}<Typography variant='h6'
+                        <Grid item container><Typography component='div' variant='h6'>{props.sectionData.title}</Typography><Typography variant='h6'
                                                                                                  color='primary'
-                                                                                                 display='inline'>.</Typography></Typography></Grid>
+                                                                                                 display='inline'>.</Typography></Grid>
                         <Grid item><Typography variant='body1'>{props.sectionData.introduction}</Typography></Grid>
                     </Grid>
                     <Grid item container md={8} spacing={2} justifyContent='space-between'>
diff --git a/src/components/page-context/PageProvider.tsx b/src/components/page-context/PageProvider.tsx
index ecfb9766..5c37b7c6 100644
--- a/src/components/page-context/PageProvider.tsx
+++ b/src/components/page-context/PageProvider.tsx
@@ -87,18 +87,11 @@ const PageProvider: FunctionComponent<IProps & PropsWithChildren> = (
 
     const loadedPageQuery = cmsClient.useFetchPageBySlugQuery(state.pageSlug)
 
-    React.useEffect(() => {
-        if (state.analyticsId) {
-            console.log("states analytics changd", state.analyticsId)
-
-        }
-    }, [state.analyticsId])
-
     React.useEffect(() => {
         if (!props.page && (state.pageSlug && state.pageSlug.length > 0)) {
-            console.log("states pageslug changd", state.pageSlug)
+            // console.log("states pageslug changd", state.pageSlug)
             loadedPageQuery.refetch().then((resp) => {
-                console.log("reftecth?", resp)
+                // console.log("reftecth?", resp)
             })
         }
     }, [state.pageSlug])
diff --git a/src/components/snackbar-context/ModalProvider.tsx b/src/components/snackbar-context/ModalProvider.tsx
index 10b96656..af4179d4 100644
--- a/src/components/snackbar-context/ModalProvider.tsx
+++ b/src/components/snackbar-context/ModalProvider.tsx
@@ -19,8 +19,8 @@ const ModalProvider: FunctionComponent<IProps & PropsWithChildren> = (
     const ref: any = useRef(null)
     const xsDown = widthUtils.useIsWidthDown('xs')
 
-    const isOverflow = useIsVerticalOverflow(ref, () => {
-    })
+    // const isOverflow = useIsVerticalOverflow(ref, () => {
+    // })
     const [modalContent, setModalContent] = React.useState<SanityModalType | undefined>(
         undefined,
     );
@@ -29,12 +29,12 @@ const ModalProvider: FunctionComponent<IProps & PropsWithChildren> = (
         setModalOpen(false)
     }
 
-    React.useEffect(() => {
-        console.log("height", ref?.current?.scrollHeight, ref?.current?.clientHeight)
-    }, [ref.current])
+    // React.useEffect(() => {
+    //     console.log("height", ref?.current?.scrollHeight, ref?.current?.clientHeight)
+    // }, [ref.current])
 
     const openModal = (contents?: SanityModalType) => {
-        console.log("Opening modal", contents)
+        // console.log("Opening modal", contents)
         if (!contents) {
             return;
         }
diff --git a/src/theme/MixedFeelingsByTTheme.ts b/src/theme/MixedFeelingsByTTheme.ts
index 2d7f2cf4..fa66d6b7 100644
--- a/src/theme/MixedFeelingsByTTheme.ts
+++ b/src/theme/MixedFeelingsByTTheme.ts
@@ -1,15 +1,9 @@
 import { createTheme, adaptV4Theme } from '@mui/material';
-// import GrotescoLight from '../common/fonts/Grotesco/Grotesco-Web-Font/Grotesco-Light.ttf'
-// import Feixen from '../common/fonts/Studio Feixen Sans Writer/Web/StudioFeixenSansWriter-Regular.ttf'
 import Poppins from '../fonts/Poppins/Poppins-Medium.ttf'
 import MontserratBold from '../fonts/Montserrat/Montserrat-Bold.ttf'
 import MontserratBold2 from '../fonts/Montserrat/Montserrat-Bold.otf'
-// import PoppinsBold from '.../fonts/Poppins/Poppins-Bold.ttf'
 import PoppinsXBold from '../fonts/Poppins/Poppins-ExtraBold.ttf'
-// import PlexSans from '../common/fonts/IBM Plex/OpenType/IBM-Plex-Sans/IBMPlexSans-Regular.otf'
-// import Raleway from './common/fonts/Raleway/variable/TTF/Raleway-VF.ttf'
-// import RalewayBold from './common/fonts/Raleway/static/TTF/Raleway-Bold.ttf'
-import BitterPro from '../fonts/bitter_pro/fonts/ttf/BitterPro-Black.ttf'
+import {COLORS} from "./common/ColorPalette";
 
 type FontFace = {
     fontDisplay?: any
@@ -19,50 +13,6 @@ type FontFace = {
     src?: string
 }
 
-// export const grotesco: FontFace = {
-//     fontFamily: 'Grotesco',
-//     fontStyle: 'normal',
-//     fontDisplay: 'swap', // uses the fallback font to display the text until the custom font has fully downloaded. This is also known as a “flash of unstyled text” or FOUT.
-//     fontWeight: 400,
-//     src: `
-//     local('Grotesco'),
-//     url(${Grotesco}) format('truetype')
-//   `
-// }
-
-// const grotescoLight: FontFace = {
-//     fontFamily: 'Grotesco Light',
-//     fontStyle: 'normal',
-//     fontDisplay: 'swap', // uses the fallback font to display the text until the custom font has fully downloaded. This is also known as a “flash of unstyled text” or FOUT.
-//     fontWeight: 400,
-//     src: `
-//     local('Grotesco Light'),
-//     url(${GrotescoLight}) format('truetype')
-//   `
-// }
-
-// const feixen: FontFace = {
-//     fontFamily: 'Feixen',
-//     fontStyle: 'normal',
-//     fontDisplay: 'swap', // uses the fallback font to display the text until the custom font has fully downloaded. This is also known as a “flash of unstyled text” or FOUT.
-//     fontWeight: 400,
-//     src: `
-//     local('Feixen'),
-//     url(${Feixen}) format('opentype')
-//   `
-// }
-
-export const bitterPro: FontFace = {
-    fontFamily: 'Bitter Pro',
-    fontStyle: 'normal',
-    fontDisplay: 'swap', // uses the fallback font to display the text until the custom font has fully downloaded. This is also known as a “flash of unstyled text” or FOUT.
-    fontWeight: 400,
-    src: `
-    local('Bitter Pro'),
-    url(${BitterPro}) format('truetype')
-  `
-}
-
 const poppins: FontFace = {
     fontFamily: 'Poppins',
     fontStyle: 'normal',
@@ -97,39 +47,6 @@ const poppins: FontFace = {
 //   `
 // }
 
-export const montserratBold: FontFace = {
-    fontFamily: 'Montserrat',
-    fontStyle: 'bold',
-    fontDisplay: 'swap', // uses the fallback font to display the text until the custom font has fully downloaded. This is also known as a “flash of unstyled text” or FOUT.
-    fontWeight: 700,
-    src: `
-    local('Montserrat'),
-    url(${MontserratBold}) format('truetype'),
-    url(${MontserratBold2}) format('opentype'),
-    'sans-serif'
-  `
-}
-
-// const poppinsBold: FontFace = {
-//     fontFamily: 'Poppins',
-//     fontStyle: 'normal',
-//     fontDisplay: 'swap', // uses the fallback font to display the text until the custom font has fully downloaded. This is also known as a “flash of unstyled text” or FOUT.
-//     fontWeight: 700,
-//     src: `
-//     local('Poppins'),
-//     url(${PoppinsBold}) format('opentype')
-//   `
-// }
-// export const rainbow: FontFace = {
-//     fontFamily: 'Rainbow',
-//     fontStyle: 'normal',
-//     fontDisplay: 'swap', // uses the fallback font to display the text until the custom font has fully downloaded. This is also known as a “flash of unstyled text” or FOUT.
-//     fontWeight: 400,
-//     src: `
-//     local('Rainbow Regular'),
-//     url(${Rainbow}) format('truetype')
-//   `
-// }
 
 
 export const poppinsXBold: FontFace = {
@@ -143,36 +60,8 @@ export const poppinsXBold: FontFace = {
   `
 }
 
-// const plexSans: FontFace = {
-//     fontFamily: 'Plex Sans',
-//     fontStyle: 'normal',
-//     fontDisplay: 'swap', // uses the fallback font to display the text until the custom font has fully downloaded. This is also known as a “flash of unstyled text” or FOUT.
-//     fontWeight: 400,
-//     src: `
-//     local('Plex Sans'),
-//     url(${PlexSans}) format('opentype')
-//   `
-// }
-
 const fonts = ['Poppins', 'Montserrat', 'sans-serif'].join(',')
 
-// New Registration flow colors
-export const PINK = '#FFA9E7'
-
-// Marketplace colors
-
-export enum COLORS {
-    DARKORANGE = 'rgb(70,38,0)',
-    TRANSPARENT_DARKBLUE = 'rgba(0,0,53,.85)',
-    BLUE = 'rgba(16, 43, 136, 1)',
-    DARK_GRAY = '#A8A9AC',
-    GRAY = 'rgba(207, 207, 207, 1)',
-    LIGHT_GRAY = '#E3E3E3',
-    TRANSPARENTWHITE = 'rgba(255,255,255,0.75)',
-    LIGHTGRAY = "#F4F3F5",
-    DARKGRAY = "#43424A",
-}
-
 const MixedFeelingsByTTheme = createTheme(adaptV4Theme({
     breakpoints: {
         values: {
@@ -212,8 +101,8 @@ const MixedFeelingsByTTheme = createTheme(adaptV4Theme({
         },
         text: {
             primary: COLORS.DARKORANGE,
-            secondary: COLORS.LIGHT_GRAY,
-            disabled: COLORS.LIGHT_GRAY
+            secondary: COLORS.LIGHT_GRAY2,
+            disabled: COLORS.LIGHT_GRAY2
         }
     },
     typography: {
diff --git a/src/theme/TransformHWTheme.ts b/src/theme/TransformHWTheme.ts
index 1dfc93cf..9b22a4fd 100644
--- a/src/theme/TransformHWTheme.ts
+++ b/src/theme/TransformHWTheme.ts
@@ -1,115 +1,9 @@
 import {createTheme} from '@mui/material';
-// import GrotescoLight from '../common/fonts/Grotesco/Grotesco-Web-Font/Grotesco-Light.ttf'
-// import Feixen from './common/fonts/Studio Feixen Sans Writer/Web/StudioFeixenSansWriter-Regular.ttf'
-// import Poppins from './common/fonts/Poppins/Poppins-Medium.ttf'
-// import MontserratBold from './common/fonts/Montserrat/Montserrat-Bold.ttf'
-// import MontserratBold2 from './common/fonts/Montserrat/Montserrat-Bold.otf'
-// import PoppinsBold from './common/fonts/Poppins/Poppins-Bold.ttf'
-// import PoppinsXBold from './common/fonts/Poppins/Poppins-ExtraBold.ttf'
 import {COLORS} from "./common/ColorPalette";
-// import PlexSans from '../common/fonts/IBM Plex/OpenType/IBM-Plex-Sans/IBMPlexSans-Regular.otf'
-
-type FontFace = {
-    fontDisplay?: any
-    fontFamily?: any
-    fontStyle?: any
-    fontWeight?: number
-    src?: string
-}
-
-// export const grotesco: FontFace = {
-//     fontFamily: 'Grotesco',
-//     fontStyle: 'normal',
-//     fontDisplay: 'swap', // uses the fallback font to display the text until the custom font has fully downloaded. This is also known as a “flash of unstyled text” or FOUT.
-//     fontWeight: 400,
-//     src: `
-//     local('Grotesco'),
-//     url(${Grotesco}) format('truetype')
-//   `
-// }
-
-// const grotescoLight: FontFace = {
-//     fontFamily: 'Grotesco Light',
-//     fontStyle: 'normal',
-//     fontDisplay: 'swap', // uses the fallback font to display the text until the custom font has fully downloaded. This is also known as a “flash of unstyled text” or FOUT.
-//     fontWeight: 400,
-//     src: `
-//     local('Grotesco Light'),
-//     url(${GrotescoLight}) format('truetype')
-//   `
-// }
-
-// const feixen: FontFace = {
-//     fontFamily: 'Feixen',
-//     fontStyle: 'normal',
-//     fontDisplay: 'swap', // uses the fallback font to display the text until the custom font has fully downloaded. This is also known as a “flash of unstyled text” or FOUT.
-//     fontWeight: 400,
-//     src: `
-//     local('Feixen'),
-//     url(${Feixen}) format('opentype')
-//   `
-// }
-//
-// const poppins: FontFace = {
-//     fontFamily: 'Poppins',
-//     fontStyle: 'normal',
-//     fontDisplay: 'swap', // uses the fallback font to display the text until the custom font has fully downloaded. This is also known as a “flash of unstyled text” or FOUT.
-//     fontWeight: 400,
-//     src: `
-//     local('Poppins'),
-//     url(${Poppins}) format('opentype')
-//   `
-// }
-//
-// export const montserratBold: FontFace = {
-//     fontFamily: 'Montserrat',
-//     fontStyle: 'bold',
-//     fontDisplay: 'swap', // uses the fallback font to display the text until the custom font has fully downloaded. This is also known as a “flash of unstyled text” or FOUT.
-//     fontWeight: 700,
-//     src: `
-//     local('Montserrat'),
-//     url(${MontserratBold}) format('truetype'),
-//     url(${MontserratBold2}) format('opentype'),
-//     'sans-serif'
-//   `
-// }
-//
-// // const poppinsBold: FontFace = {
-// //     fontFamily: 'Poppins',
-// //     fontStyle: 'normal',
-// //     fontDisplay: 'swap', // uses the fallback font to display the text until the custom font has fully downloaded. This is also known as a “flash of unstyled text” or FOUT.
-// //     fontWeight: 700,
-// //     src: `
-// //     local('Poppins'),
-// //     url(${PoppinsBold}) format('opentype')
-// //   `
-// // }
-// export const poppinsXBold: FontFace = {
-//     fontFamily: 'Poppins',
-//     fontStyle: 'normal',
-//     fontDisplay: 'swap', // uses the fallback font to display the text until the custom font has fully downloaded. This is also known as a “flash of unstyled text” or FOUT.
-//     fontWeight: 900,
-//     src: `
-//     local('Poppins'),
-//     url(${PoppinsXBold}) format('opentype')
-//   `
-// }
-
-// const plexSans: FontFace = {
-//     fontFamily: 'Plex Sans',
-//     fontStyle: 'normal',
-//     fontDisplay: 'swap', // uses the fallback font to display the text until the custom font has fully downloaded. This is also known as a “flash of unstyled text” or FOUT.
-//     fontWeight: 400,
-//     src: `
-//     local('Plex Sans'),
-//     url(${PlexSans}) format('opentype')
-//   `
-// }
 
 const fonts = ['Poppins', 'Montserrat', 'sans-serif'].join(',')
 
 // New Registration flow colors
-export const PINK = '#FFA9E7'
 
 const TransformHWTheme = createTheme({
     breakpoints: {
diff --git a/src/theme/common/ColorPalette.ts b/src/theme/common/ColorPalette.ts
index 5d3682d3..4137d2c3 100644
--- a/src/theme/common/ColorPalette.ts
+++ b/src/theme/common/ColorPalette.ts
@@ -20,4 +20,7 @@ export enum COLORS {
     DARKERGRAY = "#383838",
     DARK_GRAY = '#A8A9AC',
     LIGHTER_GRAY = '#E3E3E3',
+    PINK = '#FFA9E7',
+    DARKORANGE = 'rgb(70,38,0)',
+    LIGHT_GRAY2 = '#E3E3E3',
 }
\ No newline at end of file