diff --git a/i18n.config.ts b/i18n.config.ts
index 8e6d143..8def076 100644
--- a/i18n.config.ts
+++ b/i18n.config.ts
@@ -14,7 +14,7 @@ export default defineI18nConfig(() => ({
       blog: '博客',
       tags: '标签',
       noResult: '未搜索到相关内容',
-      typeToSearch: '输入关键词进行搜索'
+      typeToSearch: '输入关键词进行搜索',
     },
     'zh-TW': {
       about: '關於',
diff --git a/layouts/admin.vue b/layouts/admin.vue
index ee11333..96f3580 100644
--- a/layouts/admin.vue
+++ b/layouts/admin.vue
@@ -33,12 +33,10 @@
       <nav
         class="sticky top-0 z-40 flex h-[--header-height] flex-auto text-black backdrop-blur-2xl dark:text-slate-200"
       >
-        <ul
-          class="mx-auto my-auto flex w-full max-w-screen-xl gap-4"
-        >
+        <ul class="mx-auto my-auto flex w-full max-w-screen-xl gap-4">
           <li class="list-item">
             <NuxtLink
-              class="flex flex-auto rounded px-4 py-2 md:ml-[10px] text-2xl font-extrabold transition-colors dark:text-slate-100"
+              class="flex flex-auto rounded px-4 py-2 text-2xl font-extrabold transition-colors md:ml-[10px] dark:text-slate-100"
               to="/admin"
               title="Home"
               aria-label="Home Page"
@@ -75,20 +73,40 @@
                 class="size-10 transition-colors hover:text-yellow-500 active:text-yellow-400 sm:size-12 dark:hover:text-yellow-100 dark:active:text-yellow-200"
               />
             </button>
-            <dialog ref="tokenDialogRef" class="absolute -translate-x-1/2 bg-white rounded">
+            <dialog
+              ref="tokenDialogRef"
+              class="absolute -translate-x-1/2 rounded bg-white"
+            >
               <div class="flex flex-col">
-              <h2 class="w-36 text-xl font-thin text-center">Set Your Token</h2>
-              <div class="mx-2 mt-1">
-                <textarea v-model="githubToken" autofocus placeholder="Input Your Github Token" class="w-64 resize-none px-2 py-1 border rounded" />
-              </div>
-              <div class="flex mx-2 my-1 justify-between">
-                <button @click="handleTokenSet" class="bg-green-200 px-3 rounded font-light hover:brightness-95 active:brightness-90">OK</button>
-                <button @click="hideTokenDialog" class="bg-red-200 px-3 rounded font-light hover:brightness-95 active:brightness-90">Cancel</button>
-              </div>
+                <h2 class="w-36 text-center text-xl font-thin">
+                  Set Your Token
+                </h2>
+                <div class="mx-2 mt-1">
+                  <textarea
+                    v-model="githubToken"
+                    autofocus
+                    placeholder="Input Your Github Token"
+                    class="w-64 resize-none rounded border px-2 py-1"
+                  />
+                </div>
+                <div class="mx-2 my-1 flex justify-between">
+                  <button
+                    class="rounded bg-green-200 px-3 font-light hover:brightness-95 active:brightness-90"
+                    @click="handleTokenSet"
+                  >
+                    OK
+                  </button>
+                  <button
+                    class="rounded bg-red-200 px-3 font-light hover:brightness-95 active:brightness-90"
+                    @click="hideTokenDialog"
+                  >
+                    Cancel
+                  </button>
+                </div>
               </div>
             </dialog>
           </li>
-          <li class="sm:max-xl:mr-2 my-auto list-item">
+          <li class="my-auto list-item sm:max-xl:mr-2">
             <ColorModeSwitch />
           </li>
           <li class="my-auto mr-2 sm:hidden">
@@ -148,21 +166,21 @@ savedTheme.value = savedTheme.value || '';
 const search = ref<string>('');
 
 const results = ref();
-const localePath = useLocalePath()
+const localePath = useLocalePath();
 
 const showTokenDialog = () => {
   tokenDialogRef.value?.show();
-}
+};
 
 const hideTokenDialog = () => {
-  tokenDialogRef.value?.close()
-}
+  tokenDialogRef.value?.close();
+};
 
 const handleTokenSet = () => {
   localStorage.setItem('github-token', githubToken.value);
-  githubToken.value = ''
+  githubToken.value = '';
   hideTokenDialog();
-}
+};
 
 const debouncedSearch = debounce(async (newSearch: string) => {
   const searchTimeout = setTimeout(() => {
diff --git a/layouts/default.vue b/layouts/default.vue
index c7e0758..96ee9e4 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -55,12 +55,10 @@
       <nav
         class="sticky top-0 z-40 flex h-[--header-height] flex-auto text-black backdrop-blur-2xl dark:text-slate-200"
       >
-        <ul
-          class="mx-auto my-auto flex w-full max-w-screen-xl gap-4"
-        >
+        <ul class="mx-auto my-auto flex w-full max-w-screen-xl gap-4">
           <li class="list-item">
             <NuxtLink
-              class="flex flex-auto rounded px-4 py-2 md:ml-[10px] text-2xl font-extrabold transition-colors dark:text-slate-100"
+              class="flex flex-auto rounded px-4 py-2 text-2xl font-extrabold transition-colors md:ml-[10px] dark:text-slate-100"
               to="/"
               title="Home"
               aria-label="Home Page"
@@ -229,15 +227,15 @@
             v-else-if="results?.length === 0 && isSearchEnded"
             class="flex flex-grow items-center justify-center"
           >
-            <span class="flex flex-grow justify-center text-center text-5xl"
-              >{{ $t('noResult') }}</span
-            >
+            <span class="flex flex-grow justify-center text-center text-5xl">{{
+              $t('noResult')
+            }}</span>
           </div>
         </div>
         <div v-else class="flex flex-grow items-center justify-center">
-          <span class="flex flex-grow justify-center text-center text-5xl"
-            >{{ $t('typeToSearch') }}</span
-          >
+          <span class="flex flex-grow justify-center text-center text-5xl">{{
+            $t('typeToSearch')
+          }}</span>
         </div>
       </div>
     </dialog>
@@ -261,7 +259,7 @@ const search = ref<string>('');
 const dialogRef = ref<HTMLDialogElement>();
 
 const results = ref();
-const localePath = useLocalePath()
+const localePath = useLocalePath();
 
 const debouncedSearch = debounce(async (newSearch: string) => {
   const searchTimeout = setTimeout(() => {
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 5329c7f..3bd9698 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -141,4 +141,4 @@ export default defineNuxtConfig({
     name: 'Vardar Example Site',
     description: 'Example site of Vardar for demenstration',
   },
-});
\ No newline at end of file
+});
diff --git a/pages/admin/about.client.vue b/pages/admin/about.client.vue
index 751002f..4c107d5 100644
--- a/pages/admin/about.client.vue
+++ b/pages/admin/about.client.vue
@@ -1,73 +1,92 @@
 <template>
-  <div class="flex flex-col w-[calc(100vw-10px)] justify-center items-center">
-    <div class="max-w-7xl w-full flex">
-      <div class="w-full flex mx-2 bg-gray-200 rounded-t">
-        <button @click="updateFile" class="bg-green-200 text-slate-800 hover:brightness-95 active:brightness-90 px-3 py-2 rounded my-2 ml-auto mr-2">Update</button>
+  <div class="flex w-[calc(100vw-10px)] flex-col items-center justify-center">
+    <div class="flex w-full max-w-7xl">
+      <div class="mx-2 flex w-full rounded-t bg-gray-200">
+        <button
+          class="my-2 ml-auto mr-2 rounded bg-green-200 px-3 py-2 text-slate-800 hover:brightness-95 active:brightness-90"
+          @click="updateFile"
+        >
+          Update
+        </button>
       </div>
     </div>
-    <div class="max-w-7xl px-2 grid grid-rows-2 xl:grid-rows-1 xl:grid-cols-2 max-h-[820px] overflow-auto">
-      <MonacoEditor lang="markdown" class="flex-grow max-h-[820px] border overflow-auto" v-model="inputText"
-        placeholder="Enter text to render" />
-      <MDC class="flex-grow max-h-[820px] border overflow-auto" :value="processedInputText"></MDC>
+    <div
+      class="grid max-h-[820px] max-w-7xl grid-rows-2 overflow-auto px-2 xl:grid-cols-2 xl:grid-rows-1"
+    >
+      <MonacoEditor
+        v-model="inputText"
+        lang="markdown"
+        class="max-h-[820px] flex-grow overflow-auto border"
+        placeholder="Enter text to render"
+      />
+      <MDC
+        class="max-h-[820px] flex-grow overflow-auto border"
+        :value="processedInputText"
+      />
     </div>
   </div>
 </template>
 
 <script setup>
-definePageMeta({
-  layout: 'admin'
-})
+import { ref, onMounted } from 'vue';
 
-import { ref, onMounted } from 'vue'
-const inputText = ref('# loading...')
-const route = useRoute()
-const path = route.path
-const stripedPath = path.replace(/^\/admin/, '');
-const sha = ref('')
-const articleUrl = 'https://api.github.com/repos/hanyujie2002/Vardar-Nuxt-Blog/contents/content' + '/about' + '.md?ref=main'
-const token = localStorage.getItem('github-token')
+definePageMeta({
+  layout: 'admin',
+});
+const inputText = ref('# loading...');
+const sha = ref('');
+const articleUrl =
+  'https://api.github.com/repos/hanyujie2002/Vardar-Nuxt-Blog/contents/content' +
+  '/about' +
+  '.md?ref=main';
+const token = localStorage.getItem('github-token');
 
 onMounted(async () => {
   const response = await fetch(articleUrl, {
     headers: {
-      'Authorization': `token ${token}`,
+      Authorization: `token ${token}`,
     },
-    cache: 'no-cache'
-  })
+    cache: 'no-cache',
+  });
 
-  const data = await response.json()
+  const data = await response.json();
   sha.value = data.sha;
 
-  const base64Content = data.content
-  const decodedContent = new TextDecoder('utf-8').decode(Uint8Array.from(atob(base64Content), c => c.charCodeAt(0)))
+  const base64Content = data.content;
+  const decodedContent = new TextDecoder('utf-8').decode(
+    Uint8Array.from(atob(base64Content), (c) => c.charCodeAt(0))
+  );
 
-  inputText.value = decodedContent
-})
+  inputText.value = decodedContent;
+});
 
-const processedInputText = computed(() => inputText.value.length > 0 ? inputText.value : 'No content yet');
+const processedInputText = computed(() =>
+  inputText.value.length > 0 ? inputText.value : 'No content yet'
+);
 
 const updateFile = async () => {
   const updatedContent = new TextEncoder().encode(inputText.value);
-  const base64Content = btoa(String.fromCharCode(...new Uint8Array(updatedContent)))
+  const base64Content = btoa(
+    String.fromCharCode(...new Uint8Array(updatedContent))
+  );
 
   const response = await fetch(articleUrl, {
     method: 'PUT',
     headers: {
-      'Authorization': `token ${token}`,
+      Authorization: `token ${token}`,
       'Content-Type': 'application/json',
     },
     body: JSON.stringify({
       message: 'Test: Updating blog content',
       content: base64Content,
       sha: sha.value,
-    })
-  })
+    }),
+  });
 
   if (response.ok) {
-    console.log('File updated successfully!')
+    console.log('File updated successfully!');
   } else {
-    console.error('File update failed', response.statusText)
+    console.error('File update failed', response.statusText);
   }
-}
+};
 </script>
-
diff --git a/pages/admin/blog/[...slug].client.vue b/pages/admin/blog/[...slug].client.vue
index 3c862ea..d60f929 100644
--- a/pages/admin/blog/[...slug].client.vue
+++ b/pages/admin/blog/[...slug].client.vue
@@ -1,72 +1,95 @@
 <template>
-  <div class="flex flex-col w-[calc(100vw-10px)] justify-center items-center">
-    <div class="max-w-7xl w-full flex">
-      <div class="w-full flex mx-2 bg-gray-200 rounded-t">
-        <button @click="updateFile" class="bg-green-200 text-slate-800 hover:brightness-95 active:brightness-90 px-3 py-2 rounded font-extralight my-2 ml-auto mr-2">Update</button>
+  <div class="flex w-[calc(100vw-10px)] flex-col items-center justify-center">
+    <div class="flex w-full max-w-7xl">
+      <div class="mx-2 flex w-full rounded-t bg-gray-200">
+        <button
+          class="my-2 ml-auto mr-2 rounded bg-green-200 px-3 py-2 font-extralight text-slate-800 hover:brightness-95 active:brightness-90"
+          @click="updateFile"
+        >
+          Update
+        </button>
       </div>
     </div>
-    <div class="max-w-7xl px-2 grid grid-rows-2 xl:grid-rows-1 xl:grid-cols-2 max-h-[820px] overflow-auto">
-      <MonacoEditor lang="markdown" class="flex-grow max-h-[820px] border overflow-auto" v-model="inputText"
-        placeholder="Enter text to render" />
-      <MDC class="flex-grow max-h-[820px] border overflow-auto" :value="processedInputText"></MDC>
+    <div
+      class="grid max-h-[820px] max-w-7xl grid-rows-2 overflow-auto px-2 xl:grid-cols-2 xl:grid-rows-1"
+    >
+      <MonacoEditor
+        v-model="inputText"
+        lang="markdown"
+        class="max-h-[820px] flex-grow overflow-auto border"
+        placeholder="Enter text to render"
+      />
+      <MDC
+        class="max-h-[820px] flex-grow overflow-auto border"
+        :value="processedInputText"
+      />
     </div>
   </div>
 </template>
 
 <script setup>
-definePageMeta({
-  layout: 'admin'
-})
+import { ref, onMounted } from 'vue';
 
-import { ref, onMounted } from 'vue'
-const inputText = ref('# loading...')
-const route = useRoute()
-const path = route.path
+definePageMeta({
+  layout: 'admin',
+});
+const inputText = ref('# loading...');
+const route = useRoute();
+const path = route.path;
 const stripedPath = path.replace(/^\/admin/, '');
-const sha = ref('')
-const articleUrl = 'https://api.github.com/repos/hanyujie2002/Vardar-Nuxt-Blog/contents/content' + stripedPath + '.md?ref=main'
-const token = localStorage.getItem('github-token')
+const sha = ref('');
+const articleUrl =
+  'https://api.github.com/repos/hanyujie2002/Vardar-Nuxt-Blog/contents/content' +
+  stripedPath +
+  '.md?ref=main';
+const token = localStorage.getItem('github-token');
 
 onMounted(async () => {
   const response = await fetch(articleUrl, {
     headers: {
-      'Authorization': `token ${token}`,
+      Authorization: `token ${token}`,
     },
-    cache: 'no-cache'
-  })
+    cache: 'no-cache',
+  });
 
-  const data = await response.json()
+  const data = await response.json();
   sha.value = data.sha;
 
-  const base64Content = data.content
-  const decodedContent = new TextDecoder('utf-8').decode(Uint8Array.from(atob(base64Content), c => c.charCodeAt(0)))
+  const base64Content = data.content;
+  const decodedContent = new TextDecoder('utf-8').decode(
+    Uint8Array.from(atob(base64Content), (c) => c.charCodeAt(0))
+  );
 
-  inputText.value = decodedContent
-})
+  inputText.value = decodedContent;
+});
 
-const processedInputText = computed(() => inputText.value.length > 0 ? inputText.value : 'No content yet');
+const processedInputText = computed(() =>
+  inputText.value.length > 0 ? inputText.value : 'No content yet'
+);
 
 const updateFile = async () => {
   const updatedContent = new TextEncoder().encode(inputText.value);
-  const base64Content = btoa(String.fromCharCode(...new Uint8Array(updatedContent)))
+  const base64Content = btoa(
+    String.fromCharCode(...new Uint8Array(updatedContent))
+  );
 
   const response = await fetch(articleUrl, {
     method: 'PUT',
     headers: {
-      'Authorization': `token ${token}`,
+      Authorization: `token ${token}`,
       'Content-Type': 'application/json',
     },
     body: JSON.stringify({
       message: 'Test: Updating blog content',
       content: base64Content,
       sha: sha.value,
-    })
-  })
+    }),
+  });
 
   if (response.ok) {
-    console.log('File updated successfully!')
+    console.log('File updated successfully!');
   } else {
-    console.error('File update failed', response.statusText)
+    console.error('File update failed', response.statusText);
   }
-}
+};
 </script>
diff --git a/pages/admin/index.client.vue b/pages/admin/index.client.vue
index 5f6fb5a..a3a412d 100644
--- a/pages/admin/index.client.vue
+++ b/pages/admin/index.client.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="w-[calc(100vw-10px)] dark:text-slate-300 break-all">
-    <div class="max-w-4xl px-4 mx-auto table w-full">
+  <div class="w-[calc(100vw-10px)] break-all dark:text-slate-300">
+    <div class="mx-auto table w-full max-w-4xl px-4">
       <div class="table-header-group">
-        <div class="table-row backdrop-brightness-90 rounded">
+        <div class="table-row rounded backdrop-brightness-90">
           <div class="table-cell"><div class="px-2 py-2">Title</div></div>
           <div class="table-cell"><div class="px-2 py-2">Date</div></div>
           <div class="table-cell"><div class="px-2 py-2">Operate</div></div>
@@ -10,10 +10,34 @@
       </div>
 
       <div class="table-row-group">
-        <div class="table-row transition-colors rounded hover:backdrop-brightness-95" v-for="file in sortedFiles">
-          <div class="table-cell"><div class="px-2 py-2">{{ file.content.data.title }}</div></div>
-          <div class="table-cell"><div class="px-2 py-2">{{ new Date(file.content.data.date).toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' }) }}</div></div>
-          <div class="table-cell"><div class="px-2 py-2"><NuxtLink class="hover:text-themeColor-500 dark:hover:text-themeColor-600" :to="getApiPath(file.path)">Edit</NuxtLink></div></div>
+        <div
+          v-for="file in sortedFiles"
+          :key="file.content.data.title"
+          class="table-row rounded transition-colors hover:backdrop-brightness-95"
+        >
+          <div class="table-cell">
+            <div class="px-2 py-2">{{ file.content.data.title }}</div>
+          </div>
+          <div class="table-cell">
+            <div class="px-2 py-2">
+              {{
+                new Date(file.content.data.date).toLocaleDateString(undefined, {
+                  year: 'numeric',
+                  month: 'short',
+                  day: 'numeric',
+                })
+              }}
+            </div>
+          </div>
+          <div class="table-cell">
+            <div class="px-2 py-2">
+              <NuxtLink
+                class="hover:text-themeColor-500 dark:hover:text-themeColor-600"
+                :to="getApiPath(file.path)"
+                >Edit</NuxtLink
+              >
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -22,47 +46,46 @@
 
 <script setup>
 definePageMeta({
-  layout: 'admin'
-})
+  layout: 'admin',
+});
 
-import { ref, onMounted } from 'vue'
-import { parseMarkdown } from '@nuxtjs/mdc/runtime'
-const inputText = ref('# loading...')
-
-const files = ref([])
+const files = ref([]);
 
 onMounted(async () => {
-  const repoUrl = 'https://api.github.com/repos/hanyujie2002/Vardar-Nuxt-Blog/contents/content/blog'
-  const token = localStorage.getItem('github-token')
+  const repoUrl =
+    'https://api.github.com/repos/hanyujie2002/Vardar-Nuxt-Blog/contents/content/blog';
+  const token = localStorage.getItem('github-token');
 
   const response = await fetch(repoUrl, {
     headers: {
-      'Authorization': `token ${token}`,
-    }
-  })
-  const fileList = await response.json()
+      Authorization: `token ${token}`,
+    },
+  });
+  const fileList = await response.json();
 
   for (const file of fileList) {
     const fileResponse = await fetch(file.git_url, {
       headers: {
-        'Authorization': `token ${token}`,
-        'Accept': 'application/vnd.github.v3.raw',
-      }
-    })
+        Authorization: `token ${token}`,
+        Accept: 'application/vnd.github.v3.raw',
+      },
+    });
 
-    const fileContent = await fileResponse.text()
+    const fileContent = await fileResponse.text();
 
-    const ast = await parseMarkdown(fileContent)
+    const ast = await parseMarkdown(fileContent);
     file.content = ast;
-    files.value.push(file)
+    files.value.push(file);
   }
-})
+});
 
 const sortedFiles = computed(() => {
-  return files.value.sort((a, b) => new Date(b.content.data.date) - new Date(a.content.data.date))
-})
+  return [...files.value].sort(
+    (a, b) => new Date(b.content.data.date) - new Date(a.content.data.date)
+  );
+});
 
 const getApiPath = (path) => {
   return '/admin' + path.replace(/^content/, '').replace(/\.md$/, '');
-}
+};
 </script>
diff --git a/pages/blog/page/[pageNumber].vue b/pages/blog/page/[pageNumber].vue
index 58a3a61..cf7d0c9 100644
--- a/pages/blog/page/[pageNumber].vue
+++ b/pages/blog/page/[pageNumber].vue
@@ -32,7 +32,7 @@
             <div
               v-for="tag in article.tags"
               :key="tag"
-              class="text-blue-400 hover:brightness-75 mr-2 dark:text-blue-600 dark:hover:brightness-125"
+              class="mr-2 text-blue-400 hover:brightness-75 dark:text-blue-600 dark:hover:brightness-125"
             >
               <NuxtLink :to="`/tags/${tag}`">#{{ tag }}</NuxtLink>
             </div>
diff --git a/pages/tags/[tag].vue b/pages/tags/[tag].vue
index c64ad7f..9b22517 100644
--- a/pages/tags/[tag].vue
+++ b/pages/tags/[tag].vue
@@ -5,7 +5,7 @@
     >
       <NuxtLink
         :to="`/tags/${currentTag}`"
-        class="mb-8 sm:max-xl:ml-[10px] mt-4 px-4 font-serif text-5xl font-extralight tracking-wide animate-in fade-in slide-in-from-bottom dark:text-slate-200"
+        class="mb-8 mt-4 px-4 font-serif text-5xl font-extralight tracking-wide animate-in fade-in slide-in-from-bottom sm:max-xl:ml-[10px] dark:text-slate-200"
         >{{ currentTag }}</NuxtLink
       >
       <li v-for="article in articles" :key="article._path" data-aos="fade-in">
@@ -33,7 +33,7 @@
             <div
               v-for="tag in article.tags"
               :key="tag"
-              class="text-blue-400 hover:brightness-75 mr-2 dark:text-blue-600 dark:hover:brightness-125"
+              class="mr-2 text-blue-400 hover:brightness-75 dark:text-blue-600 dark:hover:brightness-125"
             >
               <NuxtLink :to="`/tags/${tag}`">#{{ tag }}</NuxtLink>
             </div>