diff --git a/Frontend/components/Header.tsx b/Frontend/components/Header.tsx
index 6308cb0..4346903 100644
--- a/Frontend/components/Header.tsx
+++ b/Frontend/components/Header.tsx
@@ -24,9 +24,9 @@ function Header({ isUserLoggedIn }: HeaderProps) {
           <Navigation isUserLoggedIn={isUserLoggedIn} />
 
           {/* Desktop navigation */}
-          <nav className=" md:flex md:grow">
+          <nav className=" md:flex">
             {/* Desktop sign in links */}
-            <div className="flex flex-row grow items-center pr-2 gap-x-2">
+            <div className="flex flex-row grow sm:grow-0 items-center pr-2 gap-x-2">
               {/* <button
                 className="btn btn-primary"
                 onClick={() => setTheme("dark")}
@@ -51,7 +51,7 @@ function Header({ isUserLoggedIn }: HeaderProps) {
 
                 {/* sun icon */}
                 <svg
-                  className="swap-on fill-base-content w-6 h-6"
+                  className="swap-on fill-base-content w-6 h-6 z-10"
                   xmlns="http://www.w3.org/2000/svg"
                   viewBox="0 0 24 24"
                 >
@@ -60,7 +60,7 @@ function Header({ isUserLoggedIn }: HeaderProps) {
 
                 {/* moon icon */}
                 <svg
-                  className="swap-off fill-base-content w-6 h-6"
+                  className="swap-off fill-base-content w-6 h-6 z-1"
                   xmlns="http://www.w3.org/2000/svg"
                   viewBox="0 0 24 24"
                 >
diff --git a/Frontend/components/Navigation.tsx b/Frontend/components/Navigation.tsx
index 93754ce..6c71e54 100644
--- a/Frontend/components/Navigation.tsx
+++ b/Frontend/components/Navigation.tsx
@@ -11,21 +11,21 @@ function Navigation({ isUserLoggedIn }: { isUserLoggedIn: boolean }) {
     checked ? setChecked(!checked) : setChecked(checked);
   };
   return (
-    <div className="drawer">
+    <div className="drawer max-w-fit">
       <input
         id="my-drawer-3"
         type="checkbox"
         className="drawer-toggle "
         checked={checked}
       />
-      <div className="drawer-content flex flex-col">
+      <div className="drawer-content flex flex-col max-w-fit sm:max-w-full sm:w-full">
         {/* Navbar */}
-        <div className="w-full navbar">
+        <div className="flex-grow navbar ">
           <div className="flex-none lg:hidden">
             <label htmlFor="my-drawer-3">
               <Menu
                 size={36}
-                className="self-center w-full h-full cursor-pointer fill-primary"
+                className="self-center flex-grow h-full cursor-pointer fill-primary"
               />
             </label>
           </div>
@@ -67,7 +67,7 @@ function Navigation({ isUserLoggedIn }: { isUserLoggedIn: boolean }) {
         </div>
         {/* Page content here */}
       </div>
-      <div className="drawer-side">
+      <div className="drawer-side z-20">
         <label htmlFor="my-drawer-3" className="drawer-overlay"></label>
 
         <ul className="menu w-80 h-full bg-base-100 text-base-content">