diff --git a/apps/client/components/Landing/Banner.vue b/apps/client/components/Landing/Banner.vue
index e0d8821e..b370b11a 100644
--- a/apps/client/components/Landing/Banner.vue
+++ b/apps/client/components/Landing/Banner.vue
@@ -56,7 +56,10 @@
           <div
             class="absolute flex translate-x-0 items-center justify-center text-purple-600 opacity-100 transition group-hover:-translate-x-6 group-hover:opacity-0"
           >
-            <span class="i-ph-star-fill h-5 w-5"></span>
+            <UIcon
+              name="i-ph-star-fill"
+              class="h-5 w-5"
+            ></UIcon>
           </div>
           <span
             class="bg-gradient-to-r from-purple-600 to-gray-300 bg-clip-text pl-6 font-medium text-transparent"
@@ -65,7 +68,10 @@
           <div
             class="absolute right-0 flex translate-x-12 items-center justify-center text-purple-400 opacity-0 transition group-hover:translate-x-6 group-hover:opacity-100"
           >
-            <span class="i-ph-arrow-right h-5 w-5"></span>
+            <UIcon
+              name="i-ph-arrow-right"
+              class="h-5 w-5"
+            ></UIcon>
           </div>
         </div>
       </a>
diff --git a/apps/client/components/Landing/Comments.vue b/apps/client/components/Landing/Comments.vue
index 6d0d3fbc..23088441 100644
--- a/apps/client/components/Landing/Comments.vue
+++ b/apps/client/components/Landing/Comments.vue
@@ -29,7 +29,10 @@
                     {{ "@" + item.account }}
                   </p>
                 </div>
-                <span class="i-simple-icons-twitter h-6 w-6 self-start text-[#03a9f4]"></span>
+                <UIcon
+                  name="i-simple-icons-twitter"
+                  class="h-6 w-6 self-start text-[#03a9f4]"
+                ></UIcon>
               </div>
               <p class="mt-4 text-sm text-gray-700 dark:text-gray-300 lg:text-base">
                 {{ item.chinese }}
@@ -42,9 +45,10 @@
               <div class="mx-auto my-4"></div>
               <div class="mt-4 flex items-center justify-between text-xs">
                 <div class="flex items-center">
-                  <span
-                    class="i-ph-heart-straight-fill mr-2 h-5 w-5 fill-current text-pink-300 dark:text-blue-300"
-                  ></span>
+                  <UIcon
+                    name="i-ph-heart-straight-fill"
+                    class="mr-2 h-5 w-5 fill-current text-pink-300 dark:text-blue-300"
+                  ></UIcon>
                   <span class="text-gray-500 dark:text-gray-400">{{ item.likeCount }} likes</span>
                 </div>
                 <a
diff --git a/apps/client/components/Landing/Contact.vue b/apps/client/components/Landing/Contact.vue
index 6dc1bf1d..99891dcd 100644
--- a/apps/client/components/Landing/Contact.vue
+++ b/apps/client/components/Landing/Contact.vue
@@ -30,7 +30,10 @@
                 target="_blank"
               >
                 <span class="sr-only">Twitter</span>
-                <span class="icon-link icon-link-gray i-simple-icons-x"></span>
+                <UIcon
+                  name="i-simple-icons-x"
+                  class="icon-link icon-link-gray"
+                ></UIcon>
               </a>
             </li>
             <li>
@@ -39,8 +42,10 @@
                 rel="noreferrer"
                 target="_blank"
               >
-                <span class="sr-only">Telegram</span>
-                <span class="icon-link icon-link-gray i-simple-icons-telegram"></span>
+                <UIcon
+                  name="i-simple-icons-telegram"
+                  class="icon-link icon-link-gray"
+                ></UIcon>
               </a>
             </li>
             <li>
@@ -49,8 +54,10 @@
                 rel="noreferrer"
                 target="_blank"
               >
-                <span class="sr-only">GitHub</span>
-                <span class="icon-link icon-link-gray i-simple-icons-github"></span>
+                <UIcon
+                  name="i-simple-icons-github"
+                  class="icon-link icon-link-gray"
+                ></UIcon>
               </a>
             </li>
           </ul>
diff --git a/apps/client/components/Landing/PayCard.vue b/apps/client/components/Landing/PayCard.vue
index fe9014cd..df0a8114 100644
--- a/apps/client/components/Landing/PayCard.vue
+++ b/apps/client/components/Landing/PayCard.vue
@@ -34,7 +34,10 @@
           class="button-unlock"
           v-if="feature.type === '终身付费'"
         >
-          <span class="crown i-ph-crown-simple-fill h-6 w-6 text-[#f09f33]"></span>
+          <UIcon
+            name="i-ph-crown-simple-fill"
+            class="crown h-6 w-6 text-[#f09f33]"
+          ></UIcon>
           解锁 Pro
         </button>
 
@@ -72,10 +75,11 @@
               :key="`feature-${index}-item-${itemIndex}`"
               class="mb-6 mt-6 flex items-center"
             >
-              <span
-                class="i-ph-check-bold mr-2 h-5 w-5"
+              <UIcon
+                name="i-ph-check-bold"
+                class="mr-2 h-5 w-5"
                 :class="item.unique ? 'text-green-500' : 'text-gray-500'"
-              ></span>
+              ></UIcon>
               {{ item.text }}
             </li>
           </ul>
diff --git a/apps/client/components/Landing/Questions.vue b/apps/client/components/Landing/Questions.vue
index 26525439..106d7e47 100644
--- a/apps/client/components/Landing/Questions.vue
+++ b/apps/client/components/Landing/Questions.vue
@@ -20,7 +20,10 @@
             <h2 class="text-base font-medium text-black dark:text-gray-300 lg:text-lg">
               {{ qsItem.title }}
             </h2>
-            <span class="icon i-ph-caret-right-bold h-6 w-6"></span>
+            <UIcon
+              name="i-ph-caret-right-bold"
+              class="icon h-6 w-6"
+            ></UIcon>
           </summary>
           <div
             class="transition-max-height mb-4 overflow-hidden duration-500 ease-in-out dark:text-gray-500"
diff --git a/apps/client/components/common/BackTop.vue b/apps/client/components/common/BackTop.vue
index 6ada225c..d452c151 100644
--- a/apps/client/components/common/BackTop.vue
+++ b/apps/client/components/common/BackTop.vue
@@ -4,9 +4,10 @@
     :data-content="route.path === '/' ? 'Back to Top' : 'Go to Home'"
     @click="scrollToTop"
   >
-    <span
-      class="svgIcon i-ph-arrow-up-bold h-5 w-5 fill-black transition-all duration-300 dark:fill-white"
-    ></span>
+    <UIcon
+      name="i-ph-arrow-up-bold"
+      class="svgIcon h-5 w-5 fill-black transition-all duration-300 dark:fill-white"
+    ></UIcon>
   </button>
 </template>
 
diff --git a/apps/client/components/main/Answer.vue b/apps/client/components/main/Answer.vue
index 61926692..009f8ef8 100644
--- a/apps/client/components/main/Answer.vue
+++ b/apps/client/components/main/Answer.vue
@@ -8,10 +8,11 @@
         @click="handlePlayWordSound(word)"
         >{{ word }}</span
       >
-      <span
-        class="i-ph-speaker-simple-high ml-1 inline-block h-7 w-7 cursor-pointer text-gray-500 hover:text-fuchsia-500"
+      <UIcon
+        name="i-ph-speaker-simple-high"
+        class="ml-1 inline-block h-7 w-7 cursor-pointer text-gray-500 hover:text-fuchsia-500"
         @click="handlePlayEnglishSound"
-      ></span>
+      ></UIcon>
     </div>
     <div class="my-6 text-xl text-gray-500">
       {{ courseStore.currentStatement?.soundmark }}
diff --git a/apps/client/components/main/AnswerTip.vue b/apps/client/components/main/AnswerTip.vue
index 69f96379..cc8f7d70 100644
--- a/apps/client/components/main/AnswerTip.vue
+++ b/apps/client/components/main/AnswerTip.vue
@@ -5,12 +5,14 @@
     <div class="card bg-base-100 shadow-xl">
       <div class="card-body relative">
         <div class="absolute right-2 top-1 mt-0">
-          <button
-            class="h-5 w-5 text-gray-400 outline-none dark:text-gray-300"
+          <UButton
+            color="gray"
+            variant="ghost"
+            icon="i-heroicons-x-mark-20-solid"
             @click="hiddenAnswerTip"
-          >
-            <span class="i-ph-x-bold h-full w-full"></span>
-          </button>
+            tabindex="-1"
+            :ui="{ color: { gray: { ghost: 'dark:hover:bg-gray-600' } } }"
+          />
         </div>
 
         <div class="text-3xl">{{ courseStore.currentStatement?.english }}</div>
diff --git a/apps/client/components/main/LearningTimer.vue b/apps/client/components/main/LearningTimer.vue
index 68448df1..a33505b5 100644
--- a/apps/client/components/main/LearningTimer.vue
+++ b/apps/client/components/main/LearningTimer.vue
@@ -4,10 +4,10 @@
       ref="clockIcon"
       class="mr-1 flex items-center justify-center"
     >
-      <span
-        class="i-ph-alarm-bold"
-        style="width: 30px; height: 30px"
-      ></span>
+      <UIcon
+        name="i-ph-alarm-bold"
+        class="h-8 w-8"
+      ></UIcon>
     </div>
     <p class="text-lg font-bold">{{ formattedTime }}</p>
   </div>
diff --git a/apps/client/components/main/PrevAndNextBtn.vue b/apps/client/components/main/PrevAndNextBtn.vue
index aafdb45a..0a1a71d1 100644
--- a/apps/client/components/main/PrevAndNextBtn.vue
+++ b/apps/client/components/main/PrevAndNextBtn.vue
@@ -8,7 +8,10 @@
         @click="goToPreviousQuestion"
         @mouseenter="$lazyTippy"
       >
-        <span class="i-ph-caret-left h-12 w-12"></span>
+        <UIcon
+          name="i-ph-caret-left"
+          class="h-12 w-12"
+        ></UIcon>
       </button>
     </div>
 
@@ -20,7 +23,10 @@
         @click="goToNextQuestion"
         @mouseenter="$lazyTippy"
       >
-        <span class="i-ph-caret-right h-12 w-12"></span>
+        <UIcon
+          name="i-ph-caret-right"
+          class="h-12 w-12"
+        ></UIcon>
       </button>
     </div>
   </div>