diff --git a/packages/admin/app.vue b/packages/admin/app.vue
index 6449362..07deffe 100644
--- a/packages/admin/app.vue
+++ b/packages/admin/app.vue
@@ -23,9 +23,7 @@
           :class="{ 'bg-blue-a': route.path === '/' }"
           @click="viewToggleFullNavigationBar(false)"
         >
-          <ClientOnly>
-            <font-awesome-icon :icon="['fas', 'house']" class="max-lg:landscape:!h-4 !h-5" />
-          </ClientOnly>
+          <font-awesome-icon :icon="['fas', 'house']" class="max-lg:landscape:!h-4 !h-5" />
         </NuxtLink>
       </section>
       <section class="z-50 flex flex-col max-lg:landscape:gap-y-2 gap-y-4 items-end">
@@ -41,9 +39,7 @@
           @click="viewToggleFullNavigationBar(false)"
         >
           <span class="aspect-square flex flex-row justify-center items-center pl-0.5 h-14">
-            <ClientOnly>
-              <font-awesome-icon :icon="['fas', 'pen-to-square']" class="max-lg:landscape:!h-5 !h-6" />
-            </ClientOnly>
+            <font-awesome-icon :icon="['fas', 'pen-to-square']" class="max-lg:landscape:!h-5 !h-6" />
           </span>
           <span class="min-w-max">
             歌单编辑
@@ -57,42 +53,40 @@
           transition duration-300 active:scale-95"
           @click="backendLogout"
         >
-          <ClientOnly>
-            <transition-group
-              tag="span"
-              class="aspect-square grid grid-areas-stack place-items-center pl-0.5 h-14"
-              enter-from-class="opacity-0"
-              enter-active-class="transition-opacity duration-200"
-              leave-active-class="transition-opacity duration-200"
-              leave-to-class="opacity-0"
-            >
-              <font-awesome-icon
-                v-if="backendAuthState === ''"
-                key="idle"
-                :icon="['fas', 'right-from-bracket']"
-                class="max-lg:landscape:!h-5 !h-6"
-              />
-              <font-awesome-icon
-                v-if="backendAuthState === 'processing'"
-                key="processing"
-                :icon="['fas', 'circle-notch']"
-                spin
-                class="max-lg:landscape:!h-5 !h-6"
-              />
-              <font-awesome-icon
-                v-if="backendAuthState === 'succeeded'"
-                key="succeeded"
-                :icon="['fas', 'check']"
-                class="max-lg:landscape:!h-5 !h-6"
-              />
-              <font-awesome-icon
-                v-if="backendAuthState === 'failed'"
-                key="failed"
-                :icon="['fas', 'circle-exclamation']"
-                class="max-lg:landscape:!h-5 !h-6"
-              />
-            </transition-group>
-          </ClientOnly>
+          <transition-group
+            tag="span"
+            class="aspect-square grid grid-areas-stack place-items-center pl-0.5 h-14"
+            enter-from-class="opacity-0"
+            enter-active-class="transition-opacity duration-200"
+            leave-active-class="transition-opacity duration-200"
+            leave-to-class="opacity-0"
+          >
+            <font-awesome-icon
+              v-if="backendAuthState === ''"
+              key="idle"
+              :icon="['fas', 'right-from-bracket']"
+              class="max-lg:landscape:!h-5 !h-6"
+            />
+            <font-awesome-icon
+              v-if="backendAuthState === 'processing'"
+              key="processing"
+              :icon="['fas', 'circle-notch']"
+              spin
+              class="max-lg:landscape:!h-5 !h-6"
+            />
+            <font-awesome-icon
+              v-if="backendAuthState === 'succeeded'"
+              key="succeeded"
+              :icon="['fas', 'check']"
+              class="max-lg:landscape:!h-5 !h-6"
+            />
+            <font-awesome-icon
+              v-if="backendAuthState === 'failed'"
+              key="failed"
+              :icon="['fas', 'circle-exclamation']"
+              class="max-lg:landscape:!h-5 !h-6"
+            />
+          </transition-group>
           <transition-group
             tag="span"
             class="grid grid-areas-stack justify-items-start"
@@ -113,15 +107,13 @@
           transition duration-300 active:scale-95"
           @click="viewToggleFullNavigationBar()"
         >
-          <ClientOnly>
-            <font-awesome-icon
-              :icon="['fas', 'angle-right']"
-              class="max-lg:landscape:!h-4 !h-5 transition-transform duration-300"
-              :style="[ viewFullNavigationBarToggles === 0 ?
-                '' :
-                `transform: rotate(${180 * viewFullNavigationBarToggles}deg)` ]"
-            />
-          </ClientOnly>
+          <font-awesome-icon
+            :icon="['fas', 'angle-right']"
+            class="max-lg:landscape:!h-4 !h-5 transition-transform duration-300"
+            :style="[ viewFullNavigationBarToggles === 0 ?
+              '' :
+              `transform: rotate(${180 * viewFullNavigationBarToggles}deg)` ]"
+          />
         </button>
       </section>
     </nav>
diff --git a/packages/admin/components/PlaylistList.vue b/packages/admin/components/PlaylistList.vue
index 98d1e30..7ec73b2 100644
--- a/packages/admin/components/PlaylistList.vue
+++ b/packages/admin/components/PlaylistList.vue
@@ -22,34 +22,32 @@
               new Set(props.dataChanges?.map(song => song.$id))"
         >
         <span class="grid place-items-center w-5">
-          <ClientOnly>
-            <svg class="hidden">
-              <symbol id="far-square">
-                <font-awesome-icon :icon="['far', 'square']" />
-              </symbol>
-            </svg>
-            <svg class="hidden">
-              <symbol id="fas-square-check">
-                <font-awesome-icon :icon="['fas', 'square-check']" />
-              </symbol>
-            </svg>
-            <svg v-if="selectedIds.size === 0" class="!h-5 rounded-lg transition group-active:scale-90">
-              <use href="#far-square" />
-            </svg>
-            <font-awesome-icon
-              v-if="selectedIds.size !== 0 &&
-                selectedIds.size !== (props.type === 'main' ? props.data.length : props.dataChanges?.length)"
-              :icon="['fas', 'square-minus']"
-              class="!h-5 text-blue group-hover:text-blue-a rounded-lg transition group-active:scale-90"
-            />
-            <svg
-              v-if="(props.type === 'main' ? props.data.length : props.dataChanges?.length) !== 0 &&
-                selectedIds.size === (props.type === 'main' ? props.data.length : props.dataChanges?.length)"
-              class="!h-5 text-blue group-hover:text-blue-a rounded-lg transition group-active:scale-90"
-            >
-              <use href="#fas-square-check" />
-            </svg>
-          </ClientOnly>
+          <svg class="hidden">
+            <symbol id="far-square">
+              <font-awesome-icon :icon="['far', 'square']" />
+            </symbol>
+          </svg>
+          <svg class="hidden">
+            <symbol id="fas-square-check">
+              <font-awesome-icon :icon="['fas', 'square-check']" />
+            </symbol>
+          </svg>
+          <svg v-if="selectedIds.size === 0" class="!h-5 rounded-lg transition group-active:scale-90">
+            <use href="#far-square" />
+          </svg>
+          <font-awesome-icon
+            v-if="selectedIds.size !== 0 &&
+              selectedIds.size !== (props.type === 'main' ? props.data.length : props.dataChanges?.length)"
+            :icon="['fas', 'square-minus']"
+            class="!h-5 text-blue group-hover:text-blue-a rounded-lg transition group-active:scale-90"
+          />
+          <svg
+            v-if="(props.type === 'main' ? props.data.length : props.dataChanges?.length) !== 0 &&
+              selectedIds.size === (props.type === 'main' ? props.data.length : props.dataChanges?.length)"
+            class="!h-5 text-blue group-hover:text-blue-a rounded-lg transition group-active:scale-90"
+          >
+            <use href="#fas-square-check" />
+          </svg>
         </span>
       </label>
       <button
@@ -163,9 +161,7 @@
             title="添加歌曲"
             @click="create"
           >
-            <ClientOnly>
-              <font-awesome-icon :icon="['fas', 'plus']" />
-            </ClientOnly>
+            <font-awesome-icon :icon="['fas', 'plus']" />
           </button>
           <button
             class="aspect-square flex flex-row justify-center items-center h-full rounded-lg hover:bg-gray
@@ -173,9 +169,7 @@
             title="删除歌曲"
             @click="selectedIds.forEach(id => { emit('stageChanges', { $id: id }); selectedIds.delete(id) })"
           >
-            <ClientOnly>
-              <font-awesome-icon :icon="['fas', 'minus']" />
-            </ClientOnly>
+            <font-awesome-icon :icon="['fas', 'minus']" />
           </button>
         </span>
         <span v-if="props.type === 'changes'" class="flex flex-row gap-x-1 h-full">
@@ -185,18 +179,14 @@
             title="撤销改动"
             @click="emit('undoChanges', selectedIds); selectedIds.clear()"
           >
-            <ClientOnly>
-              <font-awesome-icon :icon="['fas', 'rotate-left']" />
-            </ClientOnly>
+            <font-awesome-icon :icon="['fas', 'rotate-left']" />
           </button>
           <button
             class="aspect-square flex flex-row justify-center items-center h-full rounded-lg hover:bg-gray
             transition active:scale-95 duration-200"
             title="发布改动"
           >
-            <ClientOnly>
-              <font-awesome-icon :icon="['fas', 'cloud-arrow-up']" />
-            </ClientOnly>
+            <font-awesome-icon :icon="['fas', 'cloud-arrow-up']" />
           </button>
         </span>
       </div>
@@ -222,14 +212,12 @@
               pl-2.5 portrait:pl-2.5 portrait:pr-1 py-2.5 h-full rounded-lg cursor-pointer"
             >
               <input type="checkbox" class="hidden" @click="selectedIds.has(song.$id) ? selectedIds.delete(song.$id) : selectedIds.add(song.$id)">
-              <ClientOnly>
-                <svg v-if="!selectedIds.has(song.$id)" class="!h-5 rounded-lg transition group-active:scale-90">
-                  <use href="#far-square" />
-                </svg>
-                <svg v-if="selectedIds.has(song.$id)" class="!h-5 text-blue group-hover:text-blue-a rounded-lg transition group-active:scale-90">
-                  <use href="#fas-square-check" />
-                </svg>
-              </ClientOnly>
+              <svg v-if="!selectedIds.has(song.$id)" class="!h-5 rounded-lg transition group-active:scale-90">
+                <use href="#far-square" />
+              </svg>
+              <svg v-if="selectedIds.has(song.$id)" class="!h-5 text-blue group-hover:text-blue-a rounded-lg transition group-active:scale-90">
+                <use href="#fas-square-check" />
+              </svg>
             </label>
             <transition-group
               tag="span"
diff --git a/packages/admin/nuxt.config.ts b/packages/admin/nuxt.config.ts
index 11093e9..8404a70 100644
--- a/packages/admin/nuxt.config.ts
+++ b/packages/admin/nuxt.config.ts
@@ -22,6 +22,10 @@ export default defineNuxtConfig({
     }
   },
 
+  build: {
+    transpile: ['@fortawesome/vue-fontawesome']
+  },
+
   css: [
     '@/../../assets/css/main.css',
     '@fortawesome/fontawesome-svg-core/styles.css'
diff --git a/packages/home/app.vue b/packages/home/app.vue
index db10a56..8e6485f 100644
--- a/packages/home/app.vue
+++ b/packages/home/app.vue
@@ -24,15 +24,11 @@
             transition active:scale-95"
           >
             <span class="aspect-square flex flex-row justify-center items-center h-8">
-              <ClientOnly>
-                <font-awesome-icon :icon="['fab', 'bilibili']" />
-              </ClientOnly>
+              <font-awesome-icon :icon="['fab', 'bilibili']" />
             </span>
             哔哩哔哩主页
             <span class="aspect-square flex flex-row justify-center items-center h-8">
-              <ClientOnly>
-                <font-awesome-icon :icon="['fas', 'arrow-up-right-from-square']" />
-              </ClientOnly>
+              <font-awesome-icon :icon="['fas', 'arrow-up-right-from-square']" />
             </span>
           </NuxtLink>
           <NuxtLink
@@ -44,25 +40,19 @@
             transition active:scale-95"
           >
             <span v-if="!biliApiLiveStatus" class="aspect-square flex flex-row justify-center items-center h-8">
-              <ClientOnly>
-                <font-awesome-icon :icon="['fas', 'podcast']" class="!h-5" />
-              </ClientOnly>
+              <font-awesome-icon :icon="['fas', 'podcast']" class="!h-5" />
             </span>
             <span v-if="biliApiLiveStatus" class="aspect-square flex flex-col justify-center items-center h-8">
-              <ClientOnly>
-                <span class="overflow-hidden min-h-[1.2rem] max-h-[1.2rem]">
-                  <font-awesome-icon :icon="['fas', 'podcast']" class="!h-[1.125rem]" />
-                </span>
-                <span class="text-[0.5rem] leading-snug">
-                  直播中
-                </span>
-              </ClientOnly>
+              <span class="overflow-hidden min-h-[1.2rem] max-h-[1.2rem]">
+                <font-awesome-icon :icon="['fas', 'podcast']" class="!h-[1.125rem]" />
+              </span>
+              <span class="text-[0.5rem] leading-snug">
+                直播中
+              </span>
             </span>
             直播间
             <span class="aspect-square flex flex-row justify-center items-center h-8">
-              <ClientOnly>
-                <font-awesome-icon :icon="['fas', 'arrow-up-right-from-square']" />
-              </ClientOnly>
+              <font-awesome-icon :icon="['fas', 'arrow-up-right-from-square']" />
             </span>
           </NuxtLink>
           <NuxtLink
@@ -74,15 +64,11 @@
             transition active:scale-95"
           >
             <span class="aspect-square flex flex-row justify-center items-center h-8">
-              <ClientOnly>
-                <font-awesome-icon :icon="['fas', 'video']" />
-              </ClientOnly>
+              <font-awesome-icon :icon="['fas', 'video']" />
             </span>
             录播组
             <span class="aspect-square flex flex-row justify-center items-center h-8">
-              <ClientOnly>
-                <font-awesome-icon :icon="['fas', 'arrow-up-right-from-square']" />
-              </ClientOnly>
+              <font-awesome-icon :icon="['fas', 'arrow-up-right-from-square']" />
             </span>
           </NuxtLink>
           <button
@@ -93,15 +79,11 @@
             @click="scrollToPlaylist"
           >
             <span class="aspect-square flex flex-row justify-center items-center h-8">
-              <ClientOnly>
-                <font-awesome-icon :icon="['fas', 'list']" />
-              </ClientOnly>
+              <font-awesome-icon :icon="['fas', 'list']" />
             </span>
             歌单
             <span class="aspect-square flex flex-row justify-center items-center h-8">
-              <ClientOnly>
-                <font-awesome-icon :icon="['fas', 'arrow-down']" />
-              </ClientOnly>
+              <font-awesome-icon :icon="['fas', 'arrow-down']" />
             </span>
           </button>
         </div>
@@ -116,9 +98,7 @@
           class="grid grid-areas-stack place-items-center
           h-36 landscape:h-20 landscape:xl:h-36 landscape:2xl:h-40 landscape:3xl:h-48 landscape:5xl:h-52"
         >
-          <ClientOnly>
-            <font-awesome-icon :icon="['fas', 'music']" class="min-h-full text-pink-l" />
-          </ClientOnly>
+          <font-awesome-icon :icon="['fas', 'music']" class="min-h-full text-pink-l" />
           <h2 class="-mr-2 max-xl:landscape:text-3xl portrait:text-5xl text-6xl font-light tracking-wider text-brown">
             歌单
           </h2>
@@ -239,9 +219,7 @@
                 title="随机排列"
                 @click="viewPlaylistDataUpdate(['shuffle'])"
               >
-                <ClientOnly>
-                  <font-awesome-icon :icon="['fas', 'dice']" />
-                </ClientOnly>
+                <font-awesome-icon :icon="['fas', 'dice']" />
               </button>
             </div>
             <transition-group
diff --git a/packages/home/nuxt.config.ts b/packages/home/nuxt.config.ts
index 299ebd7..9f45829 100644
--- a/packages/home/nuxt.config.ts
+++ b/packages/home/nuxt.config.ts
@@ -21,6 +21,10 @@ export default defineNuxtConfig({
     }
   },
 
+  build: {
+    transpile: ['@fortawesome/vue-fontawesome']
+  },
+
   css: [
     '@/../../assets/css/main.css',
     '@fortawesome/fontawesome-svg-core/styles.css'