diff --git a/app.vue b/app.vue
index b82d7aa..bc81433 100644
--- a/app.vue
+++ b/app.vue
@@ -34,13 +34,11 @@ useHead({
 </script>
 
 <template>
-  <div>
-    <NuxtLoadingIndicator
-      :height="1"
-      color="repeating-linear-gradient(to right,rgba(192,132,252,1) 0%,rgba(248,113,113,1) 50%,rgba(45,212,191,1) 100%)"
-    />
-    <NuxtLayout>
-      <NuxtPage />
-    </NuxtLayout>
-  </div>
+  <NuxtLoadingIndicator
+    :height="1"
+    color="repeating-linear-gradient(to right,rgba(192,132,252,1) 0%,rgba(248,113,113,1) 50%,rgba(45,212,191,1) 100%)"
+  />
+  <NuxtLayout>
+    <NuxtPage />
+  </NuxtLayout>
 </template>
diff --git a/components/ImgBlurHash.ts b/components/ImgBlurHash.ts
deleted file mode 100644
index 98d4d72..0000000
--- a/components/ImgBlurHash.ts
+++ /dev/null
@@ -1,79 +0,0 @@
-import { decode } from 'blurhash'
-import { getDataUrlFromArr } from '~/composables/utils'
-
-export default defineComponent({
-  inheritAttrs: false,
-  props: {
-    // img or bg (background)
-    mode: {
-      type: String,
-      default: 'img',
-    },
-    blurhash: {
-      type: String,
-      required: false,
-    },
-    src: {
-      type: String,
-      required: true,
-    },
-    srcset: {
-      type: String,
-      required: false,
-    },
-  },
-  setup(props, { attrs }) {
-    const placeholderSrc = ref<string>()
-    const isLoaded = ref(false)
-    const isImgMode = props.mode === 'img'
-
-    onMounted(() => {
-      const img = document.createElement('img')
-      img.onload = () => {
-        isLoaded.value = true
-      }
-      img.src = props.src
-      if (props.srcset)
-        img.srcset = props.srcset
-      setTimeout(() => {
-        isLoaded.value = true
-      }, 3_000)
-
-      if (props.blurhash) {
-        const pixels = decode(props.blurhash, 32, 32)
-        placeholderSrc.value = getDataUrlFromArr(pixels, 32, 32)
-      }
-    })
-
-    const domTag = isImgMode ? 'img' : 'div'
-
-    return () => isLoaded.value || !placeholderSrc.value
-      ? h(domTag, {
-        ...attrs,
-        ...(isImgMode
-          ? {
-              src: props.src,
-              srcset: props.srcset,
-            }
-          : {
-              style: {
-                backgroundImage: `url(${props.src})`,
-                backgroundSize: 'cover',
-              },
-            }),
-      })
-      : h(domTag, {
-        ...attrs,
-        ...(isImgMode
-          ? {
-              src: placeholderSrc.value,
-            }
-          : {
-              style: {
-                backgroundImage: `url(${placeholderSrc.value})`,
-                backgroundSize: 'cover',
-              },
-            }),
-      })
-  },
-})
diff --git a/components/ImgBlurHash.vue b/components/ImgBlurHash.vue
new file mode 100644
index 0000000..558ac1d
--- /dev/null
+++ b/components/ImgBlurHash.vue
@@ -0,0 +1,67 @@
+<script lang="ts" setup>
+import { decode } from 'blurhash'
+
+// Props
+interface Props {
+  mode?: string
+  blurhash?: string
+  src: string
+  srcset?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  mode: 'img',
+})
+
+// Refs and state
+const placeholderSrc = ref<string>()
+const isLoaded = ref(false)
+const isImgMode = props.mode === 'img'
+const attrs = useAttrs()
+const url = computed(() => isLoaded.value || !placeholderSrc.value ? props.src : placeholderSrc.value)
+
+// Utility function for creating a data URL from an array of pixels
+function getDataUrlFromArr(arr: Uint8ClampedArray, w: number, h: number) {
+  if (typeof w === 'undefined' || typeof h === 'undefined')
+    w = h = Math.sqrt(arr.length / 4)
+
+  const canvas = document.createElement('canvas')
+  const ctx = canvas.getContext('2d')!
+
+  canvas.width = w
+  canvas.height = h
+
+  const imgData = ctx.createImageData(w, h)
+  imgData.data.set(arr)
+  ctx.putImageData(imgData, 0, 0)
+
+  return canvas.toDataURL()
+}
+
+onMounted(() => {
+  // Create a temporary image to check when the image has loaded
+  const img = document.createElement('img')
+  img.onload = () => {
+    isLoaded.value = true
+  }
+  img.src = props.src
+  if (props.srcset)
+    img.srcset = props.srcset
+
+  // Fallback to mark as loaded after a timeout in case the image takes too long
+  setTimeout(() => {
+    isLoaded.value = true
+  }, 3000)
+
+  // Decode the blurhash if available
+  if (props.blurhash) {
+    const pixels = decode(props.blurhash, 32, 32)
+    placeholderSrc.value = getDataUrlFromArr(pixels, 32, 32)
+  }
+})
+</script>
+
+<template>
+  <img v-if="isImgMode" v-bind="attrs" :src="url" :srcset>
+  <div v-else v-bind="attrs" :style="{ backgroundImage: `url(${url})`, backgroundSize: 'cover' }" />
+</template>
diff --git a/components/nav/NavFooter.vue b/components/nav/NavFooter.vue
index 68433b1..7b38e70 100644
--- a/components/nav/NavFooter.vue
+++ b/components/nav/NavFooter.vue
@@ -1,5 +1,5 @@
 <template>
-  <footer backdrop-blur py-2 fbc min-w-65ch w-fit ma gap-6>
+  <footer backdrop-blur py-2 fbc min-w-65ch w-fit mxa gap-6>
     <div font-dank text="xs gray4" fsc flex-wrap gap-3>
       <a href="https://beian.miit.gov.cn/" target="_blank">蜀ICP备2022005364号</a>
       <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a>
diff --git a/components/nav/NavHeader.vue b/components/nav/NavHeader.vue
index 5c56151..12c5406 100644
--- a/components/nav/NavHeader.vue
+++ b/components/nav/NavHeader.vue
@@ -1,8 +1,14 @@
 <script lang="ts" setup>
-const routes = reactive<{ icon?: string, path: string, text?: string }[]>([
-  // { path: '/posts', text: 'Blog' },
-  { path: '/projects', text: 'Projects' },
-  // { path: '/talks', text: 'Talks' },
+interface Menu {
+  icon?: string
+  path: string
+  text?: string
+}
+
+const routes = reactive<Menu[]>([
+  { path: '/posts', icon: 'i-ri-blogger-line' },
+  { path: '/projects', icon: 'i-ri-dashboard-line' },
+  { path: '/talks', icon: 'i-ri-file-ppt-line' },
 ])
 
 const route = useRoute()
@@ -10,7 +16,7 @@ const inHome = computed(() => route.path === '/')
 </script>
 
 <template>
-  <header fixed z-9999 top-0 inset-x-0 trans backdrop-blur fcc px-8 pl-4>
+  <header sticky z-999 top-0 trans backdrop-blur fcc px-6>
     <nav w-full :class="inHome ? 'fcc' : 'fbc'">
       <div v-show="!inHome">
         <NuxtLink to="/" title="Home">
@@ -24,7 +30,7 @@ const inHome = computed(() => route.path === '/')
           :title="_route.path.slice(1, 2).toUpperCase() + _route.path.slice(2).toLowerCase()"
         >
           <span v-if="_route.text" icon-text>{{ _route.text }}</span>
-          <div v-if="_route.icon" icon-btn :class="_route.icon" />
+          <i v-if="_route.icon" icon-btn :class="_route.icon" />
         </NuxtLink>
 
         <a title="Twitter" href="https://twitter.com/chris_zyyv" target="_blank" icon-link i-ri:twitter-line />
diff --git a/components/repo/RepoCard.vue b/components/repo/RepoCard.vue
index c9842b5..917e421 100644
--- a/components/repo/RepoCard.vue
+++ b/components/repo/RepoCard.vue
@@ -19,7 +19,7 @@ defineProps<{
     dark-hover="bg-white bg-op-3"
   >
     <a :href="repo.homepage || repo.html_url" target="_blank" decoration-none flex="~ col gap-3" h-full>
-      <h5 m0 fsc gap-1 text-sm>
+      <h5 fsc gap-1 text-sm>
         <i i-ri:git-repository-line />
         <span>{{ repo.name }}</span>
         <span
@@ -32,10 +32,10 @@ defineProps<{
           {{ repo.is_template ? 'Template' : '' }}
         </span>
       </h5>
-      <p m0 flex-1>
+      <p flex-1>
         {{ repo.description }}
       </p>
-      <p fsc gap-4 m0>
+      <p fsc gap-4>
         <span v-if="repo.language" fsc gap-1>
           <i
             w-3
diff --git a/components/repo/RepoPanel.vue b/components/repo/RepoPanel.vue
deleted file mode 100644
index 8b6e9e5..0000000
--- a/components/repo/RepoPanel.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<script lang='ts' setup>
-import type { Repo } from '~/types'
-
-defineProps<{
-  data: Repo[]
-  label: string
-}>()
-</script>
-
-<template>
-  <div v-if="data.length">
-    <h4>
-      {{ label }}
-    </h4>
-    <div grid="~ cols-1 md:cols-2 gap-4">
-      <RepoCard v-for="repo in data" :key="repo.id" :repo="repo" />
-    </div>
-  </div>
-</template>
diff --git a/layouts/default.vue b/layouts/default.vue
index 49c393b..4700e6e 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,6 +1,6 @@
 <template>
   <NavHeader />
-  <main>
+  <main flex="~ col 1">
     <!-- <router-view v-slot="{ Component, route }">
         <transition
           enter-active-class="animate-fade-in animate-duration-500"
diff --git a/nuxt.config.ts b/nuxt.config.ts
index a16fad6..5e8ae53 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -21,10 +21,6 @@ export default defineNuxtConfig({
     '~/styles/vars.css',
   ],
 
-  devtools: {
-    enabled: false,
-  },
-
   // content: {
   //   highlight: {
   //     theme: 'vitesse-dark',
@@ -36,9 +32,10 @@ export default defineNuxtConfig({
   //   },
   //   documentDriven: true,
   // },
-  app: {
-    keepalive: true,
-  },
+
+  // app: {
+  //   keepalive: true,
+  // },
 
   vite: {
     define: {
diff --git a/package.json b/package.json
index 98f1999..f6576e9 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,6 @@
   "packageManager": "pnpm@9.11.0",
   "description": "Chris' blog build with Nuxt3.",
   "author": "Chris <https://github.com/zyyv>",
-  "license": "MIT",
   "homepage": "https://github.com/zyyv/chris.me#readme",
   "repository": {
     "type": "git",
diff --git a/pages/index.vue b/pages/index.vue
index e6804d2..30cf7c1 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -5,7 +5,7 @@ useHead({
 </script>
 
 <template>
-  <div fcc size-screen>
+  <div flex-1 fccc>
     <PersonInfo />
     <!-- <p>
       I have diverse interests, including watching anime, mountain climbing, music appreciation, foreign language acquisition, gaming,
diff --git a/pages/posts.vue b/pages/posts.vue
new file mode 100644
index 0000000..8d26a60
--- /dev/null
+++ b/pages/posts.vue
@@ -0,0 +1,13 @@
+<script lang="ts" setup>
+
+</script>
+
+<template>
+  <div>
+    222
+  </div>
+</template>
+
+<style>
+
+</style>
diff --git a/pages/projects.vue b/pages/projects.vue
index ad4a0ba..cfe30d1 100644
--- a/pages/projects.vue
+++ b/pages/projects.vue
@@ -22,8 +22,15 @@ useHead({
 </script>
 
 <template>
-  <div prose ma pt-18>
+  <div ma max-w-65ch>
     <PageHeader title="Projects" description="List of projects that I am proud of." />
-    <RepoPanel v-for="(repos, key) in repoGroup" :key="key" :label="key" :data="repos" />
+    <template v-for="(repos, key) in repoGroup" :key="key">
+      <h4>
+        {{ key }}
+      </h4>
+      <div grid="~ cols-1 md:cols-2 gap-4">
+        <RepoCard v-for="repo in repos" :key="repo.id" :repo="repo" />
+      </div>
+    </template>
   </div>
 </template>
diff --git a/pages/talks.vue b/pages/talks.vue
new file mode 100644
index 0000000..3dd8bdb
--- /dev/null
+++ b/pages/talks.vue
@@ -0,0 +1,9 @@
+<script lang="ts" setup>
+
+</script>
+
+<template>
+  <div>
+    11
+  </div>
+</template>
diff --git a/server/api/contribution.ts b/server/api/contribution.ts
index 0616cb8..21a45d9 100644
--- a/server/api/contribution.ts
+++ b/server/api/contribution.ts
@@ -6,5 +6,6 @@ export default defineEventHandler(async (event) => {
 
   const { name, year } = getQuery(event)
   const API = `https://github-contributions-api.jogruber.de/v4/${name}?y=${year}`
+
   return $fetch<ContributeData>(API)
 })
diff --git a/server/api/repos.ts b/server/api/repos.ts
index d05e211..f0031d6 100644
--- a/server/api/repos.ts
+++ b/server/api/repos.ts
@@ -1,13 +1,12 @@
-// import { OctokitCtx } from '../constants'
 import type { Repo } from '~/types'
+import { useOctokit } from '../utils/github'
 
 export default defineEventHandler(async () => {
-  // const { data } = await OctokitCtx.rest.repos.listForAuthenticatedUser({
-  //   per_page: 100,
-  //   type: 'owner',
-  //   sort: 'updated',
-  // })
-  const data = await $fetch<Repo[]>('https://api.github.com/users/zyyv/repos?per_page=100&type=owner&sort=updated')
+  const { data } = await useOctokit().request('GET /user/repos', {
+    per_page: 100,
+    type: 'owner',
+    sort: 'updated',
+  })
 
   const publicRepos = data.filter(repo => !repo.private && !repo.archived)
   const publicAndNotForkRepos = publicRepos.filter(repo => !repo.fork)
diff --git a/server/api/user.ts b/server/api/user.ts
index 29e6055..9d78e31 100644
--- a/server/api/user.ts
+++ b/server/api/user.ts
@@ -1,16 +1,6 @@
-// import { OctokitCtx } from '../constants'
-
-import type { User } from '~/types'
+import { useOctokit } from '../utils/github'
 
 export default defineEventHandler(async () => {
-  // const {
-  //   data,
-  // } = await OctokitCtx.rest.users.getAuthenticated()
-
-  // return data
-
-  if (import.meta.dev)
-    return (await import('~/mock/user.json')).default as User
-
-  return $fetch<User>('https://api.github.com/users/zyyv')
+  const { data } = await useOctokit().request('GET /user')
+  return data
 })
diff --git a/server/utils/github.ts b/server/utils/github.ts
new file mode 100644
index 0000000..cb53ef5
--- /dev/null
+++ b/server/utils/github.ts
@@ -0,0 +1,12 @@
+import { Octokit } from 'octokit'
+
+let _octokit: Octokit
+
+export function useOctokit() {
+  if (!_octokit) {
+    _octokit = new Octokit({
+      auth: process.env.Chris_GITHUB_TOKEN,
+    })
+  }
+  return _octokit
+}
diff --git a/styles/main.css b/styles/main.css
index 894eece..045d05a 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -12,6 +12,10 @@ body::-webkit-scrollbar {
   --uno: w0;
 }
 
+#__nuxt{
+  --uno: min-h-screen flex flex-col;
+}
+
 ::selection {
   --uno: text-primary;
 }