diff --git a/src/layouts/TopLayout.vue b/src/layouts/TopLayout.vue
index 47a7512d..72ae60d8 100644
--- a/src/layouts/TopLayout.vue
+++ b/src/layouts/TopLayout.vue
@@ -1,10 +1,14 @@
 <template>
   <BaseLayout>
-    <!-- ι‘Άιƒ¨θœε•ζ ?-->
+    <!-- ι‘Άιƒ¨θœε•-->
     <div class="layout__header">
       <div class="layout__header-left">
-        <LayoutLogo v-if="showLogo" :collapse="isLogoCollapsed" />
-        <LayoutSidebar :data="routes" menu-mode="horizontal" base-path="" />
+        <div v-if="showLogo" class="layout__header-logo">
+          <LayoutLogo :collapse="isLogoCollapsed" />
+        </div>
+        <div class="layout__header-menu">
+          <LayoutSidebar :data="topMenuItems" menu-mode="horizontal" base-path="" />
+        </div>
       </div>
       <div class="layout__header-right">
         <LayoutToolbar />
@@ -22,6 +26,7 @@
 <script setup lang="ts">
 import { useWindowSize } from "@vueuse/core";
 import { useLayout } from "./useLayout";
+import { usePermissionStore } from "@/store";
 import BaseLayout from "./BaseLayout.vue";
 import LayoutLogo from "./components/LayoutLogo.vue";
 import LayoutSidebar from "./components/LayoutSidebar.vue";
@@ -29,9 +34,15 @@ import LayoutToolbar from "./components/LayoutToolbar.vue";
 import LayoutTagsView from "./components/LayoutTagsView.vue";
 import LayoutMain from "./components/LayoutMain.vue";
 
-const { showTagsView, showLogo, routes } = useLayout();
+const { showTagsView, showLogo } = useLayout();
 const { width } = useWindowSize();
 
+const permissionStore = usePermissionStore();
+
+const topMenuItems = computed(() => {
+  return permissionStore.routes.filter((item) => !item.meta?.hidden);
+});
+
 const isLogoCollapsed = computed(() => width.value < 768);
 </script>
 
@@ -54,13 +65,71 @@ const isLogoCollapsed = computed(() => width.value < 768);
       align-items: center;
       min-width: 0;
       height: 100%;
+    }
+
+    &-logo {
+      display: flex;
+      flex-shrink: 0;
+      align-items: center;
+      height: 100%;
 
       :deep(.logo) {
-        flex-shrink: 0;
         height: $navbar-height;
       }
     }
 
+    &-menu {
+      display: flex;
+      flex: 1;
+      align-items: center;
+      min-width: 0;
+      height: 100%;
+      overflow: hidden;
+
+      :deep(.el-menu) {
+        height: 100%;
+        background-color: transparent;
+        border: none;
+      }
+
+      :deep(.el-menu--horizontal) {
+        flex: 1;
+        min-width: 0;
+        height: $navbar-height;
+        overflow: hidden;
+        line-height: $navbar-height;
+        background-color: transparent;
+        border: none;
+
+        .el-menu-item {
+          height: $navbar-height;
+          line-height: $navbar-height;
+        }
+
+        .el-sub-menu {
+          .el-sub-menu__title {
+            height: $navbar-height;
+            line-height: $navbar-height;
+          }
+
+          &.has-active-child {
+            .el-sub-menu__title {
+              color: var(--el-color-primary) !important;
+              border-bottom: 2px solid var(--el-color-primary) !important;
+
+              .menu-icon {
+                color: var(--el-color-primary) !important;
+              }
+            }
+          }
+        }
+
+        .el-menu--popup {
+          min-width: 160px;
+        }
+      }
+    }
+
     &-right {
       display: flex;
       flex-shrink: 0;
@@ -68,43 +137,6 @@ const isLogoCollapsed = computed(() => width.value < 768);
       height: 100%;
       padding-left: 12px;
     }
-
-    :deep(.el-menu--horizontal) {
-      flex: 1;
-      min-width: 0;
-      height: $navbar-height;
-      overflow: hidden;
-      line-height: $navbar-height;
-      background-color: transparent;
-      border: none;
-
-      .el-menu-item {
-        height: $navbar-height;
-        line-height: $navbar-height;
-      }
-
-      .el-sub-menu {
-        .el-sub-menu__title {
-          height: $navbar-height;
-          line-height: $navbar-height;
-        }
-
-        &.has-active-child {
-          .el-sub-menu__title {
-            color: var(--el-color-primary) !important;
-            border-bottom: 2px solid var(--el-color-primary) !important;
-
-            .menu-icon {
-              color: var(--el-color-primary) !important;
-            }
-          }
-        }
-      }
-
-      .el-menu--popup {
-        min-width: 160px;
-      }
-    }
   }
 
   &__main {
diff --git a/src/styles/common.scss b/src/styles/common.scss
index ad7afc33..b74931d1 100644
--- a/src/styles/common.scss
+++ b/src/styles/common.scss
@@ -37,6 +37,17 @@ html.sidebar-color-blue .layout-mix .layout__sidebar--left .el-menu {
   }
 }
 
+/* Top layout: let horizontal menu fill the remaining header space */
+.layout-top .layout__header-left .el-menu--horizontal,
+.layout-mix .layout__header-menu .el-menu--horizontal {
+  display: flex;
+  flex: 1 1 0% !important;
+  align-items: center;
+  width: 100% !important;
+  min-width: 0 !important;
+  overflow: hidden;
+}
+
 /* ηͺ„ε±ιšθ—θœε•ζ–‡ε­—οΌŒδ»…δΏη•™ε›Ύζ ‡ */
 .hideSidebar {
   &.layout-top .layout__header .el-menu--horizontal,