diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
index 60448e5a..433ee751 100644
--- a/src/components/Footer/Footer.tsx
+++ b/src/components/Footer/Footer.tsx
@@ -8,48 +8,50 @@ export const Footer = () => {
   const { classes } = useStyles()
   return (
     <Grid className={classes.footer}>
-      <Grid className={classes.footerItem}>
-        <TooltipHover text='Github'>
-          <a href={social.github} className={classes.footerLink} target='_blank'>
-            <img className={classes.icon} src={icons.GithubIcon} alt={'github icon'} />
-          </a>
-        </TooltipHover>
-      </Grid>
-      <Grid className={classes.footerItem}>
-        <TooltipHover text='Telegram'>
-          <a href={social.telegram} className={classes.footerLink} target='_blank'>
-            <img className={classes.icon} src={icons.TelegramIcon} alt={'telegram icon'} />
-          </a>
-        </TooltipHover>
-      </Grid>
-      <Grid className={classes.footerItem}>
-        <TooltipHover text='X'>
-          <a href={social.x} className={classes.footerLink} target='_blank'>
-            <img className={classes.icon} src={icons.XIcon} alt={'x icon'} />
-          </a>
-        </TooltipHover>
-      </Grid>
-      <Grid className={classes.footerItem}>
-        <TooltipHover text='Discord'>
-          <a href={social.discord} className={classes.footerLink} target='_blank'>
-            <img className={classes.icon} src={icons.DiscordIcon} alt={'discord icon'} />
-          </a>
-        </TooltipHover>
-      </Grid>
-      <Grid className={classes.footerItem}>
-        <TooltipHover text='Medium'>
-          <a href={social.medium} className={classes.footerLink} target='_blank'>
-            <img className={classes.icon} src={icons.mediumIcon} alt={'medium icon'} />
-          </a>
-        </TooltipHover>
-      </Grid>
-      <Grid className={classes.footerItem}>
-        <TooltipHover text='Docs'>
-          <a href={social.docs} className={classes.footerLink} target='_blank'>
-            <img className={classes.icon} src={icons.docsIcon} alt={'medium icon'} />
-          </a>
-        </TooltipHover>
-      </Grid>
+      <div className={classes.footerWrapper}>
+        <Grid className={classes.footerItem}>
+          <TooltipHover text='Github'>
+            <a href={social.github} className={classes.footerLink} target='_blank'>
+              <img className={classes.icon} src={icons.GithubIcon} alt={'github icon'} />
+            </a>
+          </TooltipHover>
+        </Grid>
+        <Grid className={classes.footerItem}>
+          <TooltipHover text='Telegram'>
+            <a href={social.telegram} className={classes.footerLink} target='_blank'>
+              <img className={classes.icon} src={icons.TelegramIcon} alt={'telegram icon'} />
+            </a>
+          </TooltipHover>
+        </Grid>
+        <Grid className={classes.footerItem}>
+          <TooltipHover text='X'>
+            <a href={social.x} className={classes.footerLink} target='_blank'>
+              <img className={classes.icon} src={icons.XIcon} alt={'x icon'} />
+            </a>
+          </TooltipHover>
+        </Grid>
+        <Grid className={classes.footerItem}>
+          <TooltipHover text='Discord'>
+            <a href={social.discord} className={classes.footerLink} target='_blank'>
+              <img className={classes.icon} src={icons.DiscordIcon} alt={'discord icon'} />
+            </a>
+          </TooltipHover>
+        </Grid>
+        <Grid className={classes.footerItem}>
+          <TooltipHover text='Medium'>
+            <a href={social.medium} className={classes.footerLink} target='_blank'>
+              <img className={classes.icon} src={icons.mediumIcon} alt={'medium icon'} />
+            </a>
+          </TooltipHover>
+        </Grid>
+        <Grid className={classes.footerItem}>
+          <TooltipHover text='Docs'>
+            <a href={social.docs} className={classes.footerLink} target='_blank'>
+              <img className={classes.icon} src={icons.docsIcon} alt={'medium icon'} />
+            </a>
+          </TooltipHover>
+        </Grid>
+      </div>
     </Grid>
   )
 }
diff --git a/src/components/Footer/style.ts b/src/components/Footer/style.ts
index 7d37c808..fe182af2 100644
--- a/src/components/Footer/style.ts
+++ b/src/components/Footer/style.ts
@@ -44,6 +44,14 @@ const useStyles = makeStyles()(() => {
     icon: {
       height: 40,
       width: 40
+    },
+    footerWrapper: {
+      display: 'flex',
+      alignItems: 'center',
+      height: 56,
+      paddingInline: 16,
+      borderRadius: 24,
+      background: colors.invariant.component
     }
   }
 })
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index 02b8defb..29e17307 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -142,7 +142,7 @@ export const Header: React.FC<IHeader> = ({
   }, [network])
 
   return (
-    <Grid container>
+    <Grid container className={classes.background}>
       <Grid container className={classes.root} direction='row' alignItems='center' wrap='nowrap'>
         <Grid
           container
diff --git a/src/components/Header/HeaderButton/style.ts b/src/components/Header/HeaderButton/style.ts
index e47d60a6..e943427b 100644
--- a/src/components/Header/HeaderButton/style.ts
+++ b/src/components/Header/HeaderButton/style.ts
@@ -15,7 +15,7 @@ const useStyles = makeStyles()((theme: Theme) => {
       height: 32,
       boxShadow: 'none',
       '&:hover': {
-        background: colors.invariant.light,
+        background: colors.blue.deep,
         '@media (hover: none)': {
           background: 'transparent'
         }
diff --git a/src/components/Header/style.ts b/src/components/Header/style.ts
index 5dfee660..4966e5a3 100644
--- a/src/components/Header/style.ts
+++ b/src/components/Header/style.ts
@@ -11,6 +11,7 @@ const useStyles = makeStyles()((theme: Theme) => {
       height: 70,
       display: 'flex',
       justifyContent: 'space-between',
+      background: colors.invariant.component,
 
       [theme.breakpoints.down('xl')]: {
         paddingInline: 32
@@ -89,7 +90,7 @@ const useStyles = makeStyles()((theme: Theme) => {
       display: 'flex',
       justifyContent: 'center',
       alignItems: 'center',
-      backgroundColor: colors.invariant.component,
+      backgroundColor: colors.invariant.light,
       borderRadius: 14,
       width: 'auto',
       padding: 4
@@ -135,6 +136,9 @@ const useStyles = makeStyles()((theme: Theme) => {
       [theme.breakpoints.up(1600)]: {
         flex: '1 1 0%'
       }
+    },
+    background: {
+      background: colors.invariant.component
     }
   }
 })