diff --git a/src/components/templates/mackenzies-mind/header/Header.tsx b/src/components/templates/mackenzies-mind/header/Header.tsx
index 8714385c..92f7e8f3 100644
--- a/src/components/templates/mackenzies-mind/header/Header.tsx
+++ b/src/components/templates/mackenzies-mind/header/Header.tsx
@@ -9,6 +9,24 @@ import FullTextSearch from "./FullTextSearch";
 import AppBarWrapper from './AppBarWrapper';
 import {COLORS} from "../../../../theme/common/ColorPalette";
 
+
+import makeStyles from "@mui/styles/makeStyles";
+import {Theme} from "@mui/material/styles";
+
+export const useStyles = makeStyles((theme: Theme) => ({
+    hover:{
+        "&:hover": {
+            backgroundColor: "lightgray !important",
+            color: "#383838"
+        }
+    },
+    hoverSearch:{
+        "&:hover": {
+            color: theme.palette.primary.main
+        }
+    }
+}))
+
 export type HeaderProps = {
     pageHeader?: SanityMenuContainer
     isAppBar?: boolean
@@ -18,6 +36,7 @@ export type HeaderProps = {
 }
 
 const Header: FunctionComponent<HeaderProps> = (props) => {
+    const classes = useStyles()
     const customizedTheme = useTheme()
 
     const mdDown = useMediaQuery(customizedTheme.breakpoints.down('md'))
@@ -26,52 +45,54 @@ const Header: FunctionComponent<HeaderProps> = (props) => {
     return (<AppBarWrapper isAppBar={props.isAppBar} isEnhanced={props.isEnhanced}>
             {props.pageHeader?.title ?
                 <Grid item container
-                      alignContent='center' alignItems='center' style={{height:"100%",paddingLeft:"8px"}}>
-                    <Grid container item xs={4} sm={3} md={3} >
+                      alignContent='center' alignItems='center' style={{height: "100%", paddingLeft: "8px"}}>
+                    <Grid container item xs={4} sm={3} md={3}>
                         <Logo noWrap logoText={props.pageHeader?.logoText}
-                                         logoAccentText={props.pageHeader?.logoAccentText}/>
+                              logoAccentText={props.pageHeader?.logoAccentText}/>
                     </Grid>
-                    <Grid item container xs={8} sm={9} md={9} justifyContent='flex-end' >
+                    <Grid item container xs={8} sm={9} md={9} justifyContent='flex-end'>
 
-                            {
-                                !mdDown && <Grid xs={4} md={10} lg={10} container item justifyContent='flex-end'
-                                                 alignItems='center'
-                                                 alignContent='center'
-                                                 sx={{
-                                                     height: "100%",
-                                                     paddingRight: mdDown ? customizedTheme.spacing(0) : customizedTheme.spacing(4)
-                                                 }}>
-                                    <FilteredMenuItems
-                                        // bgColor={!mdDown ? TransformHWTheme.palette.primary.main : COLORS.TRANSPARENTWHITE}
-                                        subMenus={props.pageHeader?.subMenus ?? []} onlyButtons={mdDown}
-                                        includeMenuItems={!mdDown}
-                                        includeMenuGroups={!mdDown}/>
+                        {
+                            !mdDown && <Grid xs={4} md={10} lg={10} container item justifyContent='flex-end'
+                                             alignItems='center'
+                                             alignContent='center'
+                                             sx={{
+                                                 height: "100%",
+                                                 paddingRight: mdDown ? customizedTheme.spacing(0) : customizedTheme.spacing(4)
+                                             }}>
+                                <FilteredMenuItems
+                                    // bgColor={!mdDown ? TransformHWTheme.palette.primary.main : COLORS.TRANSPARENTWHITE}
+                                    subMenus={props.pageHeader?.subMenus ?? []} onlyButtons={mdDown}
+                                    includeMenuItems={!mdDown}
+                                    includeMenuGroups={!mdDown}/>
 
-                                </Grid>
-                            }
-                            {
-                                mdDown && <Grid item xs={5} sm={4} container justifyContent='flex-end'>
-                                    {props.pageHeader && <MainMenu menu={props.pageHeader} anchor='top'/>}
-                                </Grid>
-                            }
+                            </Grid>
+                        }
+                        {
+                            mdDown && <Grid item xs={5} sm={4} container justifyContent='flex-end'>
+                                {props.pageHeader && <MainMenu menu={props.pageHeader} anchor='top'/>}
+                            </Grid>
+                        }
                         {props.isSearch && <Grid container item maxWidth={96}
-        // style={{backgroundColor: "blue"}}
-                                                  justifyContent='flex-end'
+                            // style={{backgroundColor: "blue"}}
+                                                 justifyContent='flex-end'
                                                  alignContent='center' alignItems='center'>
                             <Grid item><Box sx={{
                                 // maxWidth: "64px",
-                                paddingLeft:"16px",
-                                paddingRight: mdDown?"16px":"8px",
+                                paddingLeft: "16px",
+                                paddingRight: mdDown ? "16px" : "8px",
                                 borderLeft: `1px solid ${customizedTheme.palette.primary.main}`
-                            }}><IconButton color='secondary' sx={{
-                                // marginLeft: "32px",
-                                // marginRight: "32px",
-                                backgroundColor: customizedTheme.palette.primary.main
                             }}>
-                                <Search color='secondary' fontSize='large' onClick={() => {
-                                    setIsSearchOpen((state) => !state)
-                                }}/>
-                            </IconButton></Box></Grid>
+                                <IconButton color='secondary' sx={{
+                                    // marginLeft: "32px",
+                                    // marginRight: "32px",
+                                    color: customizedTheme.palette.text.secondary,
+                                    backgroundColor: customizedTheme.palette.primary.main
+                                }} className={classes.hoverSearch}>
+                                    <Search color='inherit' fontSize='large' onClick={() => {
+                                        setIsSearchOpen((state) => !state)
+                                    }}/>
+                                </IconButton></Box></Grid>
                         </Grid>}
                     </Grid>
                 </Grid>
@@ -79,16 +100,23 @@ const Header: FunctionComponent<HeaderProps> = (props) => {
             }
             <Modal open={isSearchOpen}>
                 <Grid container style={{height: "100%"}}>
-                    <Grid container item justifyContent='flex-end' >
-                        <IconButton sx={{marginTop: "4px", marginRight:"4px", width: "64px", height: "64px", backgroundColor: COLORS.WHITESMOKE}} onClick={() => {
+                    <Grid container item justifyContent='flex-end'>
+                        <IconButton sx={{
+                            marginTop: "4px",
+                            marginRight: "4px",
+                            width: "64px",
+                            height: "64px",
+                            backgroundColor: COLORS.WHITESMOKE
+                        }} onClick={() => {
                             setIsSearchOpen(false)
-                        }}>
+                        }} className={classes.hover}>
 
-                        <Close sx={{marginX: "16px", marginY: "16px"}} fontSize={"large"} color={'secondary'}
-                               />
+                            <Close sx={{marginX: "16px", marginY: "16px"}} fontSize={"large"} color={'secondary'}
+                            />
                         </IconButton>
                     </Grid>
-                    <Grid container item justifyContent='center' paddingX={'8px'} alignContent='flex-start' alignItems='flex-start'>
+                    <Grid container item justifyContent='center' paddingX={'8px'} alignContent='flex-start'
+                          alignItems='flex-start'>
                         <FullTextSearch/>
                     </Grid>
                 </Grid>
diff --git a/src/components/templates/my-digital-resume/resume-experience-section/ResumeExperienceItem.tsx b/src/components/templates/my-digital-resume/resume-experience-section/ResumeExperienceItem.tsx
index 443da7eb..b8c59593 100644
--- a/src/components/templates/my-digital-resume/resume-experience-section/ResumeExperienceItem.tsx
+++ b/src/components/templates/my-digital-resume/resume-experience-section/ResumeExperienceItem.tsx
@@ -5,6 +5,7 @@ import { Theme} from "@mui/material/styles";
 import {Chip, Grid, Typography, useTheme} from "@mui/material";
 import {COLORS} from "../../../../theme/common/ColorPalette";
 import {ResumeExperience} from "../../../BlockContentTypes";
+import dateUtils from "../../../../utils/dateUtils";
 
 export const useStyles = makeStyles((theme: Theme) => ({
     root: {
@@ -30,20 +31,17 @@ const ResumeExperienceItem: FunctionComponent<IProps> = (props:IProps) => {
                   //     // padding: theme.spacing(1.75, 0)
                   // }}
                   xs={12}>
-        <Grid container item role={'experienceheader'}>
+        <Grid container item role={'experienceheader'} alignContent='center' alignItems='center'>
             <Grid item xs={12} md={4}>
                 <Typography display='inline'
                             variant='body2'>{props.experience.companyName}</Typography>
             </Grid>
-            <Grid item xs={6} md={4}>
-
-                <Typography display='inline'
-                            variant='body1'>{props.experience.title}</Typography>
+            <Grid item xs={12} sm={6} md={4} container sx={{paddingTop: "4px", paddingBottom: "4px"}}>
+                <Typography variant='subtitle1'>{props.experience.companySubtitle}</Typography>
             </Grid>
-            <Grid item xs={6} md={4}>
-
-                <Typography display='inline'
-                            variant='subtitle1'>{props.experience.companySubtitle}</Typography>
+            <Grid item xs={12} sm={6} md={4} >
+                <Typography
+                            variant='body1'>{props.experience.title}</Typography>
             </Grid>
         </Grid>
         <Grid container item>
@@ -51,7 +49,7 @@ const ResumeExperienceItem: FunctionComponent<IProps> = (props:IProps) => {
 
             <Grid item sm={4}>
                 <Typography display='inline'
-                            variant='body1'>{props.experience.dateStart?.toString().replaceAll('-', '.')}</Typography>
+                            variant='body1'>{dateUtils.YearMonth(new Date(props.experience.dateStart as string))}</Typography>
 
                 {/*</Grid>*/}
                 {/*<Grid item xs={1} container justifyContent='center'>*/}
@@ -61,7 +59,7 @@ const ResumeExperienceItem: FunctionComponent<IProps> = (props:IProps) => {
                 {/*</Grid>*/}
                 {/*<Grid item xs={2} container>*/}
                 <Typography display='inline'
-                            variant='body1'>{props.experience.dateEnd?.toString().replaceAll('-', '.')}</Typography>
+                            variant='body1'>{dateUtils.YearMonth(new Date(props.experience.dateEnd as string))}</Typography>
 
             </Grid>