diff --git a/space_flow/src/components/HeaderComponent/index.tsx b/space_flow/src/components/HeaderComponent/index.tsx
index 8f0d40c52..58cf48633 100644
--- a/space_flow/src/components/HeaderComponent/index.tsx
+++ b/space_flow/src/components/HeaderComponent/index.tsx
@@ -28,7 +28,7 @@ export default function Header({user, userNavigation}){
   })
   const {dark, setDark} = useContext(darkContext);
     return (
-    <header className="relative flex h-16 w-full shrink-0 items-center bg-white">
+    <header className="relative flex h-16 w-full shrink-0 items-center bg-white dark:bg-slate-800">
         {/* Logo area */}
         <div className="static shrink-0">
           <a
@@ -51,14 +51,14 @@ export default function Header({user, userNavigation}){
           <div className="ml-10 flex shrink-0 items-center space-x-10 pr-4">
             <div className="flex items-center space-x-8">
               <span className="inline-flex gap-6">
-                <button className="text-gray-400 hover:text-gray-500 dark:text-slate-700 dark:hover:text-slate-600" onClick={()=>{setDark(!dark)}}>
+                <button className="text-gray-400 hover:text-gray-500 " onClick={()=>{setDark(!dark)}}>
                   {dark ?
                     <SunIcon className="h-6 w-6" />
                   :
                     <MoonIcon className="h-6 w-6" />
                   }
                 </button>
-                <button type="button" {...triggerProps} className="-mx-1 rounded-full bg-white p-1 text-gray-400 hover:text-gray-500 relative" onClick={()=>{setNotificationCenter(false);setIsOpen(true)}}>
+                <button type="button" {...triggerProps} className="-mx-1 rounded-full p-1 text-gray-400 hover:text-gray-500 relative" onClick={()=>{setNotificationCenter(false);setIsOpen(true)}}>
                   <span className="sr-only">View notifications</span>
                   {notificationCenter&&<div className='absolute top-[2px] w-2 h-2 rounded-full bg-red-600 right-[7px]'></div>}