diff --git a/src/components/custom/ThemeSwitch/index.vue b/src/components/custom/ThemeSwitch/index.vue
new file mode 100644
index 00000000..0b0c0731
--- /dev/null
+++ b/src/components/custom/ThemeSwitch/index.vue
@@ -0,0 +1,39 @@
+<template>
+  <div class="flex-center w-40px h-40px text-14px hover:text-primary cursor-pointer" @click="toggleDarkMode">
+    <icon-mdi-moon-waning-crescent v-if="dark" />
+    <icon-mdi-white-balance-sunny v-else />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { watch } from 'vue';
+import { useBoolean } from '@/hooks';
+
+interface Props {
+  /** 暗黑模式 */
+  dark?: boolean;
+}
+
+interface Emits {
+  (e: 'update', darkMode: boolean): void;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  dark: false
+});
+
+const emit = defineEmits<Emits>();
+
+const { bool: darkMode, setBool: setDarkMode, toggle: toggleDarkMode } = useBoolean(props.dark);
+
+watch(
+  () => props.dark,
+  newValue => {
+    setDarkMode(newValue);
+  }
+);
+watch(darkMode, newValue => {
+  emit('update', newValue);
+});
+</script>
+<style scoped></style>
diff --git a/src/components/custom/index.ts b/src/components/custom/index.ts
index 7071344a..c1290bd6 100644
--- a/src/components/custom/index.ts
+++ b/src/components/custom/index.ts
@@ -5,5 +5,6 @@ import ChromeTab from './ChromeTab/index.vue';
 import BetterScroll from './BetterScroll/index.vue';
 import WebSiteLink from './WebSiteLink/index.vue';
 import GithubLink from './GithubLink/index.vue';
+import ThemeSwitch from './ThemeSwitch/index.vue';
 
-export { CountTo, IconClose, ButtonTab, ChromeTab, BetterScroll, WebSiteLink, GithubLink };
+export { CountTo, IconClose, ButtonTab, ChromeTab, BetterScroll, WebSiteLink, GithubLink, ThemeSwitch };
diff --git a/src/interface/business/index.ts b/src/interface/business/index.ts
index a2c76b1c..d47abada 100644
--- a/src/interface/business/index.ts
+++ b/src/interface/business/index.ts
@@ -1,2 +1,3 @@
 export * from './auth';
 export * from './demo';
+export * from './website';
diff --git a/src/interface/business/website.ts b/src/interface/business/website.ts
new file mode 100644
index 00000000..470d6f04
--- /dev/null
+++ b/src/interface/business/website.ts
@@ -0,0 +1,18 @@
+/** 网址导航 */
+export interface Website {
+  /** 网址名称 */
+  title: string;
+  /** 网址简称 */
+  abbr: string;
+  /** 网址图标(网络地址，形状为正方形) */
+  logo: string;
+  /** 描述 */
+  desc: string;
+}
+
+/** 网址导航 分类 */
+export interface WebsiteCategory {
+  /** 分类名称 */
+  title: string;
+  children: WebsiteCategory[] | Website[];
+}
diff --git a/src/interface/common/route.ts b/src/interface/common/route.ts
index 906c1e17..cbba94c6 100644
--- a/src/interface/common/route.ts
+++ b/src/interface/common/route.ts
@@ -55,4 +55,5 @@ export type RouteKey =
   | 'exception_403'
   | 'exception_404'
   | 'exception_500'
-  | 'about';
+  | 'about'
+  | 'website';
diff --git a/src/layouts/BlankLayout/index.vue b/src/layouts/BlankLayout/index.vue
index 2873476f..2c74a103 100644
--- a/src/layouts/BlankLayout/index.vue
+++ b/src/layouts/BlankLayout/index.vue
@@ -1,6 +1,6 @@
 <template>
   <n-scrollbar ref="scrollbar" class="h-full" :content-class="routeProps.fullPage ? 'h-full' : ''">
-    <div class="inline-block wh-full bg-[#f6f9f8]">
+    <div class="inline-block wh-full bg-[#f6f9f8] dark:bg-dark">
       <router-view v-slot="{ Component, route: itemRoute }">
         <transition :name="theme.pageAnimateType" mode="out-in" appear>
           <keep-alive :include="cacheRoutes">
diff --git a/src/router/constant/index.ts b/src/router/constant/index.ts
index 9de8cff7..cd8aea27 100644
--- a/src/router/constant/index.ts
+++ b/src/router/constant/index.ts
@@ -258,6 +258,14 @@ const routeConstMap = new Map<RouteKey, RouteConst>([
       path: '/about',
       title: '关于'
     }
+  ],
+  [
+    'website',
+    {
+      name: 'website',
+      path: '/website',
+      title: '网址导航'
+    }
   ]
 ]);
 
diff --git a/src/router/modules/website.ts b/src/router/modules/website.ts
new file mode 100644
index 00000000..9ae9ad13
--- /dev/null
+++ b/src/router/modules/website.ts
@@ -0,0 +1,27 @@
+import type { CustomRoute } from '@/interface';
+import { setSingleRoute } from '@/utils';
+import { BlankLayout } from '@/layouts';
+import Website from '@/views/website/index.vue';
+import { getRouteConst, routeName } from '../constant';
+
+const { name, path, title } = getRouteConst('website');
+
+const WEBSITE: CustomRoute = setSingleRoute({
+  route: {
+    name,
+    path,
+    component: Website,
+    meta: {
+      title,
+      icon: 'codicon:remote-explorer',
+      isNotMenu: true
+    }
+  },
+  container: BlankLayout,
+  meta: {
+    order: 8
+  },
+  notFoundName: routeName('not-found')
+});
+
+export default WEBSITE;
diff --git a/src/settings/website.json b/src/settings/website.json
new file mode 100644
index 00000000..4c7210d5
--- /dev/null
+++ b/src/settings/website.json
@@ -0,0 +1,27 @@
+[
+	{
+		"title": "编程",
+		"children": [
+			{
+				"title": "网站论坛",
+				"children": []
+			},
+			{
+				"title": "前端",
+				"children": []
+			},
+			{
+				"title": "设计",
+				"children": []
+			},
+			{
+				"title": "工具",
+				"children": []
+			},
+			{
+				"title": "文档",
+				"children": []
+			}
+		]
+	}
+]
diff --git a/src/settings/website.ts b/src/settings/website.ts
new file mode 100644
index 00000000..4f4a13cf
--- /dev/null
+++ b/src/settings/website.ts
@@ -0,0 +1,7 @@
+import type { WebsiteCategory } from '@/interface';
+
+import websiteJson from './website.json';
+
+const website: WebsiteCategory[] = websiteJson;
+
+export default website;
diff --git a/src/views/website/index.vue b/src/views/website/index.vue
new file mode 100644
index 00000000..9490e5b7
--- /dev/null
+++ b/src/views/website/index.vue
@@ -0,0 +1,22 @@
+<template>
+  <div>
+    <header class="flex-y-center justify-between h-78px px-24px bg-light dark:bg-dark shadow-sm">
+      <div class="flex-y-center">
+        <system-logo class="w-48px h-48px mr-12px" :color="theme.themeColor" />
+        <n-gradient-text size="32">Soybean 网址导航</n-gradient-text>
+      </div>
+      <theme-switch :dark="theme.darkMode" @update="handleDarkMode" />
+    </header>
+    <n-space :vertical="true"></n-space>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { NSpace, NGradientText } from 'naive-ui';
+import { SystemLogo, ThemeSwitch } from '@/components';
+import { useThemeStore } from '@/store';
+
+const theme = useThemeStore();
+const { handleDarkMode } = useThemeStore();
+</script>
+<style scoped></style>