diff --git a/client/src/components/Header.js b/client/src/components/Header.js
index 58197d1..0bdd0d0 100644
--- a/client/src/components/Header.js
+++ b/client/src/components/Header.js
@@ -1,5 +1,13 @@
 import {Fragment, useState} from 'react'
-import {IconButton, Avatar, Popover, List, ListSubheader, ListItemButton} from '@mui/material'
+import {
+  AppBar,
+  IconButton,
+  Avatar,
+  Popover,
+  List,
+  ListSubheader,
+  ListItemButton,
+} from '@mui/material'
 import OnlineIndicator from './OnlineIndicator'
 import AuthModal from './AuthModal'
 import {useAuth} from '../contexts/AuthContext'
@@ -35,7 +43,7 @@ export default function Header() {
   }
 
   return (
-    <header className='header'>
+    <AppBar className='header' position='static'>
       <h1>Web App</h1>
 
       <IconButton onClick={openPopover}>
@@ -72,6 +80,6 @@ export default function Header() {
         isRegisterMode={register}
         toggleRegister={() => setRegister((prev) => !prev)}
       />
-    </header>
+    </AppBar>
   )
 }
diff --git a/client/src/styles/index.css b/client/src/styles/index.css
index 44f3035..8f6a2d7 100644
--- a/client/src/styles/index.css
+++ b/client/src/styles/index.css
@@ -17,11 +17,15 @@ body {
 }
 
 .header {
-  width: 100%;
-  padding: 0 1rem;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
+  width: 100% !important;
+  padding: 0 1rem !important;
+  background-color: whitesmoke !important;
+  color: black !important;
+
+  display: flex !important;
+  flex-direction: row !important;
+  align-items: center !important;
+  justify-content: space-between !important;
 }
 
 .error {