diff --git a/frontend/public/tailwind.css b/frontend/public/tailwind.css
index f57eda0..0ca7f2d 100644
--- a/frontend/public/tailwind.css
+++ b/frontend/public/tailwind.css
@@ -227,9 +227,6 @@
   .relative {
     position: relative;
   }
-  .sticky {
-    position: sticky;
-  }
   .inset-0 {
     inset: calc(var(--spacing) * 0);
   }
@@ -245,12 +242,18 @@
   .top-4 {
     top: calc(var(--spacing) * 4);
   }
+  .right-0 {
+    right: calc(var(--spacing) * 0);
+  }
   .right-4 {
     right: calc(var(--spacing) * 4);
   }
   .bottom-0 {
     bottom: calc(var(--spacing) * 0);
   }
+  .left-0 {
+    left: calc(var(--spacing) * 0);
+  }
   .left-4 {
     left: calc(var(--spacing) * 4);
   }
@@ -263,6 +266,9 @@
   .z-30 {
     z-index: 30;
   }
+  .z-40 {
+    z-index: 40;
+  }
   .z-50 {
     z-index: 50;
   }
@@ -815,6 +821,9 @@
   .pt-6 {
     padding-top: calc(var(--spacing) * 6);
   }
+  .pt-\[88px\] {
+    padding-top: 88px;
+  }
   .pr-4 {
     padding-right: calc(var(--spacing) * 4);
   }
@@ -1262,6 +1271,16 @@
       padding: calc(var(--spacing) * 4);
     }
   }
+  .md\:sticky {
+    @media (width >= 48rem) {
+      position: sticky;
+    }
+  }
+  .md\:top-0 {
+    @media (width >= 48rem) {
+      top: calc(var(--spacing) * 0);
+    }
+  }
   .md\:block {
     @media (width >= 48rem) {
       display: block;
@@ -1297,6 +1316,11 @@
       border-radius: var(--radius-2xl);
     }
   }
+  .md\:pt-6 {
+    @media (width >= 48rem) {
+      padding-top: calc(var(--spacing) * 6);
+    }
+  }
   .md\:pb-0 {
     @media (width >= 48rem) {
       padding-bottom: calc(var(--spacing) * 0);
diff --git a/frontend/src/app.rs b/frontend/src/app.rs
index e8b1cb6..592108e 100644
--- a/frontend/src/app.rs
+++ b/frontend/src/app.rs
@@ -364,7 +364,7 @@ pub fn App() -> impl IntoView {
 
                     // MAIN CONTENT
                     <main class="flex-1 h-screen overflow-y-auto overflow-x-hidden relative pb-24 md:pb-0">
-                        <header class={format!("sticky top-0 z-10 border-b px-6 py-4 flex justify-between items-center {}", sidebar_bg)}>
+                        <header class={format!("fixed top-0 left-0 right-0 md:sticky md:top-0 z-40 border-b px-6 py-4 flex justify-between items-center transition-colors duration-300 {}", sidebar_bg)}>
                             <div class="flex items-center gap-3">
                                  <button class={format!("md:hidden p-1 -ml-2 hover:opacity-80 {}", text_sec)} on:click=move |_| set_show_mobile_sidebar.set(true)>
                                     <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" /></svg>
@@ -419,7 +419,7 @@ pub fn App() -> impl IntoView {
                             </div>
                         </header>
 
-                        <div class="p-6 max-w-7xl mx-auto animate-in fade-in duration-500">
+                        <div class="p-6 max-w-7xl mx-auto animate-in fade-in duration-500 pt-[88px] md:pt-6">
                             {move || if active_tab.get() == "settings" {
                                 view! {
                                     <div class="space-y-8">