diff --git a/backend/src/extensions/documentation/documentation/1.0.0/full_documentation.json b/backend/src/extensions/documentation/documentation/1.0.0/full_documentation.json
index 099533c..1dd2774 100644
--- a/backend/src/extensions/documentation/documentation/1.0.0/full_documentation.json
+++ b/backend/src/extensions/documentation/documentation/1.0.0/full_documentation.json
@@ -14,7 +14,7 @@
       "name": "Apache 2.0",
       "url": "https://www.apache.org/licenses/LICENSE-2.0.html"
     },
-    "x-generation-date": "2023-01-20T06:42:48.970Z"
+    "x-generation-date": "2023-01-20T10:52:47.291Z"
   },
   "x-strapi-config": {
     "path": "/documentation",
diff --git a/frontend/app.vue b/frontend/app.vue
index 824b9a0..0db6272 100644
--- a/frontend/app.vue
+++ b/frontend/app.vue
@@ -3,7 +3,7 @@
 useHead({
   link: [
     { rel: 'icon', type: 'image/png', href: '/favicon.png' },
-    { rel: 'canonical', href: 'https://bytedream.top/' },
+    { rel: 'canonical', href: 'https://bytedream.top' },
   ],
   meta: [
     { name: 'viewport', content: 'width=device-width, initial-scale=1' },
@@ -44,7 +44,7 @@ useHead({
 <template>
   <NuxtLayout>
     <SeoKit />
-    <OgImage component="Banner" my-custom-title="ByteDream-JueJin" alt="JueJin | ByteDream" />
+    <OgImageScreenshot />
     <NuxtPage />
   </NuxtLayout>
 </template>
diff --git a/frontend/assets/css/main.css b/frontend/assets/css/main.css
new file mode 100644
index 0000000..cebe480
--- /dev/null
+++ b/frontend/assets/css/main.css
@@ -0,0 +1,16 @@
+:root {
+  --primary-color: #316c72;
+  --dark-bg: #18181c;
+}
+
+
+.page-enter-active,
+.page-leave-active {
+	transition: all 0.3s ease-in-out;
+}
+
+.page-enter-from,
+.page-leave-to {
+	opacity: 0;
+	transform: scale(0.99);
+}
\ No newline at end of file
diff --git a/frontend/components/Banner.island.vue b/frontend/components/Banner.island.vue
deleted file mode 100644
index 2fe9e3d..0000000
--- a/frontend/components/Banner.island.vue
+++ /dev/null
@@ -1,37 +0,0 @@
-<script setup lang="ts">
-const props = defineProps({
-  // these will always be provided
-  path: String,
-  title: String,
-  description: String,
-  // anything custom comes here
-  backgroundImage: String,
-})
-</script>
-
-<template>
-  <div class="wrap">
-    <div>
-      <h1>
-        {{ title }}
-      </h1>
-      <p>{{ description }}</p>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.wrap {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: white;
-  background: linear-gradient(to bottom, #30e8bf, #ff8235);
-}
-
-h1 {
-  font-size: 4rem;
-}
-</style>
diff --git a/frontend/components/Nav/index.vue b/frontend/components/Nav/index.vue
index 0fd017c..bd3aefa 100644
--- a/frontend/components/Nav/index.vue
+++ b/frontend/components/Nav/index.vue
@@ -6,9 +6,9 @@ const { data: NavList } = await useFetch('/api/navs')
 <template>
   <div class="view-nav">
     {{ NavList }}
-    <div class="nav-list">
+    <div class="nav-list text-primary">
       <li v-for="item in NavList" :key="item.url">
-        <NuxtLink :to="item.url">
+        <NuxtLink :to="item.url" target="_blank">
           {{ item.name }}
         </NuxtLink>
       </li>
diff --git a/frontend/nuxt.config.ts b/frontend/nuxt.config.ts
index ddaf8e6..ee5d9a6 100644
--- a/frontend/nuxt.config.ts
+++ b/frontend/nuxt.config.ts
@@ -10,13 +10,19 @@ export default defineNuxtConfig({
   experimental: {
     reactivityTransform: true,
     inlineSSRStyles: false,
-    componentIslands: true,
   },
   css: [
     '@unocss/reset/tailwind.css',
+    '@/assets/css/main.css',
   ],
   colorMode: {
-    classSuffix: '',
+    preference: 'system', // default value of $colorMode.preference
+    fallback: 'light', // fallback value if not system preference found
+    hid: 'nuxt-color-mode-script',
+    globalName: '__NUXT_COLOR_MODE__',
+    classPrefix: '',
+    classSuffix: '-mode',
+    storageKey: 'nuxt-color-mode',
   },
   extends: [
     'nuxt-seo-kit',
@@ -28,7 +34,7 @@ export default defineNuxtConfig({
       siteDescription: 'Yet Another Blog In JueJin Style By ByteDream',
       language: 'zh-CN',
       titleSeparator: '·',
-      trailingSlash: true,
+      trailingSlash: false,
       mode: process.env.NODE_ENV,
       strapi_base_url: process.env.NODE_ENV === 'development' ? 'http://127.0.0.1:8886' : 'https://cms.marlene.top',
       graphql_url: process.env.NODE_ENV === 'development' ? 'http://127.0.0.1:8886/graphql' : 'https://cms.marlene.top/graphql',
diff --git a/frontend/unocss.config.ts b/frontend/unocss.config.ts
index d024e38..5f4f0dc 100644
--- a/frontend/unocss.config.ts
+++ b/frontend/unocss.config.ts
@@ -8,11 +8,11 @@ import {
   transformerDirectives,
   transformerVariantGroup,
 } 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: [
     presetUno(),
@@ -28,9 +28,16 @@ export default defineConfig({
         mono: 'DM Mono',
       },
     }),
+
   ],
   transformers: [
     transformerDirectives(),
     transformerVariantGroup(),
   ],
+  theme: {
+    colors: {
+      primary: 'var(--primary-color)',
+      dark_bg: 'var(--dark-bg)',
+    },
+  },
 })
diff --git a/package.json b/package.json
index 6fe8b5d..e4a01f2 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,8 @@
     "postinstall": "nuxi prepare",
     "build": "npx turbo build --no-cache --force",
     "lint:fix": "npx turbo lint:fix",
-    "typecheck": "npx turbo typecheck"
+    "typecheck": "npx turbo typecheck",
+    "start": "npx turbo start"
   },
   "packageManager": "yarn@1.22.19",
   "workspaces": [