diff --git a/frontend/src/styles/Layout.css b/frontend/src/styles/Layout.css
index 34ec36d..4d23263 100644
--- a/frontend/src/styles/Layout.css
+++ b/frontend/src/styles/Layout.css
@@ -826,6 +826,67 @@ label,
  * Uses data-has-tabs set by TabsScroller to avoid :has() support issues.
  */
 
+/* Top position - fixed at top */
+[data-tab-position='top'] .page-tabs-container,
+[data-tab-position='top'] .admin-tabs-container {
+  position: fixed;
+  top: 0;
+  left: var(--sidebar-width);
+  right: 0;
+  z-index: 100;
+}
+
+[data-tab-position='top'][data-sidebar-collapsed='true'] .page-tabs-container,
+[data-tab-position='top'][data-sidebar-collapsed='true'] .admin-tabs-container {
+  left: var(--sidebar-width-collapsed);
+}
+
+[data-tab-position='top'] .page-content,
+[data-tab-position='top'] .admin-tab-content {
+  padding-top: calc(var(--page-padding-y) + var(--tabs-bar-height, 72px));
+}
+
+@media (max-width: 768px) {
+  [data-tab-position='top'] .page-tabs-container,
+  [data-tab-position='top'] .admin-tabs-container {
+    left: 0;
+    right: 0;
+    width: 100%;
+  }
+
+  [data-tab-position='top'][data-sidebar-collapsed='true'] .page-tabs-container,
+  [data-tab-position='top'][data-sidebar-collapsed='true'] .admin-tabs-container {
+    left: 0;
+    right: 0;
+  }
+
+  [data-tab-position='top'] .page-content,
+  [data-tab-position='top'] .admin-tab-content {
+    padding-top: calc(var(--page-padding-y-mobile) + var(--tabs-bar-height, 72px));
+  }
+}
+
+@media (min-width: 769px) {
+  [data-tab-position='responsive'] .page-tabs-container,
+  [data-tab-position='responsive'] .admin-tabs-container {
+    position: fixed;
+    top: 0;
+    left: var(--sidebar-width);
+    right: 0;
+    z-index: 100;
+  }
+
+  [data-tab-position='responsive'][data-sidebar-collapsed='true'] .page-tabs-container,
+  [data-tab-position='responsive'][data-sidebar-collapsed='true'] .admin-tabs-container {
+    left: var(--sidebar-width-collapsed);
+  }
+
+  [data-tab-position='responsive'] .page-content,
+  [data-tab-position='responsive'] .admin-tab-content {
+    padding-top: calc(var(--page-padding-y) + var(--tabs-bar-height, 72px));
+  }
+}
+
 /* Bottom position - fixed at bottom (global setting for all pages) */
 /* Note: Primary positioning is handled by TabsScroller component with inline styles.
    These CSS rules serve as fallback/additional styling. */