diff --git a/src/layouts/Basic.vue b/src/layouts/Basic.vue
index 339f8e5..789fb11 100644
--- a/src/layouts/Basic.vue
+++ b/src/layouts/Basic.vue
@@ -17,6 +17,7 @@ const userStore = useUserStore();
 const router = useRouter();
 const route = useRoute();
 
+const Header = Layout.Header;
 const Sider = Layout.Sider;
 const Content = Layout.Content;
 
@@ -58,9 +59,9 @@ const checkHasInviteCode = () => {
 <template>
   <Layout :class="['layout-wrap', { mobile: appStore.hideMenu }]" class="h-full flex flex-col w-full">
     <JoinModal v-model:visible="joinEnterpriseVisible" ref="joinModalRef" />
-    <section class="layout-navbar-wrap">
+    <Header class="layout-header-wrap">
       <base-navbar />
-    </section>
+    </Header>
     <Layout class="flex layout-content-wrap">
       <Sider
         v-if="showSider"
@@ -89,13 +90,12 @@ const checkHasInviteCode = () => {
   font-family: inherit;
   background: transparent;
   min-width: 1200px;
-  .layout-navbar-wrap {
-    position: sticky;
-    top: 0;
-    left: 0;
-    z-index: 1000;
-    width: 100%;
+  .layout-header-wrap {
+    background: transparent;
     height: $navbar-height;
+    line-height: $navbar-height;
+    padding-inline: inherit;
+    color: inherit;
   }
   .layout-content-wrap {
     height: 100%;