diff --git a/.vscode/settings.json b/.vscode/settings.json
index 973ba5c..0e802c0 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -6,6 +6,7 @@
   "files.associations": {
     "*.css": "postcss"
   },
+  "css.lint.unknownAtRules": "ignore",
   // "editor.formatOnSave": true,
   // "editor.defaultFormatter": "esbenp.prettier-vscode",
   // "prettier.requireConfig": true,
diff --git a/frontend/app.vue b/frontend/app.vue
index 74a1357..b3fc93c 100644
--- a/frontend/app.vue
+++ b/frontend/app.vue
@@ -58,12 +58,4 @@ body,
   margin: 0;
   padding: 0;
 }
-
-html.dark {
-  background: #18181c;
-  color: white;
-}
-html.light {
-  background-color: #F4F5F5;
-}
 </style>
diff --git a/frontend/assets/css/main.css b/frontend/assets/css/main.css
index 7a3be93..45ab80e 100644
--- a/frontend/assets/css/main.css
+++ b/frontend/assets/css/main.css
@@ -1,5 +1,5 @@
 :root {
-  --primary-color: #316c72;
+  --primary-color: #1e80ff;
   --dark-bg: #18181c;
   --link: #007fff;
   --jjext-color-brand: #1e80ff;
@@ -81,6 +81,194 @@
   --jjext-color-bg-gray:#27272a;
 }
 
+html.light{
+  --juejin-layer-golden-1: #faf3e5;
+  --juejin-layer-golden-2: #f6e7cb;
+  --juejin-component-hover: #e4e6eb;
+  --juejin-gradientgold_normal_start: #fde8c3;
+  --juejin-gradientgold_normal_end: #edd3a7;
+  --juejin-gradientgold_hover_start: #f1dfc0;
+  --juejin-gradientgold_hover_end: #e6c99b;
+  --juejin-gradientgold_click_start: #e9d5b3;
+  --juejin-gradientgold_click_end: #dac29a;
+  --juejin-layer_loading_start: rgba(228,230,235,0);
+  --juejin-layer_loading_end: rgba(228,230,235,0.5);
+  --juejin-layer_golden_2: #faf3e5;
+  --juejin-font_golden_4: #7e5d25;
+  --juejin-font-golden-1: #7e5d25;
+  --juejin-font-golden-2: #8a795c;
+  --juejin-font-golden-3: #d6b885;
+  --juejin-gray-0: #fff;
+  --juejin-gray-1-1: #e4e6eb;
+  --juejin-gray-1-2: rgba(228,230,235,0.5);
+  --juejin-gray-1-3: #e4e6eb;
+  --juejin-gray-2: #f2f3f5;
+  --juejin-gray-3: #f7f8fa;
+  --juejin-background: #f2f3f5;
+  --juejin-layer-1: #fff;
+  --juejin-layer-2-1: #f7f8fa;
+  --juejin-layer-2-2: rgba(247,248,250,0.7);
+  --juejin-layer-3-fill: #f2f3f5;
+  --juejin-layer-3-border: #e4e6eb;
+  --juejin-layer-4-dropdown: #fff;
+  --juejin-layer-5: #fff;
+  --juejin-brand-1-normal: #1e80ff;
+  --juejin-brand-2-hover: #1171ee;
+  --juejin-brand-3-click: #0060dd;
+  --juejin-brand-4-disable: #abcdff;
+  --juejin-brand-5-light: #eaf2ff;
+  --juejin-mask-1: rgba(0,0,0,0.4);
+  --juejin-mask-2: #fff;
+  --juejin-mask-3: none;
+  --juejin-brand-fill1-normal: rgba(30,128,255,0.05);
+  --juejin-brand-fill2-hover: rgba(30,128,255,0.1);
+  --juejin-brand-fill3-click: rgba(30,128,255,0.2);
+  --juejin-brand-stroke1-normal: rgba(30,128,255,0.3);
+  --juejin-brand-stroke2-hover: rgba(30,128,255,0.45);
+  --juejin-brand-stroke3-click: rgba(30,128,255,0.6);
+  --juejin-font_danger: #ff5132;
+  --juejin-font-1: #252933;
+  --juejin-font-2: #515767;
+  --juejin-font-3: #8a919f;
+  --juejin-font-4: #c2c8d1;
+  --juejin-font-brand1-normal: #1e80ff;
+  --juejin-font-brand2-hover: #1171ee;
+  --juejin-font-brand3-click: #0060dd;
+  --juejin-font-brand4-disable: #abcdff;
+  --juejin-font-success: #2bb91b;
+  --juejin-font-warning: #ff8412;
+  --juejin-font-danger: #ff5132;
+  --juejin-font-white-disable: #fff;
+  --juejin-font-white: #fff;
+  --juejin-success-1-normal: #00b453;
+  --juejin-success-2-deep: #00964e;
+  --juejin-success-3-light: #e2faed;
+  --juejin-warning-1-normal: #ff7426;
+  --juejin-warning-2-deep: #e05e00;
+  --juejin-warning-3-light: #fff3e5;
+  --juejin-danger-1-normal: #f64242;
+  --juejin-danger-2-deep: #cb2634;
+  --juejin-danger-3-light: #fff2ff;
+  --juejin-sub-1-purple: #9f54ff;
+  --juejin-sub-2-blue: #57a0ff;
+  --juejin-sub-3-cyan: #5ad7ff;
+  --juejin-sub-4-green: #33d790;
+  --juejin-sub-5-yellow: #ffcc15;
+  --juejin-sub-6-orange: #ff834e;
+  --juejin-sub-7-red: #ff5e54;
+  --juejin-coupon_1_button: #f64242;
+  --juejin-coupon_1_button_disable: #faa0a0;
+  --juejin-coupon_2_card: rgba(255,245,244,0.7);
+  --juejin-coupon_3_stroke: rgba(246,66,66,0.2);
+  --juejin-navigation: #fff;
+  --juejin-shade-1: rgba(0,0,0,0.4);
+  --juejin-shade-2: rgba(0,0,0,0.6);
+  --juejin-popup: #fff;
+  --juejin-popover: rgba(0,0,0,0.8);
+  --juejin-sheets: #f7f8fa;
+  --juejin-coupon-button: #f64242;
+  --juejin-coupon-button-disable: #faa0a0;
+  --juejin-coupon-card: rgba(255,245,244,0.7);
+  --juejin-layer-loading-start: #e4e6eb;
+  --juejin-layer-loading-end: rgba(228,230,235,0.5);
+  --juejin-font-priv-hint: #916be1;
+  --juejin-background-jscore-radar: #232323
+}
+
+html.dark{
+  --juejin-layer-golden-1: rgba(209,171,97,0.23);
+  --juejin-layer-golden-2: rgba(237,211,167,0.4);
+  --juejin-component-hover: hsla(0,0%,100%,0.2);
+  --juejin-gradientgold_normal_start: #fde8c3;
+  --juejin-gradientgold_normal_end: #edd3a7;
+  --juejin-gradientgold_hover_start: #f1dfc0;
+  --juejin-gradientgold_hover_end: #e6c99b;
+  --juejin-gradientgold_click_start: #e9d5b3;
+  --juejin-gradientgold_click_end: #dac29a;
+  --juejin-layer_loading_start: hsla(0,0%,100%,0);
+  --juejin-layer_loading_end: hsla(0,0%,100%,0.2);
+  --juejin-layer_golden_2: rgba(209,171,97,0.12);
+  --juejin-font_golden_4: #7e5d25;
+  --juejin-font-golden-1: #edd3a7;
+  --juejin-font-golden-2: #bea985;
+  --juejin-font-golden-3: #8e7f64;
+  --juejin-gray-0: #000;
+  --juejin-gray-1-1: hsla(0,0%,100%,0.2);
+  --juejin-gray-1-2: hsla(0,0%,100%,0.1);
+  --juejin-gray-1-3: #464646;
+  --juejin-gray-2: hsla(0,0%,100%,0.12);
+  --juejin-gray-3: hsla(0,0%,100%,0.08);
+  --juejin-background: #000;
+  --juejin-layer-1: #181818;
+  --juejin-layer-2-1: hsla(0,0%,100%,0.08);
+  --juejin-layer-2-2: hsla(0,0%,100%,0.08);
+  --juejin-layer-3-fill: hsla(0,0%,100%,0.08);
+  --juejin-layer-3-border: hsla(0,0%,100%,0.2);
+  --juejin-layer-4-dropdown: #2f2f2f;
+  --juejin-layer-5: hsla(0,0%,100%,0.12);
+  --juejin-brand-1-normal: #2986ff;
+  --juejin-brand-2-hover: #1473ed;
+  --juejin-brand-3-click: #0563dd;
+  --juejin-brand-4-disable: rgba(41,134,255,0.4);
+  --juejin-brand-5-light: rgba(30,128,255,0.2);
+  --juejin-mask-1: hsla(0,0%,100%,0.4);
+  --juejin-mask-2: #282828;
+  --juejin-mask-3: rgba(0,0,0,0.05);
+  --juejin-brand-fill1-normal: rgba(41,134,255,0.15);
+  --juejin-brand-fill2-hover: rgba(20,115,237,0.25);
+  --juejin-brand-fill3-click: rgba(5,99,221,0.35);
+  --juejin-brand-stroke1-normal: rgba(41,134,255,0.4);
+  --juejin-brand-stroke2-hover: rgba(20,115,237,0.6);
+  --juejin-brand-stroke3-click: rgba(5,99,221,0.6);
+  --juejin-font_danger: #f85959;
+  --juejin-font-1: hsla(0,0%,100%,0.9);
+  --juejin-font-2: hsla(0,0%,100%,0.7);
+  --juejin-font-3: hsla(0,0%,100%,0.55);
+  --juejin-font-4: hsla(0,0%,100%,0.45);
+  --juejin-font-brand1-normal: #4495ff;
+  --juejin-font-brand2-hover: #2b88ff;
+  --juejin-font-brand3-click: #1371ec;
+  --juejin-font-brand4-disable: rgba(19,113,236,0.4);
+  --juejin-font-success: #40c17b;
+  --juejin-font-warning: #ff8541;
+  --juejin-font-danger: #c62633;
+  --juejin-font-white-disable: hsla(0,0%,100%,0.6);
+  --juejin-font-white: #fff;
+  --juejin-success-1-normal: #40c17b;
+  --juejin-success-2-deep: #008445;
+  --juejin-success-3-light: rgba(64,193,123,0.2);
+  --juejin-warning-1-normal: #ff8541;
+  --juejin-warning-2-deep: #d85c02;
+  --juejin-warning-3-light: rgba(255,133,65,0.2);
+  --juejin-danger-1-normal: #f85959;
+  --juejin-danger-2-deep: #c62633;
+  --juejin-danger-3-light: rgba(248,89,89,0.2);
+  --juejin-sub-1-purple: #a965ff;
+  --juejin-sub-2-blue: #68a9ff;
+  --juejin-sub-3-cyan: #74f4ed;
+  --juejin-sub-4-green: #50e68c;
+  --juejin-sub-5-yellow: #ffd748;
+  --juejin-sub-6-orange: #ff8f60;
+  --juejin-sub-7-red: #ff6e65;
+  --juejin-coupon_1_button: rgba(251,86,83,0.8);
+  --juejin-coupon_1_button_disable: #782928;
+  --juejin-coupon_2_card: rgba(255,176,176,0.08);
+  --juejin-coupon_3_stroke: rgba(246,66,66,0.18);
+  --juejin-navigation: #181818;
+  --juejin-shade-1: rgba(0,0,0,0.6);
+  --juejin-shade-2: rgba(0,0,0,0.7);
+  --juejin-popup: #282828;
+  --juejin-popover: #323232;
+  --juejin-sheets: #222;
+  --juejin-coupon-button: rgba(251,86,83,0.8);
+  --juejin-coupon-button-disable: #782928;
+  --juejin-coupon-card: rgba(255,176,176,0.08);
+  --juejin-layer-loading-start: #fff;
+  --juejin-layer-loading-end: hsla(0,0%,100%,0.2);
+  --juejin-font-priv-hint: #916be1;
+  --juejin-background-jscore-radar: #232323
+}
+
 .page-enter-active,
 .page-leave-active {
   transition: all 0.3s ease-in-out;
diff --git a/frontend/components/ArticlesContent/index.vue b/frontend/components/ArticlesContent/index.vue
index 8a8eaba..965517f 100644
--- a/frontend/components/ArticlesContent/index.vue
+++ b/frontend/components/ArticlesContent/index.vue
@@ -54,7 +54,6 @@ function transformToId() {
     }
   }
 }
-
 onMounted(() => {
   if (article.value)
     handleChange(article.value.content)
diff --git a/frontend/components/Logo.vue b/frontend/components/Logo.vue
index d51b5e6..57afd81 100644
--- a/frontend/components/Logo.vue
+++ b/frontend/components/Logo.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="!flex h-[2.25rem]">
+  <div class="!flex h-[2rem]">
     <svg
       viewBox="0 0 36 28"
       xmlns="http://www.w3.org/2000/svg"
diff --git a/frontend/components/Navs/Item.vue b/frontend/components/Navs/Item.vue
new file mode 100644
index 0000000..aa23073
--- /dev/null
+++ b/frontend/components/Navs/Item.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import type { PropType } from 'vue'
+import type { INavItem } from '~~/types/INav'
+defineProps({
+  nav: {
+    type: Object as PropType<INavItem>,
+    required: true,
+  },
+})
+</script>
+
+<template>
+  <div>
+    <NuxtLink v-if="nav.nav" :to="nav.url" class="nav-item" :data-badge="nav?.badge || ''">
+      {{ nav.nav }}
+    </NuxtLink>
+  </div>
+</template>
+
+<style scoped>
+.nav-item {
+  @apply h-full flex items-center text-[15px] border-b-2 border-transparent;
+  @apply relative opacity-85 whitespace-nowrap;
+  @apply text-black dark:text-[#e8ecfa];
+
+}
+.nav-item:hover {
+    @apply border-b-primary;
+    @apply opacity-100;
+}
+.nav-item::after {
+  @apply absolute left-2/3 top-2;
+  @apply bg-red-500 text-white;
+  @apply rounded-full px-1.5 py-0.4 whitespace-nowrap;
+  @apply transform-gpu scale-60 origin-top-left;
+  content: attr(data-badge);
+}
+.nav-item[data-badge='']::after {
+  content: unset;
+}
+.nav-item.router-link-exact-active {
+    @apply opacity-100 text-primary;
+}
+</style>
diff --git a/frontend/components/Navs/index.vue b/frontend/components/Navs/index.vue
index 1f522b1..26196dc 100644
--- a/frontend/components/Navs/index.vue
+++ b/frontend/components/Navs/index.vue
@@ -1,172 +1,67 @@
 <script setup>
-import { reactive } from 'vue'
 const runtimeConfig = useRuntimeConfig()
 const { data: NavList } = await useFetch('/api/global/navs')
-// button按钮
-const list = reactive({
-  showList: false,
+const route = useRoute()
+const activeNav = computed(() => {
+  return NavList.value.find(item => item.url === route.fullPath) || NavList[0]
 })
-const onClick = () => {
-  list.showList = !list.showList
-}
 </script>
 
 <template>
-  <main>
-    <header>
-      <div class="header">
-        <div class="container">
-          <a href="" class="logo">
-            <NuxtLink to="/"><Logo /></NuxtLink>
-          </a>
-          <nav class="nav-list">
-            <ul>
-              <li>
-                <button class="button" @click="onClick()">
-                  首页
-                </button>
-                <ul v-show="list.showList" class="list">
-                  <li v-for="item in NavList" :key="item.nav">
-                    <NuxtLink to="{{ item.url }}">
-                      {{ item.nav }}
-                    </NuxtLink>
-                  </li>
-                </ul>
-              </li>
-              <li v-for="item in NavList" :key="item.nav" class="main-nav-list">
-                <NuxtLink to="{{ item.url }}">
-                  <a>{{ item.nav }}</a>
-                </NuxtLink>
-              </li>
-            </ul>
-            <span v-for="item in NavList" :key="item.badge">{{ item.badge }}</span>
-          </nav>
-          <div class="switchThemes">
-            <UnoDarkToggle />
-          </div>
-        </div>
+  <header class="main-header visible flex items-center justify-between h-full">
+    <nav class="nav-list h-full">
+      <NuxtLink to="/" class="logo h-full">
+        <Logo />
+      </NuxtLink>
+      <div class="mobile-nav">
+        {{ activeNav?.nav }}
+        <div i-carbon:caret-up />
       </div>
-    </header>
-  </main>
+      <NavsItem v-for="item in NavList" :key="item.nav" :nav="item" class="nav-item-wrapper h-full" />
+    </nav>
+    <UnoDarkToggle />
+  </header>
 </template>
 
 <style scoped>
-/* 弹出菜单 */
-.button{
-  display: none;
-  font-size: 17px;
-  color: #1e80ff;
-}
-.list{
-  position: absolute;
-  flex-direction:column;
-  top: 50px;
-  left: -34px;
-  z-index: 3;
-  background-color: #ffffff;
-  width: 120px;
-  /* height: 550px; */
-  border: 1px solid #f1f1f1;
-  /* display: none!important; */
-}
-.list li{
-  display: block;
-  text-align: center;
-  margin: auto;
-  width: 30px!important;
-}
-/* .list li:hover{
-  border-bottom: 3px solid #1e80ff;
-} */
-.switchThemes{
-  position: absolute;
-  right: 30px;
-  border: 1px solid #1e80ff;
-  border-radius: 4px;
-  background: #1e80ffb8;
-}
-.header {
-  border-top: 1px solid #f1f1f1;
-  border-bottom: 1px solid #f1f1f1;
-  background-color: #ffffff;
-  position: fixed;
-  width: 100%;
-  z-index: 999;
-}
-
-.container {
-  @apply flex h-19 w-full m-auto items-center relative px-94;
+.main-header.visible{
+    transform: translateZ(0);
 }
 
-.nav-list ul {
-  display: flex;
+.main-header {
+    transition: all .2s;
+    transform: translate3d(0,-100%,0);
+    @apply flex items-center fixed top-0 left-0 right-0 justify-around;
 }
-
-.nav-list span {
-  display: block;
-  position: absolute;
-  width: 55px;
-  left: 843px;
-  top: 6px;
-  font-size: 12px;
-  background: #ee502f;
-  border-radius: 10px;
-  transform: scale(.65);
-  color: #ffffff;
-  text-align: center;
+.main-header {
+    @apply bg-jj_navigation border-b-1 border-[#f1f1f1] h-[5rem] z-99;
 }
 
-.nav-list ul li {
-  position: relative;
-  color: #515767;
-  font-size: 1.167rem;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
-  height: 4rem;
-  width: 52px;
-  text-align: center;
-  line-height: 4rem;
-}
-.nav-list ul li:nth-child(1) {
-  color: #1e80ff;
-}
+.logo{
+  @apply flex items-center mr-4 ml-6 h-[2.2rem] w-auto inline-block;
 
-.nav-list ul li a {
-  /* display: block; */
-  padding: 18px 0;
-  height: 60px;
 }
-
-.nav-list ul li a:hover {
-  border-bottom: 3px solid #1e80ff;
+.nav-list{
+  @apply flex items-center;
 }
 
-.nav-list ul li:hover {
-  color: black;
+.nav-item-wrapper{
+  @apply mx-4;
 }
-.main-nav-list:nth-child(2){
-  color: #1e80ff!important;
-}
-@media screen and (min-width:1190px){
-  .list{
-    display: none!important;
-  }
+.mobile-nav{
+  display: none;
 }
-@media screen and (max-width:1190px) {
-  .container{
-    padding-left: 0;
-  }
-  .main-nav-list {
-    display: none;
-  }
-
-  .nav-list span {
-    display: none;
+@screen md{
+  .mobile-nav{
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    color: #1e80ff;
+    font-size: 1.33rem;
+    justify-content: center;
   }
-  .button{
-    display: block;
-    margin-left: 10px;
+  .nav-item-wrapper{
+    display:none;
   }
 }
 </style>
diff --git a/frontend/components/Types/index.vue b/frontend/components/Types/index.vue
index 13803e5..5d347a0 100644
--- a/frontend/components/Types/index.vue
+++ b/frontend/components/Types/index.vue
@@ -7,7 +7,7 @@ const { data: TypeList } = await useFetch('/api/global/types')
   <div class="view-nav">
     <div class="flex list-none ma pr-114">
       <li v-for="item in TypeList" :key="item.type" class="navList">
-        {{ item.type }}
+        {{ item.alias }}
       </li>
     </div>
   </div>
diff --git a/frontend/server/api/articles/[id].ts b/frontend/server/api/articles/[id].ts
index 912b182..b5e1dfd 100644
--- a/frontend/server/api/articles/[id].ts
+++ b/frontend/server/api/articles/[id].ts
@@ -39,6 +39,7 @@ export default defineEventHandler(async (event): Promise<IArticle> => {
             data{
               attributes{
                 type
+                alias
               }
             }
           }
diff --git a/frontend/server/api/global/navs.ts b/frontend/server/api/global/navs.ts
index ffd9050..5d12093 100644
--- a/frontend/server/api/global/navs.ts
+++ b/frontend/server/api/global/navs.ts
@@ -1,9 +1,5 @@
 import { useGraphql } from '~~/utils/useGraphql'
-interface INavItem {
-  name: string
-  url: string
-  badge?: string
-}
+import type { INavItem } from '~~/types/INav'
 export default defineEventHandler(async (): Promise<INavItem[]> => {
   const reqQuery = `query{
     global{
diff --git a/frontend/types/IArticle.ts b/frontend/types/IArticle.ts
index 14365b1..7878653 100644
--- a/frontend/types/IArticle.ts
+++ b/frontend/types/IArticle.ts
@@ -14,6 +14,7 @@ interface ITagItem {
 
 interface IType {
   type: string
+  alias: string
 }
 
 interface IColumnArticleItem {
diff --git a/frontend/types/INav.ts b/frontend/types/INav.ts
new file mode 100644
index 0000000..cf254e3
--- /dev/null
+++ b/frontend/types/INav.ts
@@ -0,0 +1,5 @@
+export interface INavItem {
+  nav: string
+  url: string
+  badge?: string
+}
diff --git a/frontend/unocss.config.ts b/frontend/unocss.config.ts
index 4c87af6..0a97a45 100644
--- a/frontend/unocss.config.ts
+++ b/frontend/unocss.config.ts
@@ -10,8 +10,6 @@ import {
 } from 'unocss'
 export default defineConfig({
   shortcuts: [
-    ['btn', 'px-4 py-1 rounded inline-block bg-teal-600 text-white cursor-pointer hover:bg-teal-700 disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50'],
-    ['icon-btn', 'inline-block cursor-pointer select-none opacity-75 transition duration-200 ease-in-out hover:opacity-100 hover:text-teal-600'],
     ['f-c-c', 'flex justify-center items-center'],
   ],
   presets: [
@@ -48,6 +46,15 @@ export default defineConfig({
       jj_font_white: 'var(--jjext-color-font-white)', // #ffffff
       jj_font_black: 'var(--jjext-color-font-1)', // #252933
       jj_bg_gray: 'var(--jjext-color-bg-gray)', // #27272a
+      jj_navigation: 'var(--juejin-navigation)',
+    },
+    breakpoints: {
+      xs: '320px',
+      sm: '640px',
+      md: '768px',
+      lg: '1024px',
+      xl: '1280px',
+      xxl: '1536px',
     },
   },
 })