diff --git a/src/App.vue b/src/App.vue
index 7030caba..17a4a637 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,13 +1,13 @@
 <template>
   <div id="App-Wrapper" :class="[appWrapperClass, theme]" :style="wrapperStyle">
+    <HeaderMain />
     <div
       id="App-Container"
-      class="app-container max-w-10/12 lg:max-w-screen-2xl px-3 lg:px-8"
+      class="app-container lg:max-w-screen-2xl px-3 lg:px-8"
       @keydown.meta.k.stop.prevent="handleOpenModal"
       tabindex="-1"
       :style="cssVariables"
     >
-      <HeaderMain />
       <div class="app-banner app-banner-image" :style="headerImage" />
       <div class="app-banner app-banner-screen" :style="headerBaseBackground" />
       <div class="app-banner app-banner-cover" />
@@ -23,12 +23,10 @@
   </div>
   <FooterLink :links="themeConfig.footerLinks.data" />
   <Footer :style="cssVariables" />
-  <div class="App-Mobile-sidebar" v-if="isMobile">
-    <div id="App-Mobile-Profile" class="App-Mobile-wrapper">
-      <MobileMenu />
-    </div>
-  </div>
-  <Navigator />
+  <template v-if="isMobile" ref="mobileSidebar">
+    <MobileMenu />
+  </template>
+  <!-- <Navigator /> -->
   <Dia v-if="!isMobile && configReady" />
   <teleport to="head">
     <title>{{ title }}</title>
@@ -89,6 +87,7 @@ export default defineComponent({
     const searchStore = useSearchStore()
     const MOBILE_WITH = 996 // Using the mobile width by Bootstrap design.
     const { t } = useI18n()
+    const mobileSidebar = ref()
 
     const appWrapperClass = 'app-wrapper'
     const loadingBarClass = ref({
@@ -242,6 +241,7 @@ export default defineComponent({
       lightBoxVisible: computed(() => lightBoxStore.visible),
       lightBoxIndex: computed(() => lightBoxStore.index),
       lightBoxImages: computed(() => lightBoxStore.images),
+      mobileSidebar,
       appWrapperClass,
       loadingBarClass,
       handleOpenModal,
@@ -281,16 +281,6 @@ body {
     left: 0;
     z-index: 1;
   }
-
-  .App-Mobile-sidebar {
-    @apply fixed top-0 bottom-0 left-0;
-  }
-  .App-Mobile-wrapper {
-    @apply relative overflow-y-auto h-full -mr-4 pr-6 pl-4 pt-8 opacity-0;
-    transition: all 0.85s cubic-bezier(0, 1.8, 1, 1.2);
-    transform: translateY(-20%);
-    width: 280px;
-  }
 }
 
 .app-banner {
diff --git a/src/components/Comment.vue b/src/components/Comment.vue
index 83a884b7..580b171f 100644
--- a/src/components/Comment.vue
+++ b/src/components/Comment.vue
@@ -4,6 +4,7 @@
   >
     <Title
       :title="'titles.comment'"
+      icon="quote"
       paddings="pb-2 pt-0"
       text-size="text-2xl md:text-3xl"
     />
diff --git a/src/components/Header/src/Controls.vue b/src/components/Header/src/Controls.vue
index 887764e3..47673900 100644
--- a/src/components/Header/src/Controls.vue
+++ b/src/components/Header/src/Controls.vue
@@ -1,48 +1,85 @@
 <template>
   <div
-    class="header-controls absolute top-10 right-0 flex flex-row"
+    class="header-controls ml-auto top-0 right-0 flex flex-row items-center text-white invert-text"
     @keydown.k="handleOpenModal(true)"
     tabindex="0"
   >
-    <span
-      class="ob-drop-shadow"
-      data-dia="search"
-      @click="handleOpenModal(true)"
-    >
-      <SvgIcon
-        icon-class="search"
-        stroke="var(--text-white)"
-        width="2rem"
-        height="2rem"
-      />
-    </span>
-    <Dropdown
-      v-if="enableMultiLanguage"
-      @command="handleClick"
-      :value="currentLocale"
-    >
-      <span class="ob-drop-shadow" data-dia="language">
+    <div :class="leftControlClasses">
+      <span
+        class="icon-control flex items-center"
+        data-dia="search"
+        @click="handleOpenModal(true)"
+      >
         <SvgIcon
-          icon-class="globe"
-          stroke="var(--text-white)"
-          width="2rem"
-          height="2rem"
+          icon-class="search"
+          fill="currentColor"
+          stroke="none"
+          width="1.2rem"
+          height="1.2rem"
         />
-        <span v-if="$i18n.locale == 'cn'">中文</span>
-        <span v-if="$i18n.locale == 'en'">EN</span>
       </span>
-      <DropdownMenu>
-        <DropdownItem name="en" :active="currentLocale === 'en'">
-          English
-        </DropdownItem>
-        <DropdownItem name="cn" :active="currentLocale === 'cn'">
-          中文
-        </DropdownItem>
-      </DropdownMenu>
-    </Dropdown>
-    <span no-hover-effect class="ob-drop-shadow" data-dia="light-switch">
-      <ThemeToggle />
-    </span>
+      <Dropdown
+        v-if="enableMultiLanguage"
+        @command="handleClick"
+        :value="currentLocale"
+      >
+        <span class="icon-control flex items-center" data-dia="language">
+          <SvgIcon
+            icon-class="translate"
+            fill="currentColor"
+            stroke="none"
+            width="1.2rem"
+            height="1.2rem"
+          />
+          <span v-if="$i18n.locale == 'cn'">中文</span>
+          <span v-if="$i18n.locale == 'en'">EN</span>
+        </span>
+        <DropdownMenu>
+          <DropdownItem name="en" :active="currentLocale === 'en'">
+            English
+          </DropdownItem>
+          <DropdownItem name="cn" :active="currentLocale === 'cn'">
+            中文
+          </DropdownItem>
+        </DropdownMenu>
+      </Dropdown>
+    </div>
+
+    <div class="right-control">
+      <div :class="progressBallClasses" @click="handleBackToTop">
+        <span>
+          <SvgIcon
+            icon-class="back-to-top"
+            stroke="var(--text-invert)"
+            width="1.1rem"
+            height="1.1rem"
+          />
+        </span>
+        {{ scrollProgress }}
+      </div>
+
+      <span
+        no-hover-effect
+        class="ob-drop-shadow hidden lg:flex"
+        data-dia="light-switch"
+      >
+        <ThemeToggle />
+      </span>
+
+      <span
+        class="icon-control flex md:hidden items-center"
+        data-dia="menu"
+        @click="handleOpenMenu()"
+      >
+        <SvgIcon
+          icon-class="hamburger"
+          fill="currentColor"
+          stroke="none"
+          width="1.2rem"
+          height="1.2rem"
+        />
+      </span>
+    </div>
   </div>
   <teleport to="body">
     <SearchModal />
@@ -50,13 +87,14 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent } from 'vue'
+import { computed, defineComponent, toRefs } from 'vue'
 import { Dropdown, DropdownMenu, DropdownItem } from '@/components/Dropdown'
 import { useAppStore } from '@/stores/app'
 import ThemeToggle from '@/components/ToggleSwitch/ThemeToggle.vue'
 import SearchModal from '@/components/SearchModal.vue'
 import { useSearchStore } from '@/stores/search'
 import SvgIcon from '@/components/SvgIcon/index.vue'
+import { useNavigatorStore } from '@/stores/navigator'
 
 export default defineComponent({
   name: 'Controls',
@@ -68,9 +106,17 @@ export default defineComponent({
     SearchModal,
     SvgIcon
   },
-  setup() {
+  props: {
+    scrollProgress: {
+      type: Number,
+      default: 0
+    }
+  },
+  setup(props) {
     const appStore = useAppStore()
     const searchStore = useSearchStore()
+    const navigatorStore = useNavigatorStore()
+    const ballProgress = toRefs(props).scrollProgress
 
     const handleClick = (name: string): void => {
       appStore.changeLocale(name)
@@ -80,9 +126,31 @@ export default defineComponent({
       searchStore.setOpenModal(status)
     }
 
+    const handleOpenMenu = () => {
+      navigatorStore.toggleMobileMenu()
+    }
+
+    const handleBackToTop = () => {
+      window.scrollTo({
+        top: 0,
+        behavior: 'smooth'
+      })
+    }
+
     return {
+      handleBackToTop,
       handleOpenModal,
+      handleOpenMenu,
       handleClick,
+      progressBallClasses: computed(() => ({
+        'progress-ball': true,
+        'activated-ball': ballProgress.value > 0,
+        'reset-ball': ballProgress.value === 0
+      })),
+      leftControlClasses: computed(() => ({
+        'left-control': true,
+        'moved-right': ballProgress.value > 0
+      })),
       currentLocale: computed(() => appStore.locale),
       enableMultiLanguage: computed(
         () => appStore.themeConfig.site.multi_language
@@ -94,11 +162,56 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .header-controls {
+  .progress-ball {
+    @apply flex flex-col justify-center items-center bg-ob-bright text-ob-invert h-6 w-6 rounded-full mr-4 scale-0 transform-cpu text-xs cursor-pointer overflow-hidden;
+    transition: 0.3s transform ease;
+    &:hover span {
+      @apply mt-6 opacity-100;
+    }
+    span,
+    &.reset-ball span {
+      @apply pr-0 mb-2 -mt-7 opacity-0;
+      transition: 0.3s all ease;
+      .svg-icon {
+        @apply text-ob-invert mr-0;
+      }
+    }
+    &.activated-ball {
+      @apply scale-100;
+    }
+    &:hover {
+      @apply scale-150;
+    }
+    &.reset-ball {
+      @apply scale-0;
+    }
+  }
+
+  .left-control,
+  .right-control {
+    @apply flex justify-center items-center font-extrabold;
+  }
+  .left-control {
+    @apply -mr-10;
+    transition: 0.2s margin ease-out;
+    &.moved-right {
+      @apply -mr-0;
+    }
+  }
+  .icon-control {
+    span {
+      @apply -mr-10 opacity-0 w-10 pointer-events-none;
+      transition: 0.3s all ease;
+    }
+
+    &:hover span,
+    &:active span {
+      @apply mr-0 opacity-100 pointer-events-auto;
+    }
+  }
   span {
-    display: flex;
     justify-content: center;
     align-items: center;
-    color: #fff;
     cursor: pointer;
     transition: opacity 250ms ease;
     padding-right: 0.5rem;
@@ -107,11 +220,7 @@ export default defineComponent({
         opacity: 1;
       }
     }
-    &:hover {
-      opacity: 0.5;
-    }
     .svg-icon {
-      stroke: #fff;
       margin-right: 0.5rem;
       pointer-events: none;
     }
diff --git a/src/components/Header/src/Header.vue b/src/components/Header/src/Header.vue
index 3607f6ee..e66c5bed 100644
--- a/src/components/Header/src/Header.vue
+++ b/src/components/Header/src/Header.vue
@@ -1,17 +1,25 @@
 <template>
-  <div class="header-container">
-    <header class="site-header">
-      <Logo />
-      <Navigation />
-      <Controls />
-      <Notification />
-    </header>
-  </div>
+  <Sticky
+    :stickyTop="0"
+    :z-index="999"
+    @activeChange="handleActiveState"
+    :delay="650"
+  >
+    <div :class="containerClasses">
+      <header class="site-header lg:max-w-screen-2xl px-3 lg:px-8">
+        <Logo />
+        <Navigation />
+        <Controls :scroll-progress="progress" />
+        <Notification />
+      </header>
+    </div>
+  </Sticky>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { computed, defineComponent, onMounted, onUnmounted, ref } from 'vue'
 import { Logo, Navigation, Controls, Notification } from '../index'
+import Sticky from '@/components/Sticky.vue'
 
 export default defineComponent({
   name: 'Header',
@@ -19,19 +27,75 @@ export default defineComponent({
     Logo,
     Navigation,
     Controls,
-    Notification
+    Notification,
+    Sticky
   },
   props: {
     msg: String
+  },
+  setup() {
+    const active = ref<boolean>(false)
+    const progress = ref(0)
+    let scrollingHandler = 0
+
+    const handleActiveState = (value: boolean) => {
+      active.value = value
+    }
+
+    const scrollHandler = () => {
+      clearTimeout(scrollingHandler)
+
+      setTimeout(() => {
+        progress.value = Number(
+          (
+            (window.scrollY /
+              (document.documentElement.scrollHeight - window.innerHeight)) *
+            100
+          ).toFixed(0)
+        )
+      }, 0)
+    }
+
+    onMounted(() => {
+      document.addEventListener('scroll', scrollHandler)
+    })
+
+    onUnmounted(() => {
+      document.removeEventListener('scroll', scrollHandler)
+    })
+
+    return {
+      containerClasses: computed(() => ({
+        'header-container': true,
+        'header-active': active.value
+      })),
+      handleActiveState,
+      scrollHandler,
+      progress,
+      active
+    }
   }
 })
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .header-container {
+  &.header-active {
+    @apply bg-ob-deep-800 shadow-xl text-ob-bright;
+  }
+  transition: 0.6s all ease;
   .site-header {
-    max-width: var(--max-width);
-    @apply relative flex z-50 my-0 mx-auto py-4 mb-4;
+    @apply relative flex z-50 py-4;
+    margin: 0 auto;
+  }
+}
+
+.header-active {
+  .logo-image {
+    @apply scale-125;
+  }
+  .invert-text {
+    @apply text-ob-bright;
   }
 }
 </style>
diff --git a/src/components/Header/src/Logo.vue b/src/components/Header/src/Logo.vue
index 8a45bcbb..6c45c006 100644
--- a/src/components/Header/src/Logo.vue
+++ b/src/components/Header/src/Logo.vue
@@ -1,22 +1,37 @@
 <template>
-  <div class="flex items-start self-stretch relative">
-    <div
-      class="flex flex-col relative py-2 z-10 text-white font-medium ob-drop-shadow cursor-pointer"
-      @click="handleLogoClick"
-    >
-      <span class="flex text-4xl" v-if="themeConfig.site.author">
+  <div
+    class="header-logo flex items-center self-stretch relative cursor-pointer"
+    @click="handleLogoClick"
+  >
+    <span class="flex mr-3">
+      <img
+        v-if="themeConfig.site.author"
+        class="logo-image"
+        :src="themeConfig.site.logo || themeConfig.site.avatar"
+        alt="site-logo"
+      />
+      <ob-skeleton v-else width="2rem" height="2rem" circle />
+    </span>
+
+    <div class="flex flex-col justify-center">
+      <span
+        class="invert-text flex text-xl leading-tight text-white font-extrabold"
+        v-if="themeConfig.site.author"
+      >
         {{ themeConfig.site.author }}
       </span>
-      <span v-else class="flex text-4xl animation-text">LOADING</span>
-      <span class="font-extrabold text-xs uppercase">
+      <span
+        v-else
+        class="invert-text flex text-xl leading-tight text-white font-extrabold"
+      >
+        LOADING
+      </span>
+      <span
+        class="invert-text font-extrabold text-[0.45rem] leading-tight uppercase text-white"
+      >
         {{ themeConfig.site.nick || 'BLOG' }}
       </span>
     </div>
-    <img
-      class="logo-image"
-      :src="themeConfig.site.logo || themeConfig.site.avatar"
-      alt="site-logo"
-    />
   </div>
 </template>
 
@@ -44,13 +59,14 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
+.header-logo {
+  &:hover .logo-image {
+    @apply scale-125;
+  }
+}
+
 .logo-image {
-  height: 200px;
-  width: 200px;
-  max-width: 200px;
-  top: -60px;
-  left: -60px;
-  opacity: 0.05;
-  @apply absolute mr-2 rounded-full;
+  @apply w-8 h-8;
+  transition: 0.3s all ease;
 }
 </style>
diff --git a/src/components/Header/src/Navigation.vue b/src/components/Header/src/Navigation.vue
index 3a2495e9..078989e4 100644
--- a/src/components/Header/src/Navigation.vue
+++ b/src/components/Header/src/Navigation.vue
@@ -1,13 +1,15 @@
 <template>
   <nav class="items-center flex-1 hidden lg:flex">
-    <ul class="flex flex-row list-none px-6 text-white">
+    <ul
+      class="flex flex-row items-center list-none px-6 text-white invert-text"
+    >
       <li
         class="not-italic font-medium text-xs h-full relative flex flex-col items-center justify-center cursor-pointer text-center py-2 px-2"
         v-for="route in routes"
         :key="route.path"
       >
         <div
-          class="nav-link text-sm block px-1.5 py-0.5 rounded-md relative uppercase cursor-pointer"
+          class="nav-link invert-text text-sm block px-1.5 py-0.5 rounded-md relative uppercase cursor-pointer"
           @click="pushPage(route.path)"
           v-if="route.children && route.children.length === 0"
           :data-menu="route.name"
@@ -111,10 +113,10 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .nav-link {
-  @apply hover:text-ob-bright;
+  @apply hover:text-ob-bright font-extrabold;
   &:hover {
     &:before {
-      @apply opacity-60;
+      @apply opacity-60 bg-gray-800;
     }
   }
   &:before {
diff --git a/src/components/Header/src/Notification.vue b/src/components/Header/src/Notification.vue
index c37d1642..9a91e4a2 100644
--- a/src/components/Header/src/Notification.vue
+++ b/src/components/Header/src/Notification.vue
@@ -1,7 +1,7 @@
 <template>
   <div :class="notificationClasses">
     <div
-      class="flex flex-col relative bg-ob-deep-900 rounded-xl pt-4 overflow-hidden"
+      class="flex flex-col relative bg-ob-deep-900 rounded-xl pt-3 overflow-hidden"
     >
       <div class="flex items-center space-x-4 px-6">
         <SvgIcon
@@ -13,7 +13,7 @@
         />
         <span>{{ message }}</span>
       </div>
-      <span class="progress-bar mt-4" :style="progressStyle"></span>
+      <span class="progress-bar mt-3" :style="progressStyle"></span>
     </div>
   </div>
 </template>
diff --git a/src/components/MobileMenu.vue b/src/components/MobileMenu.vue
index c4aa19ae..4a49489b 100644
--- a/src/components/MobileMenu.vue
+++ b/src/components/MobileMenu.vue
@@ -1,115 +1,129 @@
 <template>
-  <div class="flex flex-col justify-center items-center">
-    <img
-      v-if="authorData.avatar !== ''"
-        :class="avatarClass"
-        :src="authorData.avatar"
-        alt="avatar"
-    />
-    <ob-skeleton v-else width="7rem" height="7rem" circle />
-
-    <h2 class="text-center pt-4 text-4xl font-semibold text-ob-bright">
-      <template v-if="authorData.name">
-        {{ authorData.name }}
-      </template>
-      <ob-skeleton v-else height="2.25rem" width="7rem" />
-    </h2>
-
-    <span class="h-1 w-14 rounded-full mt-2" :style="gradientBackground" />
-
-    <p
-      v-if="authorData.description"
-      class="pt-6 px-2 w-full text-sm text-center text-ob-dim"
-      v-html="authorData.description"
-    />
-    <p v-else class="pt-6 px-10 w-full text-sm text-center flex flex-col gap-2">
-      <ob-skeleton :count="2" height="20px" width="10rem" />
-    </p>
-    <Social :socials="authorData.socials" />
-    <ul class="grid grid-cols-3 pt-4 w-full px-2 text-lg">
-      <li class="col-span-1 text-center">
-        <span class="text-ob-bright">{{ authorData.post_list.length }}</span>
-        <p class="text-base text-ob-dim">{{ t('settings.articles') }}</p>
-      </li>
-      <li class="col-span-1 text-center">
-        <span class="text-ob-bright">{{ authorData.categories }}</span>
-        <p class="text-base text-ob-dim">{{ t('settings.categories') }}</p>
-      </li>
-      <li class="col-span-1 text-center">
-        <span class="text-ob-bright">{{ authorData.tags }}</span>
-        <p class="text-base text-ob-dim">{{ t('settings.tags') }}</p>
-      </li>
-    </ul>
-  </div>
-  <ul
-    class="flex flex-col justify-center items-center mt-8 w-full list-none text-ob-bright"
-  >
-    <li class="pb-2 cursor-pointer" v-for="route in routes" :key="route.path">
-      <div
-        class="text-sm block px-1.5 py-0.5 rounded-md relative uppercase"
-        @click="pushPage(route.path)"
-        v-if="route.children && route.children.length === 0"
-      >
-        <span
-          class="relative z-50"
-          v-if="$i18n.locale === 'cn' && route.i18n.cn"
-        >
-          {{ route.i18n.cn }}
-        </span>
-        <span
-          class="relative z-50"
-          v-else-if="$i18n.locale === 'en' && route.i18n.en"
+  <div :class="sidebarClasses">
+    <div id="App-Mobile-Profile" :class="wrapperClasses">
+      <div class="flex flex-col justify-center items-center">
+        <img
+          v-if="authorData.avatar !== ''"
+          :class="avatarClass"
+          :src="authorData.avatar"
+          alt="avatar"
+        />
+        <ob-skeleton v-else width="7rem" height="7rem" circle />
+
+        <h2 class="text-center pt-4 text-4xl font-semibold text-ob-bright">
+          <template v-if="authorData.name">
+            {{ authorData.name }}
+          </template>
+          <ob-skeleton v-else height="2.25rem" width="7rem" />
+        </h2>
+
+        <span class="h-1 w-14 rounded-full mt-2" :style="gradientBackground" />
+
+        <p
+          v-if="authorData.description"
+          class="pt-6 px-2 w-full text-sm text-center text-ob-normal"
+          v-html="authorData.description"
+        />
+        <p
+          v-else
+          class="pt-6 px-10 w-full text-sm text-center flex flex-col gap-2"
         >
-          {{ route.i18n.en }}
-        </span>
-        <span class="relative z-50" v-else>{{ route.name }}</span>
+          <ob-skeleton :count="2" height="20px" width="10rem" />
+        </p>
+        <Social :socials="authorData.socials" />
+        <ul class="grid grid-cols-3 pt-4 w-full px-2 text-lg">
+          <li class="col-span-1 text-center">
+            <span class="text-ob-bright">{{
+              authorData.post_list.length
+            }}</span>
+            <p class="text-base text-ob-dim">{{ t('settings.articles') }}</p>
+          </li>
+          <li class="col-span-1 text-center">
+            <span class="text-ob-bright">{{ authorData.categories }}</span>
+            <p class="text-base text-ob-dim">{{ t('settings.categories') }}</p>
+          </li>
+          <li class="col-span-1 text-center">
+            <span class="text-ob-bright">{{ authorData.tags }}</span>
+            <p class="text-base text-ob-dim">{{ t('settings.tags') }}</p>
+          </li>
+        </ul>
       </div>
-      <Dropdown
-        @command="pushPage"
-        v-else
-        class="flex flex-col justify-center items-center nav-link text-sm px-1.5 py-0.5 rounded-md relative uppercase"
+      <ul
+        class="flex flex-col justify-center items-center mt-8 w-full list-none text-ob-bright"
       >
-        <span
-          class="relative z-50"
-          v-if="$i18n.locale === 'cn' && route.i18n.cn"
+        <li
+          class="pb-2 cursor-pointer"
+          v-for="route in routes"
+          :key="route.path"
         >
-          {{ route.i18n.cn }}
-        </span>
-        <span
-          class="relative z-50"
-          v-else-if="$i18n.locale === 'en' && route.i18n.en"
-        >
-          {{ route.i18n.en }}
-        </span>
-        <span class="relative z-50" v-else>{{ route.name }}</span>
-        <DropdownMenu expand>
-          <DropdownItem
-            v-for="sub in route.children"
-            :key="sub.path"
-            :name="sub.path"
+          <div
+            class="text-sm block px-1.5 py-0.5 rounded-md relative uppercase"
+            @click="pushPage(route.path)"
+            v-if="route.children && route.children.length === 0"
+          >
+            <span
+              class="relative z-50"
+              v-if="$i18n.locale === 'cn' && route.i18n.cn"
+            >
+              {{ route.i18n.cn }}
+            </span>
+            <span
+              class="relative z-50"
+              v-else-if="$i18n.locale === 'en' && route.i18n.en"
+            >
+              {{ route.i18n.en }}
+            </span>
+            <span class="relative z-50" v-else>{{ route.name }}</span>
+          </div>
+          <Dropdown
+            @command="pushPage"
+            v-else
+            class="flex flex-col justify-center items-center nav-link text-sm px-1.5 py-0.5 rounded-md relative uppercase"
           >
             <span
               class="relative z-50"
-              v-if="$i18n.locale === 'cn' && sub.i18n.cn"
+              v-if="$i18n.locale === 'cn' && route.i18n.cn"
             >
-              {{ sub.i18n.cn }}
+              {{ route.i18n.cn }}
             </span>
             <span
               class="relative z-50"
-              v-else-if="$i18n.locale === 'en' && sub.i18n.en"
+              v-else-if="$i18n.locale === 'en' && route.i18n.en"
             >
-              {{ sub.i18n.en }}
+              {{ route.i18n.en }}
             </span>
-            <span class="relative z-50" v-else>{{ sub.name }}</span>
-          </DropdownItem>
-        </DropdownMenu>
-      </Dropdown>
-    </li>
-  </ul>
+            <span class="relative z-50" v-else>{{ route.name }}</span>
+            <DropdownMenu expand>
+              <DropdownItem
+                v-for="sub in route.children"
+                :key="sub.path"
+                :name="sub.path"
+              >
+                <span
+                  class="relative z-50"
+                  v-if="$i18n.locale === 'cn' && sub.i18n.cn"
+                >
+                  {{ sub.i18n.cn }}
+                </span>
+                <span
+                  class="relative z-50"
+                  v-else-if="$i18n.locale === 'en' && sub.i18n.en"
+                >
+                  {{ sub.i18n.en }}
+                </span>
+                <span class="relative z-50" v-else>{{ sub.name }}</span>
+              </DropdownItem>
+            </DropdownMenu>
+          </Dropdown>
+        </li>
+      </ul>
+    </div>
+    <div :class="blurClasses" ref="blurScreen"></div>
+  </div>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, onMounted, ref } from 'vue'
+import { computed, defineComponent, onMounted, ref, watch } from 'vue'
 import { useAppStore } from '@/stores/app'
 import { useI18n } from 'vue-i18n'
 import { Dropdown, DropdownMenu, DropdownItem } from '@/components/Dropdown'
@@ -128,6 +142,7 @@ export default defineComponent({
     const router = useRouter()
     const navigatorStore = useNavigatorStore()
     const { t } = useI18n()
+    const blurScreen = ref()
 
     const authorData = ref(new AuthorPosts())
 
@@ -148,7 +163,45 @@ export default defineComponent({
       }
     }
 
-    onMounted(fetchAuthor)
+    const onClickHandler = (e: MouseEvent) => {
+      if (e.target === blurScreen.value) {
+        navigatorStore.toggleMobileMenu()
+        return
+      }
+    }
+
+    watch(
+      () => navigatorStore.openMenu,
+      state => {
+        const bodyEle: HTMLElement | null =
+          document.querySelector('#body-container')
+        if (state) {
+          if (bodyEle) {
+            bodyEle.style.overflow = 'hidden'
+          }
+          blurScreen.value.style.display = 'flex'
+          blurScreen.value.style.animation =
+            '0.85s ease 0s 1 normal none running opacity_show'
+          document.addEventListener('click', onClickHandler)
+        } else {
+          if (bodyEle) {
+            bodyEle.style.overflow = 'initial'
+          }
+          window.setTimeout(() => {
+            console.log(123)
+            blurScreen.value.style.animation = 'none'
+            blurScreen.value.style.display = 'none'
+          }, 500)
+          blurScreen.value.style.animation =
+            '0.85s ease 0s 1 normal none running opacity_hide'
+          document.removeEventListener('click', onClickHandler)
+        }
+      }
+    )
+
+    onMounted(() => {
+      fetchAuthor()
+    })
 
     return {
       avatarClass: computed(() => {
@@ -163,6 +216,18 @@ export default defineComponent({
       }),
       statistic: computed(() => appStore.statistic),
       routes: computed(() => appStore.themeConfig.menu.menus),
+      openState: computed(() => navigatorStore.openMenu),
+      sidebarClasses: computed(() => ({
+        'App-Mobile-sidebar': true
+      })),
+      blurClasses: computed(() => ({
+        'App-Mobile-blur': true
+      })),
+      wrapperClasses: computed(() => ({
+        'App-Mobile-wrapper': true,
+        'open-menu': navigatorStore.openMenu
+      })),
+      blurScreen,
       authorData,
       pushPage,
       t
@@ -171,4 +236,43 @@ export default defineComponent({
 })
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss">
+.App-Mobile-sidebar {
+  z-index: 9999;
+}
+.App-Mobile-blur {
+  @apply fixed hidden h-full w-full backdrop-blur-xl top-0 left-0;
+  background: var(--background-blur);
+  z-index: 1001;
+}
+.App-Mobile-wrapper {
+  @apply fixed flex flex-col overflow-y-auto h-full pr-6 pl-4 pt-8 top-0 right-0 bg-ob-deep-900 opacity-0 transform-gpu;
+  transform: translateX(100%);
+  transition: transform 0.65s ease;
+  width: 80%;
+  z-index: 1002;
+  &.open-menu {
+    @apply mr-0 opacity-100;
+    transform: translateX(0);
+  }
+}
+
+@keyframes opacity_show {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes opacity_hide {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}
+</style>
diff --git a/src/components/Navigator.vue b/src/components/Navigator.vue
index f0fa98ee..9f5079b9 100644
--- a/src/components/Navigator.vue
+++ b/src/components/Navigator.vue
@@ -144,7 +144,7 @@ export default defineComponent({
       setTimeout(() => {
         progress.value = Number(
           (
-            (window.pageYOffset /
+            (window.scrollY /
               (document.documentElement.scrollHeight - window.innerHeight)) *
             100
           ).toFixed(0)
diff --git a/src/components/Sticky.vue b/src/components/Sticky.vue
index 865f1e69..a71ed2c7 100644
--- a/src/components/Sticky.vue
+++ b/src/components/Sticky.vue
@@ -9,10 +9,11 @@
 </template>
 
 <script lang="ts">
-import { StyleValue, computed, defineComponent, ref } from 'vue'
+import { StyleValue, computed, defineComponent, ref, watch } from 'vue'
 
 export default defineComponent({
   name: 'ObSticky',
+  emits: ['activeChange'],
   props: {
     stickyTop: {
       type: Number,
@@ -37,9 +38,13 @@ export default defineComponent({
     dynamicElClass: {
       type: String,
       default: ''
+    },
+    delay: {
+      type: Number,
+      default: 0
     }
   },
-  setup(props) {
+  setup(props, { emit }) {
     let active = ref(false),
       position = ref(''),
       width = ref(),
@@ -99,6 +104,7 @@ export default defineComponent({
       this.active = true
       this.width = this.width + 'px'
       this.isSticky = true
+      this.$emit('activeChange', true)
     },
     handleReset() {
       if (!this.active) {
@@ -107,10 +113,13 @@ export default defineComponent({
       this.reset()
     },
     reset() {
-      this.position = ''
-      this.width = 'auto'
-      this.active = false
-      this.isSticky = false
+      this.$emit('activeChange', false)
+      setTimeout(() => {
+        this.position = ''
+        this.width = 'auto'
+        this.active = false
+        this.isSticky = false
+      }, this.delay)
     },
     handleScroll() {
       /**
diff --git a/src/router/index.ts b/src/router/index.ts
index 4a3d4a68..3d9293e4 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -77,6 +77,8 @@ const router = createRouter({
         }, 1500)
       } else if (savedPosition) {
         resolve(savedPosition)
+      } else {
+        resolve({ top: 0 })
       }
     })
   }
diff --git a/src/stores/navigator.ts b/src/stores/navigator.ts
index 96f290bb..ab2baf89 100644
--- a/src/stores/navigator.ts
+++ b/src/stores/navigator.ts
@@ -6,62 +6,17 @@ export const useNavigatorStore = defineStore({
   id: 'navigatorStore',
   state: () => ({
     openMenu: false,
-    openNavigator: false
+    openNavigator: false,
+    isDone: false
   }),
   getters: {},
   actions: {
     toggleMobileMenu() {
-      const bodyEl = document.querySelector('body')
-      let scrollPosition = 0
-      const appEl = document.getElementById('app')
-      const appWrapperEl = document.getElementById('App-Wrapper')
-      const appMobileEl = document.getElementById('App-Mobile-Profile')
-      if (appEl && appWrapperEl && appMobileEl && bodyEl) {
-        if (this.openMenu === false) {
-          scrollPosition = window.pageYOffset
-          bodyEl.style.overflow = 'hidden'
-          bodyEl.style.position = 'fixed'
-          bodyEl.style.top = `-${scrollPosition}px`
-          bodyEl.style.width = '100%'
-
-          appEl.style.overflow = 'hidden'
-          appEl.style.maxHeight = '100vh'
-          appWrapperEl.style.borderRadius = '16px'
-          appWrapperEl.style.overflow = 'hidden'
-          appWrapperEl.style.maxHeight = '100vh'
-          appWrapperEl.style.minHeight = '100vh'
-          appWrapperEl.style.transform =
-            'translate3d(302px, 0px, 0px) scale3d(0.86, 0.86, 1)'
-          setTimeout(() => {
-            appMobileEl.style.opacity = '1'
-            appMobileEl.style.transform = 'translateY(0)'
-          }, 200)
-          this.openMenu = true
-        } else {
-          bodyEl.style.removeProperty('overflow')
-          bodyEl.style.removeProperty('position')
-          bodyEl.style.removeProperty('top')
-          bodyEl.style.removeProperty('width')
-          window.scrollTo(0, scrollPosition)
-
-          appMobileEl.style.opacity = '0'
-          appMobileEl.style.transform = 'translateY(-20%)'
-
-          appWrapperEl.style.transform =
-            'translate3d(0px, 0px, 0px) scale3d(1, 1, 1)'
-          appWrapperEl.style.borderRadius = '0'
-
-          setTimeout(() => {
-            appEl.style.overflow = 'auto'
-            appEl.style.maxHeight = 'initial'
-            appWrapperEl.style.overflow = 'auto'
-            appWrapperEl.style.maxHeight = 'initial'
-            appWrapperEl.style.minHeight = 'initial'
-            appWrapperEl.style.transform = 'none'
-            this.openMenu = false
-          }, 376)
-        }
-      }
+      this.isDone = false
+      this.openMenu = !this.openMenu
+      setTimeout(() => {
+        this.isDone = this.openMenu
+      }, 300)
     },
     toggleOpenNavigator() {
       this.openNavigator = !this.openNavigator