diff --git a/src/components/Header/index.js b/src/components/Header/index.js
index b5b6f959..243e40a0 100644
--- a/src/components/Header/index.js
+++ b/src/components/Header/index.js
@@ -42,7 +42,7 @@ export default function Header(props) {
   const yearsRange = rangeOfYears(props.initialYear, APPLICATION_CONSTANTS.CURRENT_YEAR);
   return (
     <>
-      <AppBar position="sticky" elevation={0}>
+      <AppBar className={classes.bar} position="sticky" elevation={0}>
         <Toolbar>
           <Box width="100%" className={classes.inputOptions}>
             <FormControl id="form-control-year" className={classes.formControl}>
diff --git a/src/components/Header/style.js b/src/components/Header/style.js
index c58cddea..9675b1e8 100644
--- a/src/components/Header/style.js
+++ b/src/components/Header/style.js
@@ -3,6 +3,9 @@ import { makeStyles } from '@material-ui/core/styles';
 import { lighten } from 'polished';
 
 export const useStyles = makeStyles((theme) => ({
+  bar: {
+    zIndex: 0,
+  },
   root: {
     flexGrow: 1,
   },