diff --git a/src/components/layouts/TheHeader.vue b/src/components/layouts/TheHeader.vue
index 9bc502d..b94a276 100644
--- a/src/components/layouts/TheHeader.vue
+++ b/src/components/layouts/TheHeader.vue
@@ -1,7 +1,7 @@
 <template>
   <!-- Navbar for laptop screen size (width>992px) -->
   <Toast :breakpoints="{ '500px': { width: '100%', right: '0', left: '0' } }" />
-  <div class="card lg:flex hidden border-none">
+  <div class="card sticky-top lg:flex hidden border-none">
     <div
       class="
         flex
@@ -78,8 +78,8 @@
       </div>
     </div>
   </div>
-  <!-- Sidebar for phone, tab screen size (width<992px) -->
-  <div class="card lg:hidden md:flex border-none">
+  <!-- Navbar for phone, tab screen size (width<992px) -->
+  <div class="card sticky-top lg:hidden md:flex border-none">
     <div
       class="
         flex