diff --git a/ui/.prettierignore b/ui/.prettierignore
index 3909f451c..00f2944be 100644
--- a/ui/.prettierignore
+++ b/ui/.prettierignore
@@ -1,2 +1,3 @@
 pnpm-lock.yaml
-packages/api-client
+packages/api-client/src
+docs
\ No newline at end of file
diff --git a/ui/README.md b/ui/README.md
index 97533c506..e60bbf4c4 100644
--- a/ui/README.md
+++ b/ui/README.md
@@ -16,7 +16,7 @@
 <a href="https://gitpod.io/#https://github.com/halo-dev/console"><img alt="Gitpod ready-to-code" src="https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod&style=flat-square"/></a>
 </p>
 
-------------------------------
+---
 
 当前仓库已经将 `halo-admin` 改为了 `console`。但对于 Halo 1.x 版本，依旧保持 halo-admin 的概念。
 
@@ -27,7 +27,7 @@ npm install -g pnpm@9
 ```
 
 ```bash
-pnpm install 
+pnpm install
 ```
 
 ```bash
diff --git a/ui/console-src/modules/contents/comments/components/CommentListItem.vue b/ui/console-src/modules/contents/comments/components/CommentListItem.vue
index 1250c12fe..0b1ab81f8 100644
--- a/ui/console-src/modules/contents/comments/components/CommentListItem.vue
+++ b/ui/console-src/modules/contents/comments/components/CommentListItem.vue
@@ -286,13 +286,13 @@ const { operationItems } = useOperationItemExtensionPoint<ListedComment>(
                 :owner="comment?.owner"
                 @click="detailModalVisible = true"
               />
-              <span class="text-sm text-gray-900 whitespace-nowrap">
+              <span class="whitespace-nowrap text-sm text-gray-900">
                 {{ $t("core.comment.text.commented_on") }}
               </span>
               <RouterLink
                 v-tooltip="`${subjectRefResult.label}`"
                 :to="subjectRefResult.route || $route"
-                class="inline-block truncate max-w-md text-sm font-medium text-gray-900 hover:text-gray-600"
+                class="inline-block max-w-md truncate text-sm font-medium text-gray-900 hover:text-gray-600"
               >
                 {{ subjectRefResult.title }}
               </RouterLink>
@@ -311,7 +311,7 @@ const { operationItems } = useOperationItemExtensionPoint<ListedComment>(
             >
             <div class="flex items-center gap-3 text-xs">
               <span
-                class="select-none cursor-pointer text-gray-700 hover:text-gray-900"
+                class="cursor-pointer select-none text-gray-700 hover:text-gray-900"
                 @click="handleToggleShowReplies"
               >
                 {{
@@ -328,7 +328,7 @@ const { operationItems } = useOperationItemExtensionPoint<ListedComment>(
               />
               <HasPermission :permissions="['system:comments:manage']">
                 <span
-                  class="select-none cursor-pointer text-gray-700 hover:text-gray-900"
+                  class="cursor-pointer select-none text-gray-700 hover:text-gray-900"
                   @click="replyModal = true"
                 >
                   {{ $t("core.comment.operations.reply.button") }}
diff --git a/ui/console-src/modules/contents/comments/components/OwnerButton.vue b/ui/console-src/modules/contents/comments/components/OwnerButton.vue
index b4214177d..4af266426 100644
--- a/ui/console-src/modules/contents/comments/components/OwnerButton.vue
+++ b/ui/console-src/modules/contents/comments/components/OwnerButton.vue
@@ -8,7 +8,7 @@ defineProps<{
 </script>
 <template>
   <div
-    class="-m-1 p-1 inline-flex items-center gap-1.5 hover:bg-gray-100 rounded-lg cursor-pointer transition-colors"
+    class="-m-1 inline-flex cursor-pointer items-center gap-1.5 rounded-lg p-1 transition-colors hover:bg-gray-100"
   >
     <VAvatar circle :src="owner?.avatar" :alt="owner?.displayName" size="xs" />
     <span class="text-sm font-medium text-gray-900">
diff --git a/ui/console-src/modules/contents/comments/components/ReplyDetailModal.vue b/ui/console-src/modules/contents/comments/components/ReplyDetailModal.vue
index d7298e2c0..caf5afcd7 100644
--- a/ui/console-src/modules/contents/comments/components/ReplyDetailModal.vue
+++ b/ui/console-src/modules/contents/comments/components/ReplyDetailModal.vue
@@ -174,7 +174,7 @@ const websiteOfAnonymous = computed(() => {
         >
           <OwnerButton :owner="comment.owner" />
           <pre
-            class="whitespace-pre-wrap mt-2 break-words text-sm text-gray-900"
+            class="mt-2 whitespace-pre-wrap break-words text-sm text-gray-900"
             >{{ comment.comment.spec.content }}</pre
           >
         </VDescriptionItem>
diff --git a/ui/console-src/modules/contents/comments/components/ReplyFormItems.vue b/ui/console-src/modules/contents/comments/components/ReplyFormItems.vue
index 60cf4eefc..f68e623d3 100644
--- a/ui/console-src/modules/contents/comments/components/ReplyFormItems.vue
+++ b/ui/console-src/modules/contents/comments/components/ReplyFormItems.vue
@@ -71,7 +71,7 @@ watch(
     value=""
     :validation="['length:0,1024', required ? 'required' : ''].join('|')"
   ></FormKit>
-  <div class="flex justify-end w-full sm:max-w-lg">
+  <div class="flex w-full justify-end sm:max-w-lg">
     <VDropdown :classes="['!p-0']" @show="handleCreateEmojiPicker">
       <IconMotionLine
         class="h-5 w-5 cursor-pointer text-gray-500 transition-all hover:text-gray-900"
diff --git a/ui/console-src/modules/contents/comments/components/ReplyListItem.vue b/ui/console-src/modules/contents/comments/components/ReplyListItem.vue
index b0224212a..0d7667228 100644
--- a/ui/console-src/modules/contents/comments/components/ReplyListItem.vue
+++ b/ui/console-src/modules/contents/comments/components/ReplyListItem.vue
@@ -223,7 +223,7 @@ const { operationItems } = useOperationItemExtensionPoint<ListedReply>(
                 :owner="reply?.owner"
                 @click="detailModalVisible = true"
               />
-              <span class="text-sm text-gray-900 whitespace-nowrap">
+              <span class="whitespace-nowrap text-sm text-gray-900">
                 {{ $t("core.comment.text.replied_below") }}
               </span>
             </div>
@@ -242,7 +242,7 @@ const { operationItems } = useOperationItemExtensionPoint<ListedReply>(
             <HasPermission :permissions="['system:comments:manage']">
               <div class="flex items-center gap-3 text-xs">
                 <span
-                  class="select-none cursor-pointer text-gray-700 hover:text-gray-900"
+                  class="cursor-pointer select-none text-gray-700 hover:text-gray-900"
                   @click="replyModal = true"
                 >
                   {{ $t("core.comment.operations.reply.button") }}
diff --git a/ui/console-src/modules/contents/pages/DeletedSinglePageList.vue b/ui/console-src/modules/contents/pages/DeletedSinglePageList.vue
index 813283596..cb2ce45b5 100644
--- a/ui/console-src/modules/contents/pages/DeletedSinglePageList.vue
+++ b/ui/console-src/modules/contents/pages/DeletedSinglePageList.vue
@@ -310,10 +310,10 @@ watch(
               <VEntityField v-if="singlePage.page.spec.cover">
                 <template #description>
                   <div
-                    class="aspect-h-2 rounded-md overflow-hidden aspect-w-3 w-20"
+                    class="aspect-h-2 aspect-w-3 w-20 overflow-hidden rounded-md"
                   >
                     <img
-                      class="object-cover w-full h-full"
+                      class="h-full w-full object-cover"
                       :src="
                         generateThumbnailUrl(singlePage.page.spec.cover, 's')
                       "
diff --git a/ui/console-src/modules/contents/pages/components/entity-fields/CoverField.vue b/ui/console-src/modules/contents/pages/components/entity-fields/CoverField.vue
index 6e5846644..81a47065b 100644
--- a/ui/console-src/modules/contents/pages/components/entity-fields/CoverField.vue
+++ b/ui/console-src/modules/contents/pages/components/entity-fields/CoverField.vue
@@ -14,9 +14,9 @@ withDefaults(
 <template>
   <VEntityField v-if="singlePage.page.spec.cover">
     <template #description>
-      <div class="aspect-h-2 rounded-md overflow-hidden aspect-w-3 w-20">
+      <div class="aspect-h-2 aspect-w-3 w-20 overflow-hidden rounded-md">
         <img
-          class="object-cover w-full h-full"
+          class="h-full w-full object-cover"
           :src="generateThumbnailUrl(singlePage.page.spec.cover, 's')"
         />
       </div>
diff --git a/ui/console-src/modules/contents/posts/DeletedPostList.vue b/ui/console-src/modules/contents/posts/DeletedPostList.vue
index 00c91f4a4..c086b82fb 100644
--- a/ui/console-src/modules/contents/posts/DeletedPostList.vue
+++ b/ui/console-src/modules/contents/posts/DeletedPostList.vue
@@ -321,10 +321,10 @@ watch(
               <VEntityField v-if="post.post.spec.cover">
                 <template #description>
                   <div
-                    class="aspect-h-2 rounded-md overflow-hidden aspect-w-3 w-20"
+                    class="aspect-h-2 aspect-w-3 w-20 overflow-hidden rounded-md"
                   >
                     <img
-                      class="object-cover w-full h-full"
+                      class="h-full w-full object-cover"
                       :src="generateThumbnailUrl(post.post.spec.cover, 's')"
                     />
                   </div>
diff --git a/ui/console-src/modules/contents/posts/categories/components/CategoryListItem.vue b/ui/console-src/modules/contents/posts/categories/components/CategoryListItem.vue
index e2adb7736..03d053fb5 100644
--- a/ui/console-src/modules/contents/posts/categories/components/CategoryListItem.vue
+++ b/ui/console-src/modules/contents/posts/categories/components/CategoryListItem.vue
@@ -86,7 +86,7 @@ const handleOpenCreateByParentModal = () => {
 </script>
 <template>
   <div
-    class="px-4 py-3 hover:bg-gray-50 w-full group items-center flex justify-between relative"
+    class="group relative flex w-full items-center justify-between px-4 py-3 hover:bg-gray-50"
   >
     <div>
       <div
@@ -98,7 +98,7 @@ const handleOpenCreateByParentModal = () => {
       >
         <IconList class="h-3.5 w-3.5" />
       </div>
-      <div class="gap-1 flex flex-col">
+      <div class="flex flex-col gap-1">
         <div class="inline-flex items-center gap-2">
           <span class="truncate text-sm font-medium text-gray-900">
             {{ categoryTreeNode.spec.displayName }}
diff --git a/ui/console-src/modules/contents/posts/components/entity-fields/CoverField.vue b/ui/console-src/modules/contents/posts/components/entity-fields/CoverField.vue
index 9f6e4882c..42c26f2d4 100644
--- a/ui/console-src/modules/contents/posts/components/entity-fields/CoverField.vue
+++ b/ui/console-src/modules/contents/posts/components/entity-fields/CoverField.vue
@@ -14,9 +14,9 @@ withDefaults(
 <template>
   <VEntityField v-if="post.post.spec.cover">
     <template #description>
-      <div class="aspect-h-2 rounded-md overflow-hidden aspect-w-3 w-20">
+      <div class="aspect-h-2 aspect-w-3 w-20 overflow-hidden rounded-md">
         <img
-          class="object-cover w-full h-full"
+          class="h-full w-full object-cover"
           :src="generateThumbnailUrl(post.post.spec.cover, 's')"
         />
       </div>
diff --git a/ui/console-src/modules/dashboard/DashboardDesigner.vue b/ui/console-src/modules/dashboard/DashboardDesigner.vue
index 4d2f9ffab..c35cd9611 100644
--- a/ui/console-src/modules/dashboard/DashboardDesigner.vue
+++ b/ui/console-src/modules/dashboard/DashboardDesigner.vue
@@ -329,7 +329,7 @@ function handleCopyFromLayout(breakpoint: string) {
     </h2>
     <div
       class="hidden sm:block"
-      :class="{ 'opacity-50 !cursor-progress': isLoading }"
+      :class="{ '!cursor-progress opacity-50': isLoading }"
     >
       <VTabbar
         :active-id="selectBreakpoint"
diff --git a/ui/console-src/modules/dashboard/components/ActionButton.vue b/ui/console-src/modules/dashboard/components/ActionButton.vue
index ee0b765fd..6ca86eb2e 100644
--- a/ui/console-src/modules/dashboard/components/ActionButton.vue
+++ b/ui/console-src/modules/dashboard/components/ActionButton.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts"></script>
 <template>
   <div
-    class="h-full text-base w-8 flex cursor-pointer items-center justify-center hover:opacity-80 text-white transition-all"
+    class="flex h-full w-8 cursor-pointer items-center justify-center text-base text-white transition-all hover:opacity-80"
   >
     <slot />
   </div>
diff --git a/ui/console-src/modules/dashboard/components/WidgetCard.vue b/ui/console-src/modules/dashboard/components/WidgetCard.vue
index 39d01d70e..1d5237fcd 100644
--- a/ui/console-src/modules/dashboard/components/WidgetCard.vue
+++ b/ui/console-src/modules/dashboard/components/WidgetCard.vue
@@ -6,22 +6,22 @@ defineProps<{
 </script>
 <template>
   <div
-    class="flex flex-col rounded-lg overflow-hidden ring-1 ring-[#eaecf0] shadow-sm bg-white w-full h-full"
+    class="flex h-full w-full flex-col overflow-hidden rounded-lg bg-white shadow-sm ring-1 ring-[#eaecf0]"
   >
     <div
       v-if="title || $slots.title || $slots.actions"
-      class="flex flex-none justify-between h-10 items-center px-4 border-b border-[#eaecf0]"
+      class="flex h-10 flex-none items-center justify-between border-b border-[#eaecf0] px-4"
     >
       <slot name="title">
-        <div class="text-base font-medium flex-1 shrink">
+        <div class="flex-1 shrink text-base font-medium">
           {{ title }}
         </div>
       </slot>
-      <div class="text-base font-medium flex-none">
+      <div class="flex-none text-base font-medium">
         <slot name="actions" />
       </div>
     </div>
-    <div :class="bodyClass" class="flex-1 min-h-0 shrink w-full">
+    <div :class="bodyClass" class="min-h-0 w-full flex-1 shrink">
       <slot />
     </div>
   </div>
diff --git a/ui/console-src/modules/dashboard/components/WidgetEditableItem.vue b/ui/console-src/modules/dashboard/components/WidgetEditableItem.vue
index 1d92e82b1..9b0c59761 100644
--- a/ui/console-src/modules/dashboard/components/WidgetEditableItem.vue
+++ b/ui/console-src/modules/dashboard/components/WidgetEditableItem.vue
@@ -62,7 +62,7 @@ function handleSaveConfig(config: Record<string, unknown>) {
       @update:config="handleSaveConfig"
     />
     <div
-      class="absolute z-[100] hidden h-8 right-0 top-0 rounded-tr-lg bg-gray-100 overflow-hidden group-hover/grid-item:inline-flex items-center"
+      class="absolute right-0 top-0 z-[100] hidden h-8 items-center overflow-hidden rounded-tr-lg bg-gray-100 group-hover/grid-item:inline-flex"
     >
       <ActionButton
         v-if="widgetDefinition?.configFormKitSchema"
diff --git a/ui/console-src/modules/dashboard/components/WidgetHubModal.vue b/ui/console-src/modules/dashboard/components/WidgetHubModal.vue
index f464ce696..d43934267 100644
--- a/ui/console-src/modules/dashboard/components/WidgetHubModal.vue
+++ b/ui/console-src/modules/dashboard/components/WidgetHubModal.vue
@@ -24,14 +24,17 @@ const groupedWidgetDefinitions = computed(() => {
     (widget) => activeId.value === "" || widget.group === activeId.value
   );
 
-  const groups = filteredWidgets?.reduce((acc, widget) => {
-    const key = `${widget.defaultSize.w}-${widget.defaultSize.h}`;
-    if (!acc[key]) {
-      acc[key] = [];
-    }
-    acc[key].push(widget);
-    return acc;
-  }, {} as Record<string, DashboardWidgetDefinition[]>);
+  const groups = filteredWidgets?.reduce(
+    (acc, widget) => {
+      const key = `${widget.defaultSize.w}-${widget.defaultSize.h}`;
+      if (!acc[key]) {
+        acc[key] = [];
+      }
+      acc[key].push(widget);
+      return acc;
+    },
+    {} as Record<string, DashboardWidgetDefinition[]>
+  );
 
   return Object.entries(groups || {})
     .map(([key, widgets]) => {
@@ -48,11 +51,14 @@ const groupedWidgetDefinitions = computed(() => {
 });
 
 const groupWidgetDefinitions = computed(() => {
-  return availableWidgetDefinitions?.value?.reduce((acc, item) => {
-    acc[item.group] = acc[item.group] || [];
-    acc[item.group].push(item);
-    return acc;
-  }, {} as Record<string, DashboardWidgetDefinition[]>);
+  return availableWidgetDefinitions?.value?.reduce(
+    (acc, item) => {
+      acc[item.group] = acc[item.group] || [];
+      acc[item.group].push(item);
+      return acc;
+    },
+    {} as Record<string, DashboardWidgetDefinition[]>
+  );
 });
 
 const groupWidgetDefinitionsKeys = computed(() => {
@@ -80,7 +86,7 @@ const groupWidgetDefinitionsKeys = computed(() => {
       ]"
       type="outline"
     ></VTabbar>
-    <div class="mt-4 flex flex-col gap-5 -m-2">
+    <div class="-m-2 mt-4 flex flex-col gap-5">
       <div
         v-for="(group, index) in groupedWidgetDefinitions"
         :key="index"
@@ -99,7 +105,7 @@ const groupWidgetDefinitionsKeys = computed(() => {
             class="cursor-pointer p-2"
             @click="emit('add-widget', item)"
           >
-            <div class="pointer-events-none w-full h-full">
+            <div class="pointer-events-none h-full w-full">
               <component
                 :is="item.component"
                 preview-mode
diff --git a/ui/console-src/modules/dashboard/widgets/presets/comments/CommentItem.vue b/ui/console-src/modules/dashboard/widgets/presets/comments/CommentItem.vue
index 7f0717f86..27c5a1b13 100644
--- a/ui/console-src/modules/dashboard/widgets/presets/comments/CommentItem.vue
+++ b/ui/console-src/modules/dashboard/widgets/presets/comments/CommentItem.vue
@@ -81,13 +81,13 @@ const handleDelete = async () => {
                 :owner="comment?.owner"
                 @click="detailModalVisible = true"
               />
-              <span class="text-sm text-gray-900 whitespace-nowrap">
+              <span class="whitespace-nowrap text-sm text-gray-900">
                 {{ $t("core.comment.text.commented_on") }}
               </span>
               <RouterLink
                 v-tooltip="`${subjectRefResult.label}`"
                 :to="subjectRefResult.route || $route"
-                class="inline-block truncate max-w-md text-sm font-medium text-gray-900 hover:text-gray-600"
+                class="inline-block max-w-md truncate text-sm font-medium text-gray-900 hover:text-gray-600"
               >
                 {{ subjectRefResult.title }}
               </RouterLink>
@@ -101,19 +101,19 @@ const handleDelete = async () => {
               </a>
             </div>
             <pre
-              class="whitespace-pre-wrap break-words text-sm text-gray-900 line-clamp-4"
+              class="line-clamp-4 whitespace-pre-wrap break-words text-sm text-gray-900"
               >{{ comment?.comment?.spec.content }}</pre
             >
             <HasPermission :permissions="['system:comments:manage']">
               <div class="flex items-center gap-3 text-xs">
                 <span
-                  class="select-none cursor-pointer text-gray-700 hover:text-gray-900"
+                  class="cursor-pointer select-none text-gray-700 hover:text-gray-900"
                   @click="detailModalVisible = true"
                 >
                   {{ $t("core.comment.operations.review.button") }}
                 </span>
                 <span
-                  class="select-none cursor-pointer text-gray-700 hover:text-red-600"
+                  class="cursor-pointer select-none text-gray-700 hover:text-red-600"
                   @click="handleDelete"
                 >
                   {{ $t("core.common.buttons.delete") }}
diff --git a/ui/console-src/modules/dashboard/widgets/presets/core/iframe/IframeWidget.vue b/ui/console-src/modules/dashboard/widgets/presets/core/iframe/IframeWidget.vue
index 037d870e8..e91d4d4d3 100644
--- a/ui/console-src/modules/dashboard/widgets/presets/core/iframe/IframeWidget.vue
+++ b/ui/console-src/modules/dashboard/widgets/presets/core/iframe/IframeWidget.vue
@@ -20,7 +20,7 @@ defineProps<{
   >
     <div
       v-if="!config.url"
-      class="flex items-center justify-center w-full h-full"
+      class="flex h-full w-full items-center justify-center"
     >
       <span class="text-sm text-gray-600">
         {{ $t("core.dashboard.widgets.presets.iframe.empty.title") }}
@@ -32,7 +32,7 @@ defineProps<{
       sandbox="allow-scripts allow-same-origin"
       credentialless
       referrerpolicy="no-referrer"
-      class="w-full h-full border-none"
+      class="h-full w-full border-none"
       :class="{
         'pointer-events-none': editMode,
       }"
diff --git a/ui/console-src/modules/dashboard/widgets/presets/core/quick-action/QuickActionWidget.vue b/ui/console-src/modules/dashboard/widgets/presets/core/quick-action/QuickActionWidget.vue
index 6773b2dc0..c7500ac40 100644
--- a/ui/console-src/modules/dashboard/widgets/presets/core/quick-action/QuickActionWidget.vue
+++ b/ui/console-src/modules/dashboard/widgets/presets/core/quick-action/QuickActionWidget.vue
@@ -217,12 +217,12 @@ const availableItems = computed(() => {
   <WidgetCard v-bind="$attrs" :body-class="['@container', '!overflow-auto']">
     <template #title>
       <div class="inline-flex items-center gap-2">
-        <div class="text-base font-medium flex-1 shrink">
+        <div class="flex-1 shrink text-base font-medium">
           {{ $t("core.dashboard.widgets.presets.quickaction.title") }}
         </div>
         <IconSettings
           v-if="editMode"
-          class="hover:text-gray-600 cursor-pointer"
+          class="cursor-pointer hover:text-gray-600"
           @click="configVisible = true"
         />
       </div>
diff --git a/ui/console-src/modules/dashboard/widgets/presets/core/stack/StackWidget.vue b/ui/console-src/modules/dashboard/widgets/presets/core/stack/StackWidget.vue
index eb12e1f75..2ea90b139 100644
--- a/ui/console-src/modules/dashboard/widgets/presets/core/stack/StackWidget.vue
+++ b/ui/console-src/modules/dashboard/widgets/presets/core/stack/StackWidget.vue
@@ -81,7 +81,7 @@ async function handleSave(config: StackWidgetConfig) {
     v-if="!config.widgets?.length"
     :title="$t('core.dashboard.widgets.presets.stack.title')"
   >
-    <div class="flex items-center justify-center w-full h-full">
+    <div class="flex h-full w-full items-center justify-center">
       <VButton @click="configVisible = true">
         {{
           $t(
@@ -93,21 +93,21 @@ async function handleSave(config: StackWidgetConfig) {
   </WidgetCard>
   <div
     v-else
-    class="bg-white w-full h-full rounded-lg relative group/stack-item overflow-hidden"
+    class="group/stack-item relative h-full w-full overflow-hidden rounded-lg bg-white"
     @mouseenter="stopAutoPlay"
     @mouseleave="startAutoPlay"
   >
     <div
       v-if="editMode || previewMode"
-      class="flex absolute z-10 bg-white inset-0 rounded-t-lg flex-none justify-between h-10 items-center px-4 border-b border-[#eaecf0]"
+      class="absolute inset-0 z-10 flex h-10 flex-none items-center justify-between rounded-t-lg border-b border-[#eaecf0] bg-white px-4"
     >
       <div class="inline-flex items-center gap-2">
-        <div class="text-base font-medium flex-1 shrink">
+        <div class="flex-1 shrink text-base font-medium">
           {{ $t("core.dashboard.widgets.presets.stack.title") }}
         </div>
         <IconSettings
           v-if="editMode"
-          class="hover:text-gray-600 cursor-pointer"
+          class="cursor-pointer hover:text-gray-600"
           @click="configVisible = true"
         />
       </div>
@@ -123,7 +123,7 @@ async function handleSave(config: StackWidgetConfig) {
     </TransitionGroup>
 
     <div
-      class="absolute bottom-2 left-0 right-0 z-10 flex justify-center group-hover/stack-item:opacity-100 opacity-0 transition-all duration-200"
+      class="absolute bottom-2 left-0 right-0 z-10 flex justify-center opacity-0 transition-all duration-200 group-hover/stack-item:opacity-100"
     >
       <IndexIndicator
         :index="index"
diff --git a/ui/console-src/modules/dashboard/widgets/presets/core/stack/StackWidgetConfigModal.vue b/ui/console-src/modules/dashboard/widgets/presets/core/stack/StackWidgetConfigModal.vue
index c4f8f8877..ef37b20d5 100644
--- a/ui/console-src/modules/dashboard/widgets/presets/core/stack/StackWidgetConfigModal.vue
+++ b/ui/console-src/modules/dashboard/widgets/presets/core/stack/StackWidgetConfigModal.vue
@@ -137,7 +137,7 @@ function handleMoveWidget(widget: SimpleWidget, direction: -1 | 1) {
             )
           "
         />
-        <div class="py-4 flex flex-col gap-4">
+        <div class="flex flex-col gap-4 py-4">
           <label
             class="formkit-label block text-sm font-medium text-gray-700 formkit-invalid:text-red-500"
           >
@@ -147,7 +147,7 @@ function handleMoveWidget(widget: SimpleWidget, direction: -1 | 1) {
               )
             }}
           </label>
-          <div class="flex flex-col gap-2 border border-dashed p-2 rounded-lg">
+          <div class="flex flex-col gap-2 rounded-lg border border-dashed p-2">
             <WidgetEditableItem
               v-for="(widget, index) in widgets"
               :key="widget.id"
@@ -173,7 +173,7 @@ function handleMoveWidget(widget: SimpleWidget, direction: -1 | 1) {
               </template>
             </WidgetEditableItem>
 
-            <div class="flex justify-left">
+            <div class="justify-left flex">
               <VButton @click="widgetsHubModalVisible = true">
                 {{ $t("core.common.buttons.add") }}
               </VButton>
diff --git a/ui/console-src/modules/dashboard/widgets/presets/core/stack/components/IndexIndicator.vue b/ui/console-src/modules/dashboard/widgets/presets/core/stack/components/IndexIndicator.vue
index 0c3f005d3..785ad0cf9 100644
--- a/ui/console-src/modules/dashboard/widgets/presets/core/stack/components/IndexIndicator.vue
+++ b/ui/console-src/modules/dashboard/widgets/presets/core/stack/components/IndexIndicator.vue
@@ -15,11 +15,11 @@ const emit = defineEmits<{
 
 <template>
   <div
-    class="bg-white rounded-full p-1 flex gap-4 items-center hover:shadow transition-all"
+    class="flex items-center gap-4 rounded-full bg-white p-1 transition-all hover:shadow"
   >
     <button
       v-if="total > 1"
-      class="w-7 h-7 flex items-center justify-center rounded-full bg-transparent hover:bg-gray-100 transition-all duration-200 focus:outline-none group"
+      class="group flex h-7 w-7 items-center justify-center rounded-full bg-transparent transition-all duration-200 hover:bg-gray-100 focus:outline-none"
       @click="emit('prev')"
     >
       <IconArrowLeft class="text-gray-400 group-hover:text-gray-900" />
@@ -33,9 +33,9 @@ const emit = defineEmits<{
         @click="emit('update:index', i - 1)"
       >
         <div
-          class="w-2 h-2 rounded-full transition-all duration-200 ease-in-out transform"
+          class="h-2 w-2 transform rounded-full transition-all duration-200 ease-in-out"
           :class="{
-            'bg-primary scale-150': index === i - 1,
+            'scale-150 bg-primary': index === i - 1,
             'bg-gray-300 group-hover:bg-gray-400': index !== i - 1,
           }"
         />
@@ -44,7 +44,7 @@ const emit = defineEmits<{
 
     <button
       v-if="total > 1"
-      class="w-7 h-7 flex items-center justify-center rounded-full bg-transparent hover:bg-gray-100 transition-all duration-200 focus:outline-none group"
+      class="group flex h-7 w-7 items-center justify-center rounded-full bg-transparent transition-all duration-200 hover:bg-gray-100 focus:outline-none"
       @click="emit('next')"
     >
       <IconArrowRight class="text-gray-400 group-hover:text-gray-900" />
diff --git a/ui/console-src/modules/dashboard/widgets/presets/core/stack/components/WidgetEditableItem.vue b/ui/console-src/modules/dashboard/widgets/presets/core/stack/components/WidgetEditableItem.vue
index 889b44f5d..df6f979d2 100644
--- a/ui/console-src/modules/dashboard/widgets/presets/core/stack/components/WidgetEditableItem.vue
+++ b/ui/console-src/modules/dashboard/widgets/presets/core/stack/components/WidgetEditableItem.vue
@@ -55,7 +55,7 @@ function handleSaveConfig(config: Record<string, unknown>) {
       @update:config="handleSaveConfig"
     />
     <div
-      class="absolute hidden h-8 right-0 top-0 rounded-tr-lg bg-gray-100 overflow-hidden group-hover/grid-item:inline-flex items-center"
+      class="absolute right-0 top-0 hidden h-8 items-center overflow-hidden rounded-tr-lg bg-gray-100 group-hover/grid-item:inline-flex"
     >
       <slot name="actions" />
       <ActionButton
diff --git a/ui/console-src/modules/dashboard/widgets/presets/core/stack/components/WidgetViewItem.vue b/ui/console-src/modules/dashboard/widgets/presets/core/stack/components/WidgetViewItem.vue
index 0b6d54368..98ed5a31d 100644
--- a/ui/console-src/modules/dashboard/widgets/presets/core/stack/components/WidgetViewItem.vue
+++ b/ui/console-src/modules/dashboard/widgets/presets/core/stack/components/WidgetViewItem.vue
@@ -24,7 +24,7 @@ const widgetDefinition = computed(() => {
 <template>
   <div
     v-if="currentUserHasPermission(widgetDefinition?.permissions)"
-    class="relative w-full h-full"
+    class="relative h-full w-full"
   >
     <component :is="widgetDefinition?.component" :config="item.config" />
   </div>
diff --git a/ui/console-src/modules/interface/menus/Menus.vue b/ui/console-src/modules/interface/menus/Menus.vue
index ea4bb45b7..f95173717 100644
--- a/ui/console-src/modules/interface/menus/Menus.vue
+++ b/ui/console-src/modules/interface/menus/Menus.vue
@@ -319,7 +319,7 @@ function getMenuItemRefDisplayName(menuItem: MenuTreeItem) {
             >
               <template #default="{ node }">
                 <div
-                  class="px-4 py-3 hover:bg-gray-50 w-full group items-center flex justify-between relative"
+                  class="group relative flex w-full items-center justify-between px-4 py-3 hover:bg-gray-50"
                 >
                   <div>
                     <div
@@ -331,7 +331,7 @@ function getMenuItemRefDisplayName(menuItem: MenuTreeItem) {
                     >
                       <IconList class="h-3.5 w-3.5" />
                     </div>
-                    <div class="gap-1 flex flex-col">
+                    <div class="flex flex-col gap-1">
                       <div class="inline-flex items-center gap-2">
                         <span
                           class="truncate text-sm font-medium text-gray-900"
diff --git a/ui/console-src/modules/system/users/components/GrantPermissionModal.vue b/ui/console-src/modules/system/users/components/GrantPermissionModal.vue
index d1179c77f..a76cb4463 100644
--- a/ui/console-src/modules/system/users/components/GrantPermissionModal.vue
+++ b/ui/console-src/modules/system/users/components/GrantPermissionModal.vue
@@ -140,12 +140,12 @@ const currentRoleTemplates = computed(() => {
       <div v-if="selectedRoleNames.length">
         <div
           v-if="selectedRoleNames.includes(SUPER_ROLE_NAME)"
-          class="text-sm text-gray-600 mt-4"
+          class="mt-4 text-sm text-gray-600"
         >
           {{ $t("core.user.grant_permission_modal.roles_preview.all") }}
         </div>
 
-        <div v-else-if="currentRoleTemplates?.length" class="space-y-3 mt-4">
+        <div v-else-if="currentRoleTemplates?.length" class="mt-4 space-y-3">
           <span class="text-sm text-gray-600">
             {{ $t("core.user.grant_permission_modal.roles_preview.includes") }}
           </span>
diff --git a/ui/console-src/modules/system/users/components/RolesView.vue b/ui/console-src/modules/system/users/components/RolesView.vue
index b07d881bf..ecaa2a9eb 100644
--- a/ui/console-src/modules/system/users/components/RolesView.vue
+++ b/ui/console-src/modules/system/users/components/RolesView.vue
@@ -20,7 +20,7 @@ const { roleTemplateGroups } = useRoleTemplateSelection(roleTemplates);
 </script>
 <template>
   <dl
-    class="divide-y divide-gray-100 border border-gray-100 rounded-base overflow-hidden"
+    class="divide-y divide-gray-100 overflow-hidden rounded-base border border-gray-100"
   >
     <div
       v-for="(group, index) in roleTemplateGroups"
diff --git a/ui/index.html b/ui/index.html
index 7877ca2a1..51f096a34 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <meta charset="UTF-8" />
diff --git a/ui/package.json b/ui/package.json
index 28468695b..35b3e2ecd 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -19,15 +19,12 @@
     "test:unit:coverage": "vitest run --coverage",
     "typecheck": "vue-tsc --noEmit -p tsconfig.app.json --composite false && pnpm run typecheck:packages",
     "lint": "eslint . --max-warnings=0 -f html -o build/lint-result/index.html",
-    "prettier": "prettier --write \"./{src,uc-src,console-src}/**/*.{vue,js,jsx,ts,tsx,css,scss,json,yml,yaml,html}\" && pnpm run prettier:packages",
+    "prettier": "prettier . --write",
     "typecheck:packages": "pnpm --parallel --filter \"./packages/**\" run typecheck",
-    "prettier:packages": "pnpm --parallel --filter \"./packages/**\" prettier",
     "test:unit:packages": "pnpm --parallel --filter \"./packages/**\" run test:unit"
   },
   "lint-staged": {
-    "*.{vue,js,jsx,ts,tsx,css,scss,json,yml,yaml,html}": [
-      "prettier --write"
-    ],
+    "**/*": "prettier --write --ignore-unknown",
     "*.{ts,mts,tsx,vue}": [
       "eslint --fix --max-warnings=0"
     ]
@@ -35,6 +32,13 @@
   "browserslist": [
     "defaults"
   ],
+  "prettier": {
+    "plugins": [
+      "prettier-plugin-organize-imports",
+      "prettier-plugin-tailwindcss"
+    ],
+    "trailingComma": "es5"
+  },
   "resolutions": {
     "axios": "^1.7.9"
   },
@@ -124,9 +128,9 @@
     "@types/randomstring": "^1.1.8",
     "@types/ua-parser-js": "^0.7.39",
     "@typescript/native-preview": "7.0.0-dev.20250619.1",
-    "@vitest/eslint-plugin": "^1.2.7",
     "@vitejs/plugin-vue": "^6.0.0",
     "@vitejs/plugin-vue-jsx": "^5.0.0",
+    "@vitest/eslint-plugin": "^1.2.7",
     "@vitest/ui": "^3.1.4",
     "@vue/compiler-sfc": "^3.5.16",
     "@vue/eslint-config-prettier": "^10.2.0",
@@ -144,9 +148,9 @@
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.21",
     "postcss-viewport-height-correction": "^1.1.1",
-    "prettier": "^2.8.8",
+    "prettier": "^3.6.0",
     "prettier-plugin-organize-imports": "^4.1.0",
-    "prettier-plugin-tailwindcss": "^0.1.13",
+    "prettier-plugin-tailwindcss": "^0.6.13",
     "rollup-plugin-gzip": "^3.1.0",
     "sass-embedded": "^1.82.0",
     "start-server-and-test": "^1.14.0",
diff --git a/ui/packages/api-client/.prettierrc.js b/ui/packages/api-client/.prettierrc.js
deleted file mode 100644
index 23ebaf45d..000000000
--- a/ui/packages/api-client/.prettierrc.js
+++ /dev/null
@@ -1,3 +0,0 @@
-module.exports = {
-  plugins: ["../../prettier.config.cjs"],
-};
diff --git a/ui/packages/api-client/README.md b/ui/packages/api-client/README.md
index 30c44a451..ff3cc91d5 100644
--- a/ui/packages/api-client/README.md
+++ b/ui/packages/api-client/README.md
@@ -14,8 +14,8 @@ import {
   createConsoleApiClient,
   createUcApiClient,
   createPublicApiClient,
-  axiosInstance
-} from "@halo-dev/api-client"
+  axiosInstance,
+} from "@halo-dev/api-client";
 ```
 
 - **coreApiClient**: 为 Halo 所有自定义模型的 CRUD 接口封装的 api client。
@@ -37,11 +37,11 @@ pnpm install @halo-dev/api-client axios
 由于已经在 Console 和 UC 项目中引入并设置好了 Axios 拦截器，所以直接使用即可：
 
 ```javascript
-import { coreApiClient } from "@halo-dev/api-client"
+import { coreApiClient } from "@halo-dev/api-client";
 
-coreApiClient.content.post.listPost().then(response => {
+coreApiClient.content.post.listPost().then((response) => {
   // handle response
-})
+});
 ```
 
 此外，在最新的 `@halo-dev/ui-plugin-bundler-kit@2.17.0` 中，已经排除了 `@halo-dev/api-client`、`axios` 依赖，所以最终产物中的相关依赖会自动使用 Halo 本身提供的依赖，无需关心最终产物大小。
@@ -55,15 +55,15 @@ pnpm install @halo-dev/api-client axios
 ```
 
 ```javascript
-import axios from "axios"
+import axios from "axios";
 
 const axiosInstance = axios.create({
-  baseURL: "http://localhost:8090"
-})
+  baseURL: "http://localhost:8090",
+});
 
-const coreApiClient = createCoreApiClient(axiosInstance)
+const coreApiClient = createCoreApiClient(axiosInstance);
 
-coreApiClient.content.post.listPost().then(response => {
+coreApiClient.content.post.listPost().then((response) => {
   // handle response
-})
+});
 ```
diff --git a/ui/packages/api-client/entry/api-client.ts b/ui/packages/api-client/entry/api-client.ts
index ed994c7c2..5a4c34a09 100644
--- a/ui/packages/api-client/entry/api-client.ts
+++ b/ui/packages/api-client/entry/api-client.ts
@@ -34,6 +34,7 @@ import {
   PersonalAccessTokenV1alpha1UcApi,
   PluginV1alpha1Api,
   PluginV1alpha1ConsoleApi,
+  PolicyAlpha1ConsoleApi,
   PolicyTemplateV1alpha1Api,
   PolicyV1alpha1Api,
   PostV1alpha1Api,
@@ -63,10 +64,9 @@ import {
   ThemeV1alpha1ConsoleApi,
   TwoFactorAuthV1alpha1UcApi,
   UserConnectionV1alpha1Api,
+  UserPreferenceV1alpha1UcApi,
   UserV1alpha1Api,
   UserV1alpha1ConsoleApi,
-  UserPreferenceV1alpha1UcApi,
-  PolicyAlpha1ConsoleApi,
 } from "../src";
 
 const defaultAxiosInstance = axios.create({
diff --git a/ui/packages/api-client/entry/index.ts b/ui/packages/api-client/entry/index.ts
index 56f3e8cf5..670787bbf 100644
--- a/ui/packages/api-client/entry/index.ts
+++ b/ui/packages/api-client/entry/index.ts
@@ -1,3 +1,2 @@
 export * from "../src";
 export * from "./api-client";
-
diff --git a/ui/packages/api-client/tsdown.config.ts b/ui/packages/api-client/tsdown.config.ts
index 33fb0662f..9f7500d3f 100644
--- a/ui/packages/api-client/tsdown.config.ts
+++ b/ui/packages/api-client/tsdown.config.ts
@@ -16,6 +16,6 @@ export default defineConfig({
   minify: true,
   exports: true,
   dts: {
-    tsgo: true
-  }
+    tsgo: true,
+  },
 });
diff --git a/ui/packages/components/.storybook/preview.ts b/ui/packages/components/.storybook/preview.ts
index e660a82a0..00ef6ee0f 100644
--- a/ui/packages/components/.storybook/preview.ts
+++ b/ui/packages/components/.storybook/preview.ts
@@ -1,7 +1,7 @@
 import type { Preview } from "@storybook/vue3";
 
-import "../src/styles/tailwind.css";
 import "overlayscrollbars/overlayscrollbars.css";
+import "../src/styles/tailwind.css";
 
 const preview: Preview = {
   parameters: {
diff --git a/ui/packages/components/env.d.ts b/ui/packages/components/env.d.ts
index 31748a509..26b22ce31 100644
--- a/ui/packages/components/env.d.ts
+++ b/ui/packages/components/env.d.ts
@@ -1,5 +1,3 @@
-
-
 /// <reference types="vite/client" />
 /// <reference types="histoire" />
 /// <reference types="unplugin-icons/types/vue" />
diff --git a/ui/packages/components/package.json b/ui/packages/components/package.json
index 6492c72fe..a57fbade5 100644
--- a/ui/packages/components/package.json
+++ b/ui/packages/components/package.json
@@ -18,7 +18,6 @@
     "test:unit:ui": "vitest --watch --ui",
     "test:unit:coverage": "vitest run --coverage",
     "typecheck": "vue-tsc --noEmit -p tsconfig.app.json --composite false",
-    "prettier": "prettier --write './src/**/*.{vue,js,jsx,ts,tsx,css,scss,json,yml,yaml,html}'",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build"
   },
diff --git a/ui/packages/components/prettier.config.js b/ui/packages/components/prettier.config.js
deleted file mode 100644
index 23ebaf45d..000000000
--- a/ui/packages/components/prettier.config.js
+++ /dev/null
@@ -1,3 +0,0 @@
-module.exports = {
-  plugins: ["../../prettier.config.cjs"],
-};
diff --git a/ui/packages/components/src/components/alert/Alert.vue b/ui/packages/components/src/components/alert/Alert.vue
index dd75251ec..99a228826 100644
--- a/ui/packages/components/src/components/alert/Alert.vue
+++ b/ui/packages/components/src/components/alert/Alert.vue
@@ -76,58 +76,39 @@ const handleClose = () => {
 
 <style lang="scss" scoped>
 .alert-wrapper {
-  @apply flex
-  flex-col
-  box-border
-  border
-  rounded-base;
+  @apply box-border flex flex-col rounded-base border;
   padding: 12px 16px;
 
   .alert-header {
     @apply flex;
 
     .alert-icon {
-      @apply self-center
-      mr-3
-      text-lg;
+      @apply mr-3 self-center text-lg;
     }
 
     .alert-title {
-      @apply self-center
-      mr-3
-      flex-1
-      font-medium
-      text-sm;
+      @apply mr-3 flex-1 self-center text-sm font-medium;
     }
 
     .alert-close {
-      @apply self-center
-      cursor-pointer
-      rounded-full
-      p-0.5;
+      @apply cursor-pointer self-center rounded-full p-0.5;
 
       &:hover {
-        @apply transition-all
-        bg-gray-300
-        text-white;
+        @apply bg-gray-300 text-white transition-all;
       }
     }
   }
 
   .alert-description {
-    @apply text-xs
-    mt-2;
+    @apply mt-2 text-xs;
   }
 
   .alert-actions {
-    @apply border-t
-    mt-3
-    pt-2;
+    @apply mt-3 border-t pt-2;
   }
 
   &.alert-default {
-    @apply bg-gray-50
-    border-gray-300;
+    @apply border-gray-300 bg-gray-50;
 
     .alert-icon,
     .alert-description {
@@ -141,8 +122,7 @@ const handleClose = () => {
   }
 
   &.alert-success {
-    @apply bg-green-50
-    border-green-300;
+    @apply border-green-300 bg-green-50;
 
     .alert-icon,
     .alert-description {
@@ -156,8 +136,7 @@ const handleClose = () => {
   }
 
   &.alert-info {
-    @apply bg-sky-50
-    border-sky-300;
+    @apply border-sky-300 bg-sky-50;
 
     .alert-icon,
     .alert-description {
@@ -171,8 +150,7 @@ const handleClose = () => {
   }
 
   &.alert-warning {
-    @apply bg-orange-50
-    border-orange-300;
+    @apply border-orange-300 bg-orange-50;
 
     .alert-icon,
     .alert-description {
@@ -186,8 +164,7 @@ const handleClose = () => {
   }
 
   &.alert-error {
-    @apply bg-red-50
-    border-red-300;
+    @apply border-red-300 bg-red-50;
 
     .alert-icon,
     .alert-description {
diff --git a/ui/packages/components/src/components/avatar/Avatar.vue b/ui/packages/components/src/components/avatar/Avatar.vue
index 173358c36..226ab5ec9 100644
--- a/ui/packages/components/src/components/avatar/Avatar.vue
+++ b/ui/packages/components/src/components/avatar/Avatar.vue
@@ -129,23 +129,23 @@ const placeholderText = computed(() => {
   @apply inline-flex items-center justify-center overflow-hidden bg-gray-100;
 
   img {
-    @apply w-full h-full object-cover;
+    @apply h-full w-full object-cover;
   }
 
   .avatar-fallback {
-    @apply w-full h-full flex items-center justify-center;
+    @apply flex h-full w-full items-center justify-center;
   }
 
   .avatar-loading {
-    @apply animate-spin w-5 h-5;
+    @apply h-5 w-5 animate-spin;
   }
 
   .avatar-placeholder {
-    @apply text-sm text-gray-800 font-medium;
+    @apply text-sm font-medium text-gray-800;
   }
 
   .avatar-error {
-    @apply w-5 h-5 text-red-500;
+    @apply h-5 w-5 text-red-500;
   }
 
   &.avatar-circle {
@@ -157,7 +157,7 @@ const placeholderText = computed(() => {
   }
 
   &.avatar-xs {
-    @apply w-6 h-6;
+    @apply h-6 w-6;
 
     .avatar-placeholder {
       @apply text-xs;
@@ -165,7 +165,7 @@ const placeholderText = computed(() => {
   }
 
   &.avatar-sm {
-    @apply w-8 h-8;
+    @apply h-8 w-8;
 
     .avatar-placeholder {
       @apply text-xs;
@@ -173,11 +173,11 @@ const placeholderText = computed(() => {
   }
 
   &.avatar-md {
-    @apply w-10 h-10;
+    @apply h-10 w-10;
   }
 
   &.avatar-lg {
-    @apply w-12 h-12;
+    @apply h-12 w-12;
   }
 }
 </style>
diff --git a/ui/packages/components/src/components/avatar/AvatarGroup.vue b/ui/packages/components/src/components/avatar/AvatarGroup.vue
index 8b6573e29..d09db2e7c 100644
--- a/ui/packages/components/src/components/avatar/AvatarGroup.vue
+++ b/ui/packages/components/src/components/avatar/AvatarGroup.vue
@@ -21,10 +21,10 @@ provide(AvatarGroupContextInjectionKey, props);
 
 <style lang="scss">
 .avatar-group-wrapper {
-  @apply -space-x-2.5 inline-flex;
+  @apply inline-flex -space-x-2.5;
 
   > * {
-    @apply hover:z-10 ring-2 ring-white transition-all;
+    @apply ring-2 ring-white transition-all hover:z-10;
   }
 }
 </style>
diff --git a/ui/packages/components/src/components/card/Card.vue b/ui/packages/components/src/components/card/Card.vue
index b22b99cbe..f18c81539 100644
--- a/ui/packages/components/src/components/card/Card.vue
+++ b/ui/packages/components/src/components/card/Card.vue
@@ -27,26 +27,14 @@ defineProps<{
 </template>
 <style lang="scss">
 .card-wrapper {
-  @apply box-border
-  flex
-  flex-col
-  bg-white
-  shadow-sm
-  rounded-base
-  ring-1
-  ring-[#eaecf0];
+  @apply box-border flex flex-col rounded-base bg-white shadow-sm ring-1 ring-[#eaecf0];
 
   .card-header {
-    @apply flex
-    justify-between
-    rounded-t-base
-    overflow-hidden;
+    @apply flex justify-between overflow-hidden rounded-t-base;
     border-bottom: 1px solid #eaecf0;
 
     .card-header-title {
-      @apply self-center
-      text-base
-      font-bold;
+      @apply self-center text-base font-bold;
       padding: 12px 16px;
     }
 
@@ -56,12 +44,12 @@ defineProps<{
   }
 
   .card-body {
-    @apply rounded-base overflow-hidden;
+    @apply overflow-hidden rounded-base;
     padding: 12px 16px;
   }
 
   .card-footer {
-    @apply rounded-b-base overflow-hidden;
+    @apply overflow-hidden rounded-b-base;
     border-top: 1px solid #eaecf0;
     padding: 12px 16px;
   }
diff --git a/ui/packages/components/src/components/description/DescriptionItem.vue b/ui/packages/components/src/components/description/DescriptionItem.vue
index 9abce24e1..75a20b8d8 100644
--- a/ui/packages/components/src/components/description/DescriptionItem.vue
+++ b/ui/packages/components/src/components/description/DescriptionItem.vue
@@ -36,7 +36,7 @@ withDefaults(
   }
 
   .description-item__content {
-    @apply mt-1 text-sm text-gray-900 sm:col-span-6 md:col-span-5 lg:col-span-3 sm:mt-0;
+    @apply mt-1 text-sm text-gray-900 sm:col-span-6 sm:mt-0 md:col-span-5 lg:col-span-3;
   }
 }
 </style>
diff --git a/ui/packages/components/src/components/dialog/Dialog.vue b/ui/packages/components/src/components/dialog/Dialog.vue
index 14f399184..98645447b 100644
--- a/ui/packages/components/src/components/dialog/Dialog.vue
+++ b/ui/packages/components/src/components/dialog/Dialog.vue
@@ -90,22 +90,22 @@ const handleClose = () => {
     :data-unique-id="uniqueId"
     @close="handleCancel()"
   >
-    <div class="flex justify-between items-start py-2 mb-2">
+    <div class="mb-2 flex items-start justify-between py-2">
       <div class="flex flex-row items-center gap-3">
         <component
           :is="icons[type].icon"
           :class="`text-${icons[type].color}-500`"
-          class="w-6 h-6 flex-none"
+          class="h-6 w-6 flex-none"
         ></component>
-        <div class="text-base text-gray-900 font-bold">{{ title }}</div>
+        <div class="text-base font-bold text-gray-900">{{ title }}</div>
       </div>
       <div>
         <IconClose class="cursor-pointer" @click="handleCancel" />
       </div>
     </div>
     <div class="flex items-center gap-4">
-      <div class="flex-1 flex items-stretch">
-        <div class="text-sm text-gray-700 break-all">{{ description }}</div>
+      <div class="flex flex-1 items-stretch">
+        <div class="break-all text-sm text-gray-700">{{ description }}</div>
       </div>
     </div>
     <template #footer>
diff --git a/ui/packages/components/src/components/dialog/index.ts b/ui/packages/components/src/components/dialog/index.ts
index 04c96459c..25a47b61b 100644
--- a/ui/packages/components/src/components/dialog/index.ts
+++ b/ui/packages/components/src/components/dialog/index.ts
@@ -1,2 +1,2 @@
-export { default as VDialog } from "./Dialog.vue";
 export { Dialog } from "./dialog-manager";
+export { default as VDialog } from "./Dialog.vue";
diff --git a/ui/packages/components/src/components/dropdown/DropdownItem.vue b/ui/packages/components/src/components/dropdown/DropdownItem.vue
index 9b8a34923..8985982da 100644
--- a/ui/packages/components/src/components/dropdown/DropdownItem.vue
+++ b/ui/packages/components/src/components/dropdown/DropdownItem.vue
@@ -54,7 +54,7 @@ function onClick(e: MouseEvent) {
 
 <style lang="scss">
 .dropdown-item-wrapper {
-  @apply flex w-full cursor-pointer justify-between items-center gap-1 rounded px-4 py-2 text-sm;
+  @apply flex w-full cursor-pointer items-center justify-between gap-1 rounded px-4 py-2 text-sm;
 
   &--default {
     @apply text-gray-700 hover:bg-gray-100 hover:text-gray-900;
@@ -73,7 +73,7 @@ function onClick(e: MouseEvent) {
   }
 
   &--disabled {
-    @apply opacity-70 cursor-not-allowed;
+    @apply cursor-not-allowed opacity-70;
   }
 }
 </style>
diff --git a/ui/packages/components/src/components/empty/Empty.vue b/ui/packages/components/src/components/empty/Empty.vue
index c32439320..0b2dec694 100644
--- a/ui/packages/components/src/components/empty/Empty.vue
+++ b/ui/packages/components/src/components/empty/Empty.vue
@@ -27,31 +27,18 @@ defineProps<{
 </template>
 <style lang="scss">
 .empty-wrapper {
-  @apply flex
-  flex-col
-  items-center
-  justify-center
-  my-10
-  px-10;
+  @apply my-10 flex flex-col items-center justify-center px-10;
 
   .empty-title {
-    @apply text-sm
-    text-gray-900
-    text-center
-    font-medium;
+    @apply text-center text-sm font-medium text-gray-900;
   }
 
   .empty-message {
-    @apply text-gray-500
-    text-xs
-    text-center
-    mt-1.5;
+    @apply mt-1.5 text-center text-xs text-gray-500;
   }
 
   .empty-actions {
-    @apply flex
-    flex-row
-    mt-5;
+    @apply mt-5 flex flex-row;
   }
 }
 </style>
diff --git a/ui/packages/components/src/components/entity/Entity.vue b/ui/packages/components/src/components/entity/Entity.vue
index de99944d7..d3cc8d088 100644
--- a/ui/packages/components/src/components/entity/Entity.vue
+++ b/ui/packages/components/src/components/entity/Entity.vue
@@ -61,7 +61,7 @@ const classes = computed(() => {
 </template>
 <style lang="scss">
 .entity-wrapper {
-  @apply relative transition-all hover:bg-gray-50 w-full;
+  @apply relative w-full transition-all hover:bg-gray-50;
 
   &.entity-selected {
     @apply bg-gray-100;
@@ -72,7 +72,7 @@ const classes = computed(() => {
   }
 
   .entity-body {
-    @apply relative flex flex-row items-center w-full;
+    @apply relative flex w-full flex-row items-center;
   }
 
   .entity-checkbox {
@@ -81,7 +81,7 @@ const classes = computed(() => {
 
   .entity-start-wrapper,
   .entity-end-wrapper {
-    @apply align-middle w-auto px-4 py-3;
+    @apply w-auto px-4 py-3 align-middle;
   }
 
   .entity-start {
@@ -89,7 +89,7 @@ const classes = computed(() => {
   }
 
   .entity-end {
-    @apply flex items-center gap-6 justify-end;
+    @apply flex items-center justify-end gap-6;
   }
 
   .entity-dropdown {
diff --git a/ui/packages/components/src/components/entity/EntityField.vue b/ui/packages/components/src/components/entity/EntityField.vue
index 36b85f24d..f1b52187c 100644
--- a/ui/packages/components/src/components/entity/EntityField.vue
+++ b/ui/packages/components/src/components/entity/EntityField.vue
@@ -78,13 +78,13 @@ function getWidthStyleValue(value: string | number) {
 
 <style lang="scss">
 .entity-field-wrapper {
-  @apply inline-flex flex-col gap-1 max-w-xs;
+  @apply inline-flex max-w-xs flex-col gap-1;
 
   .entity-field-title-body {
-    @apply inline-flex items-center flex-row whitespace-nowrap;
+    @apply inline-flex flex-row items-center whitespace-nowrap;
 
     .entity-field-title {
-      @apply truncate text-sm font-medium text-gray-900 mr-2;
+      @apply mr-2 truncate text-sm font-medium text-gray-900;
     }
   }
 
@@ -92,7 +92,7 @@ function getWidthStyleValue(value: string | number) {
     @apply inline-flex items-center whitespace-nowrap;
 
     .entity-field-description {
-      @apply text-xs text-gray-500 truncate;
+      @apply truncate text-xs text-gray-500;
     }
   }
 }
diff --git a/ui/packages/components/src/components/menu/MenuItem.vue b/ui/packages/components/src/components/menu/MenuItem.vue
index 5d79987ac..5b76b1a6c 100644
--- a/ui/packages/components/src/components/menu/MenuItem.vue
+++ b/ui/packages/components/src/components/menu/MenuItem.vue
@@ -84,20 +84,11 @@ function handleExpand() {
 }
 
 .menu-item-title {
-  @apply transition-all
-  text-base
-  flex
-  select-none
-  relative
-  px-2
-  py-[0.4rem]
-  font-normal
-  rounded-base;
+  @apply relative flex select-none rounded-base px-2 py-[0.4rem] text-base font-normal transition-all;
 
   &:hover,
   &.active {
-    @apply bg-gray-100
-    font-medium;
+    @apply bg-gray-100 font-medium;
   }
 
   &.active::after {
@@ -113,7 +104,7 @@ function handleExpand() {
 }
 
 .menu-icon-collapse {
-  @apply group-hover:bg-gray-200 p-0.5 rounded-full;
+  @apply rounded-full p-0.5 group-hover:bg-gray-200;
 
   &.open {
     @apply bg-gray-200;
@@ -132,7 +123,7 @@ function handleExpand() {
 }
 
 .sub-menu-items {
-  @apply pl-5 my-1;
+  @apply my-1 pl-5;
 
   .menu-item-title {
     @apply p-1.5 text-sm;
diff --git a/ui/packages/components/src/components/modal/Modal.vue b/ui/packages/components/src/components/modal/Modal.vue
index 622538f58..24b09ebec 100644
--- a/ui/packages/components/src/components/modal/Modal.vue
+++ b/ui/packages/components/src/components/modal/Modal.vue
@@ -187,38 +187,15 @@ watch(
 
 <style lang="scss">
 .modal-wrapper {
-  @apply fixed
-  left-0
-  h-full
-  w-full
-  flex
-  flex-row
-  items-start
-  justify-center
-  top-0
-  py-10;
+  @apply fixed left-0 top-0 flex h-full w-full flex-row items-start justify-center py-10;
   z-index: 2000;
 
   .modal-layer {
-    @apply flex-none
-    absolute
-    top-0
-    left-0
-    h-full
-    w-full
-    transition-opacity
-    bg-gray-500
-    bg-opacity-75;
+    @apply absolute left-0 top-0 h-full w-full flex-none bg-gray-500 bg-opacity-75 transition-opacity;
   }
 
   .modal-content {
-    @apply flex
-    flex-col
-    relative
-    bg-white
-    items-stretch
-    shadow-xl
-    rounded-base;
+    @apply relative flex flex-col items-stretch rounded-base bg-white shadow-xl;
     width: calc(100vw - 20px);
     max-height: calc(100vh - 5rem);
 
@@ -227,44 +204,23 @@ watch(
     }
 
     .modal-header {
-      @apply flex
-      justify-between
-      border-b
-      items-center
-      select-none;
+      @apply flex select-none items-center justify-between border-b;
       padding: 10px 16px;
 
       .modal-header-title {
-        @apply text-base
-        font-medium
-        truncate;
+        @apply truncate text-base font-medium;
       }
 
       .modal-header-actions {
-        @apply flex
-        flex-row
-        gap-2;
+        @apply flex flex-row gap-2;
         span {
-          @apply cursor-pointer 
-          rounded-full 
-          w-7 
-          h-7 
-          inline-flex 
-          items-center 
-          justify-center 
-          hover:bg-gray-100
-          select-none
-          text-gray-600
-          hover:text-gray-900
-          group-hover:hidden;
+          @apply inline-flex h-7 w-7 cursor-pointer select-none items-center justify-center rounded-full text-gray-600 hover:bg-gray-100 hover:text-gray-900 group-hover:hidden;
         }
       }
     }
 
     .modal-body {
-      @apply overflow-y-hidden
-      overflow-x-hidden
-      flex-1;
+      @apply flex-1 overflow-x-hidden overflow-y-hidden;
       word-wrap: break-word;
       padding: 12px 16px;
     }
@@ -276,7 +232,7 @@ watch(
   }
 
   &.modal-wrapper-centered {
-    @apply py-0 items-center;
+    @apply items-center py-0;
     .modal-content {
       max-height: calc(100vh - 20px) !important;
     }
diff --git a/ui/packages/components/src/components/pagination/Pagination.vue b/ui/packages/components/src/components/pagination/Pagination.vue
index 8b9b5ba85..3bf2cc3f6 100644
--- a/ui/packages/components/src/components/pagination/Pagination.vue
+++ b/ui/packages/components/src/components/pagination/Pagination.vue
@@ -135,22 +135,22 @@ const next = () => {
 
 <style lang="scss">
 .pagination {
-  @apply bg-white flex items-center flex-1 gap-2;
+  @apply flex flex-1 items-center gap-2 bg-white;
 
   &__total {
-    @apply hidden sm:block text-sm text-gray-500;
+    @apply hidden text-sm text-gray-500 sm:block;
   }
 
   &__controller {
-    @apply flex items-center gap-2 flex-1 justify-end;
+    @apply flex flex-1 items-center justify-end gap-2;
   }
 
   &__nav {
-    @apply relative z-0 inline-flex rounded-base shadow-sm -space-x-px;
+    @apply relative z-0 inline-flex -space-x-px rounded-base shadow-sm;
   }
 
   &__btn {
-    @apply relative h-8 outline-none inline-flex items-center px-2 py-1.5 rounded-base border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 cursor-pointer disabled:cursor-not-allowed;
+    @apply relative inline-flex h-8 cursor-pointer items-center rounded-base border border-gray-300 bg-white px-2 py-1.5 text-sm font-medium text-gray-500 outline-none hover:bg-gray-50 disabled:cursor-not-allowed;
 
     &--prev {
       @apply rounded-r-none;
@@ -166,7 +166,7 @@ const next = () => {
   }
 
   &__select {
-    @apply h-8 border outline-none rounded-base pr-10 border-solid px-2 text-gray-800 text-sm border-gray-300 focus:border-primary;
+    @apply h-8 rounded-base border border-solid border-gray-300 px-2 pr-10 text-sm text-gray-800 outline-none focus:border-primary;
   }
 
   &__select-label {
diff --git a/ui/packages/components/src/components/space/Space.vue b/ui/packages/components/src/components/space/Space.vue
index 1be4dee2a..9c8d5cccf 100644
--- a/ui/packages/components/src/components/space/Space.vue
+++ b/ui/packages/components/src/components/space/Space.vue
@@ -32,8 +32,7 @@ const wrapperClasses = computed(() => {
 </template>
 <style lang="scss">
 .space-wrapper {
-  @apply inline-flex
-  box-border;
+  @apply box-border inline-flex;
 
   &.space-direction-row {
     @apply flex-row;
diff --git a/ui/packages/components/src/components/status/StatusDot.vue b/ui/packages/components/src/components/status/StatusDot.vue
index af686be7f..38b905235 100644
--- a/ui/packages/components/src/components/status/StatusDot.vue
+++ b/ui/packages/components/src/components/status/StatusDot.vue
@@ -40,7 +40,7 @@ const classes = computed(() => {
   }
 
   .status-dot-text {
-    @apply text-gray-500 text-xs whitespace-nowrap;
+    @apply whitespace-nowrap text-xs text-gray-500;
   }
 
   &.status-dot-animate {
diff --git a/ui/packages/components/src/components/switch/Switch.vue b/ui/packages/components/src/components/switch/Switch.vue
index b99f68335..0b7ed472a 100644
--- a/ui/packages/components/src/components/switch/Switch.vue
+++ b/ui/packages/components/src/components/switch/Switch.vue
@@ -75,41 +75,17 @@ const handleChange = () => {
 </template>
 <style lang="scss">
 .switch-wrapper {
-  @apply inline-flex
-  box-border;
+  @apply box-border inline-flex;
 
   .switch-inner {
-    @apply relative
-    inline-flex
-    flex-shrink-0
-    h-6
-    w-11
-    border-2
-    border-transparent
-    rounded-full
-    cursor-pointer
-    transition-colors
-    ease-in-out
-    duration-200;
+    @apply relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out;
 
     &.switch-disabled {
-      @apply opacity-60
-      cursor-not-allowed;
+      @apply cursor-not-allowed opacity-60;
     }
 
     .switch-indicator {
-      @apply pointer-events-none
-      inline-block
-      h-5
-      w-5
-      rounded-full
-      bg-white
-      shadow
-      transform
-      ring-0
-      transition
-      ease-in-out
-      duration-200;
+      @apply pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out;
     }
   }
 }
diff --git a/ui/packages/components/src/components/tabs/Tabbar.vue b/ui/packages/components/src/components/tabs/Tabbar.vue
index 78c3cf9fc..6d542e134 100644
--- a/ui/packages/components/src/components/tabs/Tabbar.vue
+++ b/ui/packages/components/src/components/tabs/Tabbar.vue
@@ -225,43 +225,17 @@ onUnmounted(() => {
 .tabbar-wrapper {
   @apply relative;
   .indicator {
-    @apply absolute
-    top-0
-    z-10
-    w-20
-    h-full
-    flex
-    items-center
-    from-transparent
-    from-10%
-    via-white/80
-    via-30%
-    to-white
-    to-70%
-    pt-1
-    pointer-events-none
-    pb-1.5;
+    @apply pointer-events-none absolute top-0 z-10 flex h-full w-20 items-center from-transparent from-10% via-white/80 via-30% to-white to-70% pb-1.5 pt-1;
 
     &.left {
-      @apply left-0
-      justify-start
-      bg-gradient-to-l;
+      @apply left-0 justify-start bg-gradient-to-l;
     }
     &.right {
-      @apply right-0
-      justify-end
-      bg-gradient-to-r;
+      @apply right-0 justify-end bg-gradient-to-r;
     }
     .arrow-left,
     .arrow-right {
-      @apply w-10
-      h-9
-      flex
-      justify-center
-      items-center
-      pointer-events-auto
-      cursor-pointer
-      select-none;
+      @apply pointer-events-auto flex h-9 w-10 cursor-pointer select-none items-center justify-center;
       svg {
         font-size: 1.5em;
       }
@@ -269,11 +243,7 @@ onUnmounted(() => {
   }
 
   .tabbar-items {
-    @apply flex
-    items-center
-    flex-row
-    overflow-x-auto
-    py-0.5;
+    @apply flex flex-row items-center overflow-x-auto py-0.5;
 
     &::-webkit-scrollbar-track-piece {
       background-color: #f8f8f8;
@@ -301,15 +271,7 @@ onUnmounted(() => {
   }
 
   .tabbar-item {
-    @apply inline-flex
-    cursor-pointer
-    self-center
-    transition-all
-    text-sm
-    justify-center
-    gap-2
-    h-9
-    whitespace-nowrap;
+    @apply inline-flex h-9 cursor-pointer justify-center gap-2 self-center whitespace-nowrap text-sm transition-all;
 
     .tabbar-item-label,
     .tabbar-item-icon {
@@ -327,15 +289,12 @@ onUnmounted(() => {
     }
 
     .tabbar-item {
-      @apply px-5
-      py-1
-      border-b-gray-100;
+      @apply border-b-gray-100 px-5 py-1;
 
       border-bottom-width: 2px;
 
       &.tabbar-item-active {
-        @apply text-secondary
-        border-b-secondary;
+        @apply border-b-secondary text-secondary;
       }
     }
   }
@@ -347,14 +306,10 @@ onUnmounted(() => {
     }
 
     .tabbar-item {
-      @apply px-6
-      py-1
-      opacity-70
-      rounded-base;
+      @apply rounded-base px-6 py-1 opacity-70;
 
       &.tabbar-item-active {
-        @apply bg-gray-100
-        opacity-100;
+        @apply bg-gray-100 opacity-100;
       }
 
       &:hover {
@@ -364,26 +319,17 @@ onUnmounted(() => {
   }
 
   &.tabbar-outline {
-    @apply px-1
-    py-0.5
-    bg-gray-100
-    rounded-base;
+    @apply rounded-base bg-gray-100 px-1 py-0.5;
 
     .tabbar-items {
-      @apply gap-1
-      justify-start;
+      @apply justify-start gap-1;
     }
 
     .tabbar-item {
-      @apply px-6
-      py-1
-      opacity-70
-      rounded-sm;
+      @apply rounded-sm px-6 py-1 opacity-70;
 
       &.tabbar-item-active {
-        @apply bg-white
-        opacity-100
-        shadow-sm;
+        @apply bg-white opacity-100 shadow-sm;
       }
 
       &:hover {
diff --git a/ui/packages/components/src/components/tabs/index.ts b/ui/packages/components/src/components/tabs/index.ts
index 307789a25..8bf322a3b 100644
--- a/ui/packages/components/src/components/tabs/index.ts
+++ b/ui/packages/components/src/components/tabs/index.ts
@@ -1,3 +1,3 @@
-export { default as VTabItem } from "./TabItem.vue";
 export { default as VTabbar } from "./Tabbar.vue";
+export { default as VTabItem } from "./TabItem.vue";
 export { default as VTabs } from "./Tabs.vue";
diff --git a/ui/packages/components/src/components/tag/Tag.vue b/ui/packages/components/src/components/tag/Tag.vue
index 579be2338..44f244cd4 100644
--- a/ui/packages/components/src/components/tag/Tag.vue
+++ b/ui/packages/components/src/components/tag/Tag.vue
@@ -37,37 +37,18 @@ const classes = computed(() => {
 </template>
 <style lang="scss">
 .tag-wrapper {
-  @apply rounded-base
-  inline-flex
-  flex-shrink-0
-  flex-wrap
-  box-border
-  cursor-pointer
-  text-center
-  items-center
-  justify-center
-  w-auto
-  align-middle
-  h-5
-  text-xs
-  border
-  border-solid
-  px-1;
+  @apply box-border inline-flex h-5 w-auto flex-shrink-0 cursor-pointer flex-wrap items-center justify-center rounded-base border border-solid px-1 text-center align-middle text-xs;
 
   &.tag-default {
     border: 1px solid #d9d9d9;
   }
 
   &.tag-primary {
-    @apply text-white
-    bg-primary
-    border-primary;
+    @apply border-primary bg-primary text-white;
   }
 
   &.tag-secondary {
-    @apply text-white
-    bg-secondary
-    border-secondary;
+    @apply border-secondary bg-secondary text-white;
   }
 
   &.tag-danger {
diff --git a/ui/packages/components/src/components/toast/Toast.vue b/ui/packages/components/src/components/toast/Toast.vue
index c6774bb31..f4550b456 100644
--- a/ui/packages/components/src/components/toast/Toast.vue
+++ b/ui/packages/components/src/components/toast/Toast.vue
@@ -139,18 +139,18 @@ defineExpose({ close });
 </template>
 <style lang="scss">
 .toast-container {
-  @apply fixed pointer-events-none flex z-[9999] flex-col box-border transition-all w-full left-0 top-0 items-center justify-center p-4 gap-3;
+  @apply pointer-events-none fixed left-0 top-0 z-[9999] box-border flex w-full flex-col items-center justify-center gap-3 p-4 transition-all;
 
   .toast-wrapper {
-    @apply inline-block max-w-xs pointer-events-auto relative;
+    @apply pointer-events-auto relative inline-block max-w-xs;
   }
 
   .toast-body {
-    @apply cursor-pointer flex items-center px-2.5 py-2 overflow-hidden break-all bg-white shadow hover:shadow-md transition-all rounded gap-2;
+    @apply flex cursor-pointer items-center gap-2 overflow-hidden break-all rounded bg-white px-2.5 py-2 shadow transition-all hover:shadow-md;
   }
 
   .toast-content {
-    @apply text-sm flex flex-col gap-1;
+    @apply flex flex-col gap-1 text-sm;
   }
 
   .toast-description {
@@ -158,11 +158,11 @@ defineExpose({ close });
   }
 
   .toast-control {
-    @apply text-gray-600 hover:text-gray-900 transition-all cursor-pointer rounded-full hover:bg-gray-100 p-0.5;
+    @apply cursor-pointer rounded-full p-0.5 text-gray-600 transition-all hover:bg-gray-100 hover:text-gray-900;
   }
 
   .toast-count {
-    @apply bg-red-500 rounded-full absolute -right-1 -top-1 w-4 h-4 flex items-center justify-center;
+    @apply absolute -right-1 -top-1 flex h-4 w-4 items-center justify-center rounded-full bg-red-500;
 
     span {
       @apply text-[0.7rem] text-white;
diff --git a/ui/packages/components/src/stories/Introduction.mdx b/ui/packages/components/src/stories/Introduction.mdx
index 4cf7127c3..3ab00b68c 100644
--- a/ui/packages/components/src/stories/Introduction.mdx
+++ b/ui/packages/components/src/stories/Introduction.mdx
@@ -1,12 +1,12 @@
-import { Meta } from '@storybook/blocks';
-import Code from './assets/code-brackets.svg';
-import Colors from './assets/colors.svg';
-import Comments from './assets/comments.svg';
-import Direction from './assets/direction.svg';
-import Flow from './assets/flow.svg';
-import Plugin from './assets/plugin.svg';
-import Repo from './assets/repo.svg';
-import StackAlt from './assets/stackalt.svg';
+import { Meta } from "@storybook/blocks";
+import Code from "./assets/code-brackets.svg";
+import Colors from "./assets/colors.svg";
+import Comments from "./assets/comments.svg";
+import Direction from "./assets/direction.svg";
+import Flow from "./assets/flow.svg";
+import Plugin from "./assets/plugin.svg";
+import Repo from "./assets/repo.svg";
+import StackAlt from "./assets/stackalt.svg";
 
 <Meta title="Introduction" />
 
@@ -184,14 +184,22 @@ We recommend building UIs with a [**component-driven**](https://componentdriven.
       Configure, customize, and extend
     </span>
   </a>
-  <a className="link-item" href="https://storybook.js.org/tutorials/" target="_blank">
+  <a
+    className="link-item"
+    href="https://storybook.js.org/tutorials/"
+    target="_blank"
+  >
     <img src={Direction} alt="direction" />
     <span>
       <strong>In-depth guides</strong>
       Best practices from leading teams
     </span>
   </a>
-  <a className="link-item" href="https://github.com/storybookjs/storybook" target="_blank">
+  <a
+    className="link-item"
+    href="https://github.com/storybookjs/storybook"
+    target="_blank"
+  >
     <img src={Code} alt="code" />
     <span>
       <strong>GitHub project</strong>
@@ -208,6 +216,6 @@ We recommend building UIs with a [**component-driven**](https://componentdriven.
 </div>
 
 <div className="tip-wrapper">
-  <span className="tip">Tip</span>Edit the Markdown in{' '}
+  <span className="tip">Tip</span>Edit the Markdown in{" "}
   <code>stories/Introduction.stories.mdx</code>
 </div>
diff --git a/ui/packages/components/vite.config.ts b/ui/packages/components/vite.config.ts
index d54ba5c7c..44adc786f 100644
--- a/ui/packages/components/vite.config.ts
+++ b/ui/packages/components/vite.config.ts
@@ -1,11 +1,11 @@
 import { fileURLToPath, URL } from "url";
 
-import { defineConfig, type Plugin } from "vite";
 import Vue from "@vitejs/plugin-vue";
 import VueJsx from "@vitejs/plugin-vue-jsx";
-import Icons from "unplugin-icons/vite";
-import Dts from "vite-plugin-dts";
 import path from "path";
+import Icons from "unplugin-icons/vite";
+import { defineConfig, type Plugin } from "vite";
+import Dts from "vite-plugin-dts";
 
 export default defineConfig({
   experimental: {
diff --git a/ui/packages/components/vitest.config.ts b/ui/packages/components/vitest.config.ts
index 8728ab041..183f6a394 100644
--- a/ui/packages/components/vitest.config.ts
+++ b/ui/packages/components/vitest.config.ts
@@ -1,5 +1,5 @@
 import { fileURLToPath } from "node:url";
-import { mergeConfig, defineConfig, configDefaults } from "vitest/config";
+import { configDefaults, defineConfig, mergeConfig } from "vitest/config";
 import viteConfig from "./vite.config";
 
 export default mergeConfig(
diff --git a/ui/packages/editor/index.html b/ui/packages/editor/index.html
index daed65da8..ec23fc0f1 100644
--- a/ui/packages/editor/index.html
+++ b/ui/packages/editor/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
diff --git a/ui/packages/editor/package.json b/ui/packages/editor/package.json
index 2f35d7aec..53553a53f 100644
--- a/ui/packages/editor/package.json
+++ b/ui/packages/editor/package.json
@@ -31,7 +31,6 @@
   "scripts": {
     "build": "vite build --config ./vite.lib.config.ts",
     "dev": "vite",
-    "prettier": "prettier --write './src/**/*.{vue,js,jsx,ts,tsx,css,scss,json,yml,yaml,html}'",
     "release": "release-it",
     "test:unit:coverage": "vitest run --environment jsdom --coverage",
     "test:unit:ui": "vitest --environment jsdom --watch --ui",
diff --git a/ui/packages/editor/prettier.config.js b/ui/packages/editor/prettier.config.js
deleted file mode 100644
index 23ebaf45d..000000000
--- a/ui/packages/editor/prettier.config.js
+++ /dev/null
@@ -1,3 +0,0 @@
-module.exports = {
-  plugins: ["../../prettier.config.cjs"],
-};
diff --git a/ui/packages/editor/src/components/Editor.vue b/ui/packages/editor/src/components/Editor.vue
index ab11dbc01..dadcac2a7 100644
--- a/ui/packages/editor/src/components/Editor.vue
+++ b/ui/packages/editor/src/components/Editor.vue
@@ -36,8 +36,8 @@ watch(
   <div v-if="editor" class="halo-rich-text-editor">
     <editor-bubble-menu :editor="editor" />
     <editor-header :editor="editor" />
-    <div class="h-full flex flex-row w-full overflow-hidden">
-      <div class="overflow-y-auto flex-1 bg-white relative">
+    <div class="flex h-full w-full flex-row overflow-hidden">
+      <div class="relative flex-1 overflow-y-auto bg-white">
         <div v-if="$slots.content" class="editor-header-extra">
           <slot name="content" />
         </div>
@@ -50,7 +50,7 @@ watch(
       </div>
       <div
         v-if="$slots.extra"
-        class="h-full hidden sm:!block w-72 flex-shrink-0 flex-none"
+        class="hidden h-full w-72 flex-none flex-shrink-0 sm:!block"
       >
         <slot name="extra"></slot>
       </div>
diff --git a/ui/packages/editor/src/components/EditorBubbleMenu.vue b/ui/packages/editor/src/components/EditorBubbleMenu.vue
index 03437874f..7013754ff 100644
--- a/ui/packages/editor/src/components/EditorBubbleMenu.vue
+++ b/ui/packages/editor/src/components/EditorBubbleMenu.vue
@@ -71,7 +71,7 @@ const shouldShow = (
     :default-animation="bubbleMenu.defaultAnimation"
   >
     <div
-      class="bubble-menu bg-white flex items-center rounded-md p-1 border shadow space-x-1"
+      class="bubble-menu flex items-center space-x-1 rounded-md border bg-white p-1 shadow"
     >
       <template v-if="bubbleMenu.items">
         <template
diff --git a/ui/packages/editor/src/components/EditorHeader.vue b/ui/packages/editor/src/components/EditorHeader.vue
index 44a371c60..362219423 100644
--- a/ui/packages/editor/src/components/EditorHeader.vue
+++ b/ui/packages/editor/src/components/EditorHeader.vue
@@ -59,16 +59,16 @@ function getToolboxItemsFromExtensions() {
 </script>
 <template>
   <div
-    class="editor-header py-1 space-x-1 px-1 overflow-auto border-b shadow-sm bg-white text-center"
+    class="editor-header space-x-1 overflow-auto border-b bg-white px-1 py-1 text-center shadow-sm"
   >
-    <div class="h-full inline-flex items-center">
+    <div class="inline-flex h-full items-center">
       <VMenu>
-        <button class="p-1.5 rounded-md hover:bg-gray-100" tabindex="-1">
+        <button class="rounded-md p-1.5 hover:bg-gray-100" tabindex="-1">
           <MdiPlusCircle class="text-[#4CCBA0]" />
         </button>
         <template #popper>
           <div
-            class="relative rounded-md bg-white overflow-hidden shadow w-56 p-1 max-h-96 overflow-y-auto space-y-1.5"
+            class="relative max-h-96 w-56 space-y-1.5 overflow-hidden overflow-y-auto rounded-md bg-white p-1 shadow"
           >
             <component
               :is="toolboxItem.component"
@@ -80,7 +80,7 @@ function getToolboxItemsFromExtensions() {
           </div>
         </template>
       </VMenu>
-      <div class="h-5 bg-gray-100 w-[1px] !mx-1"></div>
+      <div class="!mx-1 h-5 w-[1px] bg-gray-100"></div>
       <div
         v-for="(item, index) in getToolbarItemsFromExtensions()"
         :key="index"
@@ -106,7 +106,7 @@ function getToolboxItemsFromExtensions() {
             />
             <template #popper>
               <div
-                class="relative rounded-md bg-white overflow-hidden shadow w-56 p-1 max-h-96 overflow-y-auto space-y-1.5"
+                class="relative max-h-96 w-56 space-y-1.5 overflow-hidden overflow-y-auto rounded-md bg-white p-1 shadow"
               >
                 <component
                   v-bind="child.props"
diff --git a/ui/packages/editor/src/components/block/BlockActionButton.vue b/ui/packages/editor/src/components/block/BlockActionButton.vue
index e11cfd5a1..0f7df8bb1 100644
--- a/ui/packages/editor/src/components/block/BlockActionButton.vue
+++ b/ui/packages/editor/src/components/block/BlockActionButton.vue
@@ -27,7 +27,7 @@ withDefaults(
 
 <style lang="scss">
 .editor-block__actions-button {
-  @apply p-1.5 bg-gray-50 rounded-md cursor-pointer hover:bg-gray-200;
+  @apply cursor-pointer rounded-md bg-gray-50 p-1.5 hover:bg-gray-200;
 
   &--selected {
     @apply bg-gray-200;
diff --git a/ui/packages/editor/src/components/block/BlockActionInput.vue b/ui/packages/editor/src/components/block/BlockActionInput.vue
index e8d9d774f..17a6fafd2 100644
--- a/ui/packages/editor/src/components/block/BlockActionInput.vue
+++ b/ui/packages/editor/src/components/block/BlockActionInput.vue
@@ -33,6 +33,6 @@ const value = computed({
 
 <style lang="scss">
 .editor-block__actions-input {
-  @apply bg-gray-50 rounded-md hover:bg-gray-100 block px-2 w-32 py-1 text-sm text-gray-900 border border-gray-300  focus:ring-blue-500 focus:border-blue-500;
+  @apply block w-32 rounded-md border border-gray-300 bg-gray-50 px-2 py-1 text-sm text-gray-900 hover:bg-gray-100 focus:border-blue-500 focus:ring-blue-500;
 }
 </style>
diff --git a/ui/packages/editor/src/components/block/BlockActionSeparator.vue b/ui/packages/editor/src/components/block/BlockActionSeparator.vue
index 3ae37fc71..27a6c4d49 100644
--- a/ui/packages/editor/src/components/block/BlockActionSeparator.vue
+++ b/ui/packages/editor/src/components/block/BlockActionSeparator.vue
@@ -4,7 +4,7 @@
 
 <style>
 .editor-block__actions-separator {
-  @apply h-5 bg-slate-200 mx-1.5;
+  @apply mx-1.5 h-5 bg-slate-200;
   width: 1px;
 }
 </style>
diff --git a/ui/packages/editor/src/components/block/BlockCard.vue b/ui/packages/editor/src/components/block/BlockCard.vue
index 8d16184c5..4071535ab 100644
--- a/ui/packages/editor/src/components/block/BlockCard.vue
+++ b/ui/packages/editor/src/components/block/BlockCard.vue
@@ -41,7 +41,7 @@ function handleInsertNewLine() {
       <slot name="content"></slot>
     </div>
     <div
-      class="invisible group-hover:visible pb-2 absolute -top-12 right-0"
+      class="invisible absolute -top-12 right-0 pb-2 group-hover:visible"
       :class="{ '!visible': selected }"
     >
       <div class="editor-block__actions">
@@ -77,12 +77,11 @@ function handleInsertNewLine() {
   @apply relative my-9;
 
   &__content {
-    @apply transition-all
-    rounded;
+    @apply rounded transition-all;
   }
 
   &__actions {
-    @apply p-1 flex flex-row rounded-lg border gap-0.5 items-center bg-gray-100 h-11 shadow-lg;
+    @apply flex h-11 flex-row items-center gap-0.5 rounded-lg border bg-gray-100 p-1 shadow-lg;
   }
 
   &:hover & {
diff --git a/ui/packages/editor/src/components/bubble/BubbleItem.vue b/ui/packages/editor/src/components/bubble/BubbleItem.vue
index 4bd355e2c..31068c57c 100644
--- a/ui/packages/editor/src/components/bubble/BubbleItem.vue
+++ b/ui/packages/editor/src/components/bubble/BubbleItem.vue
@@ -55,14 +55,14 @@ const handleBubbleItemClick = (editor: Editor) => {
       }"
       :class="{ 'bg-gray-200 !text-black': isActive({ editor }) }"
       :title="title"
-      class="text-gray-600 text-lg hover:bg-gray-100 p-2 rounded-md"
+      class="rounded-md p-2 text-lg text-gray-600 hover:bg-gray-100"
       @click="handleBubbleItemClick(editor)"
     >
-      <component :is="icon" :style="iconStyle" class="w-5 h-5" />
+      <component :is="icon" :style="iconStyle" class="h-5 w-5" />
     </button>
     <template #popper>
       <div
-        class="relative rounded-md bg-white overflow-hidden shadow w-96 p-1 max-h-72 overflow-y-auto"
+        class="relative max-h-72 w-96 overflow-hidden overflow-y-auto rounded-md bg-white p-1 shadow"
       >
         <KeepAlive>
           <component :is="componentRef" v-bind="props"></component>
diff --git a/ui/packages/editor/src/components/bubble/BubbleMenuPlugin.ts b/ui/packages/editor/src/components/bubble/BubbleMenuPlugin.ts
index 6366b9faa..72b895b0f 100644
--- a/ui/packages/editor/src/components/bubble/BubbleMenuPlugin.ts
+++ b/ui/packages/editor/src/components/bubble/BubbleMenuPlugin.ts
@@ -238,14 +238,14 @@ export class BubbleMenuView {
     const placement = this.tippyOptions?.placement
       ? this.tippyOptions?.placement
       : isNodeSelection(selection)
-      ? ACTIVE_BUBBLE_MENUS.length > 1
-        ? "bottom"
-        : "top"
-      : this.tippy?.props.fixed
-      ? "bottom-start"
-      : Math.abs(cursorAt - to) <= Math.abs(cursorAt - from)
-      ? "bottom-start"
-      : "top-start";
+        ? ACTIVE_BUBBLE_MENUS.length > 1
+          ? "bottom"
+          : "top"
+        : this.tippy?.props.fixed
+          ? "bottom-start"
+          : Math.abs(cursorAt - to) <= Math.abs(cursorAt - from)
+            ? "bottom-start"
+            : "top-start";
 
     const otherBubbleMenus = ACTIVE_BUBBLE_MENUS.filter(
       (instance) =>
@@ -258,8 +258,8 @@ export class BubbleMenuView {
     let offsetY = otherBubbleMenus.length
       ? otherBubbleMenus.reduce((prev, instance, currentIndex, array) => {
           const prevY = array[currentIndex - 1]
-            ? array[currentIndex - 1]?.popperInstance?.state?.modifiersData
-                ?.popperOffsets?.y ?? 0
+            ? (array[currentIndex - 1]?.popperInstance?.state?.modifiersData
+                ?.popperOffsets?.y ?? 0)
             : 0;
           const currentY =
             instance?.popperInstance?.state?.modifiersData?.popperOffsets?.y ??
@@ -272,7 +272,7 @@ export class BubbleMenuView {
 
           return prev;
         }, 0)
-      : offset?.[1] ?? 10;
+      : (offset?.[1] ?? 10);
     if (!offsetY) {
       offsetY = 10;
     }
diff --git a/ui/packages/editor/src/components/common/ColorPickerDropdown.vue b/ui/packages/editor/src/components/common/ColorPickerDropdown.vue
index a56dcf882..ef86338ed 100644
--- a/ui/packages/editor/src/components/common/ColorPickerDropdown.vue
+++ b/ui/packages/editor/src/components/common/ColorPickerDropdown.vue
@@ -87,7 +87,7 @@ function onColorChange(color: Payload) {
           v-for="item in getColors()"
           :key="item.color"
           :style="{ backgroundColor: item.color }"
-          class="h-5 w-5 rounded-sm cursor-pointer hover:ring-1 ring-offset-1 ring-gray-300"
+          class="h-5 w-5 cursor-pointer rounded-sm ring-gray-300 ring-offset-1 hover:ring-1"
           :title="item.name"
           @click="handleSetColor(item.color)"
         ></div>
@@ -96,7 +96,7 @@ function onColorChange(color: Payload) {
       <VDropdown placement="right">
         <div class="p-1">
           <div
-            class="flex items-center rounded cursor-pointer hover:bg-gray-100 p-1 justify-between"
+            class="flex cursor-pointer items-center justify-between rounded p-1 hover:bg-gray-100"
           >
             <div class="inline-flex items-center gap-2">
               <MdiPalette />
diff --git a/ui/packages/editor/src/components/toolbar/ToolbarItem.vue b/ui/packages/editor/src/components/toolbar/ToolbarItem.vue
index da6712ddd..6118bc080 100644
--- a/ui/packages/editor/src/components/toolbar/ToolbarItem.vue
+++ b/ui/packages/editor/src/components/toolbar/ToolbarItem.vue
@@ -32,7 +32,7 @@ withDefaults(
       { 'cursor-not-allowed opacity-70': disabled },
       { 'hover:bg-gray-100': !disabled },
     ]"
-    class="inline-flex items-center space-x-1 p-1.5 rounded-md"
+    class="inline-flex items-center space-x-1 rounded-md p-1.5"
     :disabled="disabled"
     tabindex="-1"
     @click="action"
diff --git a/ui/packages/editor/src/components/toolbar/ToolbarSubItem.vue b/ui/packages/editor/src/components/toolbar/ToolbarSubItem.vue
index 29af42227..cd4f99a85 100644
--- a/ui/packages/editor/src/components/toolbar/ToolbarSubItem.vue
+++ b/ui/packages/editor/src/components/toolbar/ToolbarSubItem.vue
@@ -28,15 +28,15 @@ const action = () => {
   <div
     :class="[
       { '!bg-gray-100': isActive },
-      { 'cursor-not-allowed opacity-70 ': disabled },
+      { 'cursor-not-allowed opacity-70': disabled },
       { 'hover:bg-gray-100': !disabled },
     ]"
-    class="flex flex-row items-center rounded gap-3 py-1 px-1.5 group cursor-pointer"
+    class="group flex cursor-pointer flex-row items-center gap-3 rounded px-1.5 py-1"
     @click="action"
   >
     <component
       :is="icon"
-      class="bg-gray-100 p-1.5 rounded w-7 h-7"
+      class="h-7 w-7 rounded bg-gray-100 p-1.5"
       :class="[
         { '!bg-white': isActive },
         { 'group-hover:bg-white': !disabled },
@@ -45,7 +45,7 @@ const action = () => {
     <span
       class="text-sm text-gray-600"
       :class="[
-        { '!text-gray-900 !font-medium': isActive },
+        { '!font-medium !text-gray-900': isActive },
         { 'group-hover:font-medium group-hover:text-gray-900': !disabled },
       ]"
     >
diff --git a/ui/packages/editor/src/components/toolbox/ToolboxItem.vue b/ui/packages/editor/src/components/toolbox/ToolboxItem.vue
index 871b9e7e6..33c0e22e6 100644
--- a/ui/packages/editor/src/components/toolbox/ToolboxItem.vue
+++ b/ui/packages/editor/src/components/toolbox/ToolboxItem.vue
@@ -26,12 +26,12 @@ const action = () => {
 
 <template>
   <div
-    class="flex flex-row items-center rounded gap-3 py-1 px-1.5 group cursor-pointer hover:bg-gray-100"
+    class="group flex cursor-pointer flex-row items-center gap-3 rounded px-1.5 py-1 hover:bg-gray-100"
     @click="action"
   >
     <component
       :is="icon"
-      class="bg-gray-100 p-1.5 rounded w-7 h-7 group-hover:bg-white"
+      class="h-7 w-7 rounded bg-gray-100 p-1.5 group-hover:bg-white"
     />
     <div class="flex flex-col gap-0.5">
       <span
diff --git a/ui/packages/editor/src/extensions/audio/AudioView.vue b/ui/packages/editor/src/extensions/audio/AudioView.vue
index 17bf2d5b3..39bde461e 100644
--- a/ui/packages/editor/src/extensions/audio/AudioView.vue
+++ b/ui/packages/editor/src/extensions/audio/AudioView.vue
@@ -39,13 +39,13 @@ onMounted(() => {
 <template>
   <node-view-wrapper as="div" class="inline-block w-full">
     <div
-      class="inline-block overflow-hidden transition-all text-center relative h-full w-full"
+      class="relative inline-block h-full w-full overflow-hidden text-center transition-all"
     >
       <div v-if="!src" class="p-1.5">
         <input
           ref="inputRef"
           v-model.lazy="src"
-          class="block px-2 w-full py-1.5 text-sm text-gray-900 border border-gray-300 rounded-md bg-gray-50 focus:ring-blue-500 focus:border-blue-500"
+          class="block w-full rounded-md border border-gray-300 bg-gray-50 px-2 py-1.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500"
           :placeholder="i18n.global.t('editor.common.placeholder.link_input')"
           tabindex="-1"
           @focus="handleSetFocus"
diff --git a/ui/packages/editor/src/extensions/audio/BubbleItemAudioLink.vue b/ui/packages/editor/src/extensions/audio/BubbleItemAudioLink.vue
index 9abb09a61..f75a4f01b 100644
--- a/ui/packages/editor/src/extensions/audio/BubbleItemAudioLink.vue
+++ b/ui/packages/editor/src/extensions/audio/BubbleItemAudioLink.vue
@@ -32,6 +32,6 @@ const src = computed({
   <input
     v-model.lazy="src"
     :placeholder="i18n.global.t('editor.common.placeholder.link_input')"
-    class="bg-gray-50 rounded-md hover:bg-gray-100 block px-2 w-full py-1.5 text-sm text-gray-900 border border-gray-300 focus:ring-blue-500 focus:border-blue-500"
+    class="block w-full rounded-md border border-gray-300 bg-gray-50 px-2 py-1.5 text-sm text-gray-900 hover:bg-gray-100 focus:border-blue-500 focus:ring-blue-500"
   />
 </template>
diff --git a/ui/packages/editor/src/extensions/code-block/CodeBlockSelect.vue b/ui/packages/editor/src/extensions/code-block/CodeBlockSelect.vue
index 4fa724ac1..7dcc22168 100644
--- a/ui/packages/editor/src/extensions/code-block/CodeBlockSelect.vue
+++ b/ui/packages/editor/src/extensions/code-block/CodeBlockSelect.vue
@@ -151,17 +151,17 @@ const handleScrollIntoView = () => {
     <div class="relative inline-block w-full" @keydown="handleOptionKeydown">
       <div class="h-8">
         <div
-          class="select-input w-full h-full grid items-center text-sm rounded-md px-3 cursor-pointer box-border"
+          class="select-input box-border grid h-full w-full cursor-pointer items-center rounded-md px-3 text-sm"
           :class="{
             'bg-white': isFocus,
             'border-[1px]': isFocus,
           }"
         >
-          <span class="absolute top-0 bottom-0">
+          <span class="absolute bottom-0 top-0">
             <input
               ref="inputRef"
               v-model="inputValue"
-              class="appearance-none bg-transparent h-full ps-0 pe-0 border-none outline-none m-0 p-0 cursor-auto"
+              class="m-0 h-full cursor-auto appearance-none border-none bg-transparent p-0 pe-0 ps-0 outline-none"
               :placeholder="isFocus ? displayLabel : ''"
               @focus="handleInputFocus"
               @blur="handleInputBlur"
@@ -185,7 +185,7 @@ const handleScrollIntoView = () => {
               v-for="(option, index) in filterOptions"
               :key="option.value"
               :index="index"
-              class="w-full h-8 flex items-center rounded-md text-base px-3 py-1 hover:bg-zinc-100"
+              class="flex h-8 w-full items-center rounded-md px-3 py-1 text-base hover:bg-zinc-100"
               :class="{
                 'bg-zinc-200': option.value === value,
                 'bg-zinc-100': selectedIndex === index,
@@ -199,7 +199,7 @@ const handleScrollIntoView = () => {
           </template>
           <template v-else>
             <div
-              class="w-full h-8 flex items-center rounded-md text-base px-3 py-1"
+              class="flex h-8 w-full items-center rounded-md px-3 py-1 text-base"
             >
               <span class="flex-1 text-ellipsis text-sm">No options</span>
             </div>
diff --git a/ui/packages/editor/src/extensions/code-block/CodeBlockViewRenderer.vue b/ui/packages/editor/src/extensions/code-block/CodeBlockViewRenderer.vue
index 631c0659c..048519325 100644
--- a/ui/packages/editor/src/extensions/code-block/CodeBlockViewRenderer.vue
+++ b/ui/packages/editor/src/extensions/code-block/CodeBlockViewRenderer.vue
@@ -97,19 +97,19 @@ const handleCopyCode = () => {
 <template>
   <node-view-wrapper
     as="div"
-    class="code-node border-[1px] rounded mt-3 overflow-hidden"
+    class="code-node mt-3 overflow-hidden rounded border-[1px]"
   >
     <div
       contenteditable="false"
-      class="bg-neutral-100 border-b-[1px] border-b-gray-100 py-1 flex items-center justify-between"
+      class="flex items-center justify-between border-b-[1px] border-b-gray-100 bg-neutral-100 py-1"
     >
       <div
-        class="flex-1 flex items-center pl-3"
+        class="flex flex-1 items-center pl-3"
         @click.self="collapsed ? (collapsed = false) : null"
       >
-        <div class="pr-3 flex items-center">
+        <div class="flex items-center pr-3">
           <div
-            class="w-8 h-8 cursor-pointer rounded flex items-center justify-center hover:bg-zinc-200"
+            class="flex h-8 w-8 cursor-pointer items-center justify-center rounded hover:bg-zinc-200"
             @click.stop="collapsed = !collapsed"
           >
             <RiArrowRightSFill v-if="collapsed" />
@@ -134,19 +134,19 @@ const handleCopyCode = () => {
         >
         </CodeBlockSelect>
       </div>
-      <div class="pr-3 flex items-center">
+      <div class="flex items-center pr-3">
         <div
           v-tooltip="
             ready
               ? i18n.global.t('editor.common.codeblock.copy_code')
               : i18n.global.t('editor.common.codeblock.copy_code_success')
           "
-          class="w-8 h-8 cursor-pointer rounded flex items-center justify-center"
+          class="flex h-8 w-8 cursor-pointer items-center justify-center rounded"
           :class="{ 'hover:bg-zinc-200': ready }"
           @click="handleCopyCode"
         >
-          <IconCheckboxCircle v-if="!ready" class="w-4 h-4 text-green-500" />
-          <BxBxsCopy v-else class="w-4 h-4 text-gray-500" />
+          <IconCheckboxCircle v-if="!ready" class="h-4 w-4 text-green-500" />
+          <BxBxsCopy v-else class="h-4 w-4 text-gray-500" />
         </div>
       </div>
     </div>
diff --git a/ui/packages/editor/src/extensions/code-block/code-block.ts b/ui/packages/editor/src/extensions/code-block/code-block.ts
index 255534153..aca9e394d 100644
--- a/ui/packages/editor/src/extensions/code-block/code-block.ts
+++ b/ui/packages/editor/src/extensions/code-block/code-block.ts
@@ -19,10 +19,10 @@ import {
   type Range,
 } from "@/tiptap/vue-3";
 import { deleteNode } from "@/utils";
+import TiptapCodeBlock from "@tiptap/extension-code-block";
 import { markRaw } from "vue";
 import MdiCodeBracesBox from "~icons/mdi/code-braces-box";
 import CodeBlockViewRenderer from "./CodeBlockViewRenderer.vue";
-import TiptapCodeBlock from "@tiptap/extension-code-block";
 
 declare module "@/tiptap" {
   interface Commands<ReturnType> {
diff --git a/ui/packages/editor/src/extensions/code-block/index.ts b/ui/packages/editor/src/extensions/code-block/index.ts
index 07f0a6d41..1ab3dd1e8 100644
--- a/ui/packages/editor/src/extensions/code-block/index.ts
+++ b/ui/packages/editor/src/extensions/code-block/index.ts
@@ -1,2 +1,2 @@
-export { default as ExtensionCodeBlock } from "./code-block";
 export * from "./code-block";
+export { default as ExtensionCodeBlock } from "./code-block";
diff --git a/ui/packages/editor/src/extensions/color/ColorBubbleItem.vue b/ui/packages/editor/src/extensions/color/ColorBubbleItem.vue
index d97836585..7f908ef2c 100644
--- a/ui/packages/editor/src/extensions/color/ColorBubbleItem.vue
+++ b/ui/packages/editor/src/extensions/color/ColorBubbleItem.vue
@@ -32,11 +32,11 @@ function handleUnsetColor() {
     <template #prefix>
       <div class="p-1">
         <div
-          class="flex items-center gap-2 rounded cursor-pointer hover:bg-gray-100 p-1"
+          class="flex cursor-pointer items-center gap-2 rounded p-1 hover:bg-gray-100"
           @click="handleUnsetColor"
         >
           <div
-            class="h-5 w-5 rounded-sm cursor-pointer hover:ring-1 ring-offset-1 ring-gray-300 bg-black"
+            class="h-5 w-5 cursor-pointer rounded-sm bg-black ring-gray-300 ring-offset-1 hover:ring-1"
           ></div>
           <span class="text-xs text-gray-600">
             {{ i18n.global.t("editor.common.button.restore_default") }}
diff --git a/ui/packages/editor/src/extensions/color/ColorToolbarItem.vue b/ui/packages/editor/src/extensions/color/ColorToolbarItem.vue
index bb96c348b..f9839480b 100644
--- a/ui/packages/editor/src/extensions/color/ColorToolbarItem.vue
+++ b/ui/packages/editor/src/extensions/color/ColorToolbarItem.vue
@@ -42,11 +42,11 @@ function handleUnsetColor() {
     <template #prefix>
       <div class="p-1">
         <div
-          class="flex items-center gap-2 rounded cursor-pointer hover:bg-gray-100 p-1"
+          class="flex cursor-pointer items-center gap-2 rounded p-1 hover:bg-gray-100"
           @click="handleUnsetColor"
         >
           <div
-            class="h-5 w-5 rounded-sm cursor-pointer hover:ring-1 ring-offset-1 ring-gray-300 bg-black"
+            class="h-5 w-5 cursor-pointer rounded-sm bg-black ring-gray-300 ring-offset-1 hover:ring-1"
           ></div>
           <span class="text-xs text-gray-600">
             {{ i18n.global.t("editor.common.button.restore_default") }}
diff --git a/ui/packages/editor/src/extensions/color/index.ts b/ui/packages/editor/src/extensions/color/index.ts
index 491ddbe70..76302374e 100644
--- a/ui/packages/editor/src/extensions/color/index.ts
+++ b/ui/packages/editor/src/extensions/color/index.ts
@@ -1,9 +1,9 @@
+import TextStyle from "@/extensions/text-style";
 import { i18n } from "@/locales";
 import type { Editor } from "@/tiptap/vue-3";
 import type { ExtensionOptions } from "@/types";
 import type { ColorOptions } from "@tiptap/extension-color";
 import TiptapColor from "@tiptap/extension-color";
-import TextStyle from "@/extensions/text-style";
 import { markRaw } from "vue";
 import MdiFormatColor from "~icons/mdi/format-color";
 import ColorToolbarItem from "./ColorToolbarItem.vue";
diff --git a/ui/packages/editor/src/extensions/commands-menu/CommandsView.vue b/ui/packages/editor/src/extensions/commands-menu/CommandsView.vue
index d8378cd06..fffae5336 100644
--- a/ui/packages/editor/src/extensions/commands-menu/CommandsView.vue
+++ b/ui/packages/editor/src/extensions/commands-menu/CommandsView.vue
@@ -95,7 +95,7 @@ defineExpose({
       >
         <component :is="item.icon" class="command-icon group-hover:!bg-white" />
         <span
-          class="command-title group-hover:text-gray-900 group-hover:font-medium"
+          class="command-title group-hover:font-medium group-hover:text-gray-900"
         >
           {{ i18n.global.t(item.title) }}
         </span>
@@ -110,18 +110,10 @@ defineExpose({
 </template>
 <style lang="scss">
 .command-items {
-  @apply relative
-  rounded-md
-  bg-white
-  overflow-hidden
-  shadow
-  w-52
-  p-1
-  max-h-72
-  overflow-y-auto;
+  @apply relative max-h-72 w-52 overflow-hidden overflow-y-auto rounded-md bg-white p-1 shadow;
 
   .command-item {
-    @apply flex flex-row items-center rounded gap-4 p-1;
+    @apply flex flex-row items-center gap-4 rounded p-1;
 
     &.is-selected {
       @apply bg-gray-100;
@@ -131,22 +123,21 @@ defineExpose({
       }
 
       .command-title {
-        @apply text-gray-900 font-medium;
+        @apply font-medium text-gray-900;
       }
     }
 
     .command-icon {
-      @apply bg-gray-100 p-1 rounded w-6 h-6;
+      @apply h-6 w-6 rounded bg-gray-100 p-1;
     }
 
     .command-title {
-      @apply text-xs 
-      text-gray-600;
+      @apply text-xs text-gray-600;
     }
   }
 
   .command-empty {
-    @apply flex justify-center items-center p-1 text-xs text-gray-600;
+    @apply flex items-center justify-center p-1 text-xs text-gray-600;
   }
 }
 </style>
diff --git a/ui/packages/editor/src/extensions/draggable/index.ts b/ui/packages/editor/src/extensions/draggable/index.ts
index e25754297..4c4015f62 100644
--- a/ui/packages/editor/src/extensions/draggable/index.ts
+++ b/ui/packages/editor/src/extensions/draggable/index.ts
@@ -376,8 +376,8 @@ const dropPoint = (doc: Node, pos: number, slice: Slice) => {
         dep == $pos.depth
           ? 0
           : $pos.pos <= ($pos.start(dep + 1) + $pos.end(dep + 1)) / 2
-          ? -1
-          : 1;
+            ? -1
+            : 1;
       const insertPos = $pos.index(dep) + (bias > 0 ? 1 : 0);
       const parent = $pos.node(dep);
       let fits = false;
@@ -396,8 +396,8 @@ const dropPoint = (doc: Node, pos: number, slice: Slice) => {
         return bias == 0
           ? $pos.pos
           : bias < 0
-          ? $pos.before(dep + 1)
-          : $pos.after(dep + 1);
+            ? $pos.before(dep + 1)
+            : $pos.after(dep + 1);
       }
     }
   }
diff --git a/ui/packages/editor/src/extensions/font-size/index.ts b/ui/packages/editor/src/extensions/font-size/index.ts
index d527d550f..ad1d98f56 100644
--- a/ui/packages/editor/src/extensions/font-size/index.ts
+++ b/ui/packages/editor/src/extensions/font-size/index.ts
@@ -1,7 +1,7 @@
 import { ToolbarItem, ToolbarSubItem } from "@/components";
+import TextStyle from "@/extensions/text-style";
 import { i18n } from "@/locales";
 import { Extension, type Editor } from "@/tiptap/vue-3";
-import TextStyle from "@/extensions/text-style";
 import { markRaw } from "vue";
 import MdiFormatSize from "~icons/mdi/format-size";
 
diff --git a/ui/packages/editor/src/extensions/highlight/HighlightBubbleItem.vue b/ui/packages/editor/src/extensions/highlight/HighlightBubbleItem.vue
index 622e5086d..7d335bfd5 100644
--- a/ui/packages/editor/src/extensions/highlight/HighlightBubbleItem.vue
+++ b/ui/packages/editor/src/extensions/highlight/HighlightBubbleItem.vue
@@ -33,7 +33,7 @@ function handleUnsetColor() {
     <template #prefix>
       <div class="p-1">
         <div
-          class="flex items-center gap-2 rounded cursor-pointer hover:bg-gray-100 p-1"
+          class="flex cursor-pointer items-center gap-2 rounded p-1 hover:bg-gray-100"
           @click="handleUnsetColor"
         >
           <div class="inline-flex items-center gap-2">
@@ -46,11 +46,11 @@ function handleUnsetColor() {
       </div>
       <div class="p-1">
         <div
-          class="flex items-center gap-2 rounded cursor-pointer hover:bg-gray-100 p-1"
+          class="flex cursor-pointer items-center gap-2 rounded p-1 hover:bg-gray-100"
           @click="handleSetColor()"
         >
           <div
-            class="h-5 w-5 rounded-sm cursor-pointer hover:ring-1 ring-offset-1 ring-gray-300"
+            class="h-5 w-5 cursor-pointer rounded-sm ring-gray-300 ring-offset-1 hover:ring-1"
             :style="{ 'background-color': '#fff8c5' }"
           ></div>
           <span class="text-xs text-gray-600">
diff --git a/ui/packages/editor/src/extensions/highlight/HighlightToolbarItem.vue b/ui/packages/editor/src/extensions/highlight/HighlightToolbarItem.vue
index f54c351c9..8040a3d06 100644
--- a/ui/packages/editor/src/extensions/highlight/HighlightToolbarItem.vue
+++ b/ui/packages/editor/src/extensions/highlight/HighlightToolbarItem.vue
@@ -44,7 +44,7 @@ function handleUnsetColor() {
     <template #prefix>
       <div class="p-1">
         <div
-          class="flex items-center gap-2 rounded cursor-pointer hover:bg-gray-100 p-1"
+          class="flex cursor-pointer items-center gap-2 rounded p-1 hover:bg-gray-100"
           @click="handleUnsetColor"
         >
           <div class="inline-flex items-center gap-2">
@@ -57,11 +57,11 @@ function handleUnsetColor() {
       </div>
       <div class="p-1">
         <div
-          class="flex items-center gap-2 rounded cursor-pointer hover:bg-gray-100 p-1"
+          class="flex cursor-pointer items-center gap-2 rounded p-1 hover:bg-gray-100"
           @click="handleSetColor()"
         >
           <div
-            class="h-5 w-5 rounded-sm cursor-pointer hover:ring-1 ring-offset-1 ring-gray-300"
+            class="h-5 w-5 cursor-pointer rounded-sm ring-gray-300 ring-offset-1 hover:ring-1"
             :style="{ 'background-color': '#fff8c5' }"
           ></div>
           <span class="text-xs text-gray-600">
diff --git a/ui/packages/editor/src/extensions/iframe/BubbleItemIframeLink.vue b/ui/packages/editor/src/extensions/iframe/BubbleItemIframeLink.vue
index 5e99ce806..55b06c49c 100644
--- a/ui/packages/editor/src/extensions/iframe/BubbleItemIframeLink.vue
+++ b/ui/packages/editor/src/extensions/iframe/BubbleItemIframeLink.vue
@@ -31,6 +31,6 @@ const src = computed({
   <input
     v-model.lazy="src"
     :placeholder="i18n.global.t('editor.common.placeholder.link_input')"
-    class="bg-gray-50 rounded-md hover:bg-gray-100 block px-2 w-full py-1.5 text-sm text-gray-900 border border-gray-300 focus:ring-blue-500 focus:border-blue-500"
+    class="block w-full rounded-md border border-gray-300 bg-gray-50 px-2 py-1.5 text-sm text-gray-900 hover:bg-gray-100 focus:border-blue-500 focus:ring-blue-500"
   />
 </template>
diff --git a/ui/packages/editor/src/extensions/iframe/IframeView.vue b/ui/packages/editor/src/extensions/iframe/IframeView.vue
index e0b87dd90..e59ae2946 100644
--- a/ui/packages/editor/src/extensions/iframe/IframeView.vue
+++ b/ui/packages/editor/src/extensions/iframe/IframeView.vue
@@ -38,7 +38,7 @@ onMounted(() => {
 <template>
   <node-view-wrapper as="div" class="inline-block w-full">
     <div
-      class="inline-block overflow-hidden transition-all text-center relative h-full max-w-full"
+      class="relative inline-block h-full max-w-full overflow-hidden text-center transition-all"
       :style="{
         width: node.attrs.width,
       }"
@@ -47,7 +47,7 @@ onMounted(() => {
         <input
           ref="inputRef"
           v-model.lazy="src"
-          class="block px-2 w-full py-1.5 text-sm text-gray-900 border border-gray-300 rounded-md bg-gray-50 focus:ring-blue-500 focus:border-blue-500"
+          class="block w-full rounded-md border border-gray-300 bg-gray-50 px-2 py-1.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500"
           :placeholder="i18n.global.t('editor.common.placeholder.link_input')"
           tabindex="-1"
           @focus="handleSetFocus"
diff --git a/ui/packages/editor/src/extensions/image/BubbleItemImageAlt.vue b/ui/packages/editor/src/extensions/image/BubbleItemImageAlt.vue
index 9471302b6..59cb533b0 100644
--- a/ui/packages/editor/src/extensions/image/BubbleItemImageAlt.vue
+++ b/ui/packages/editor/src/extensions/image/BubbleItemImageAlt.vue
@@ -32,6 +32,6 @@ const alt = computed({
   <input
     v-model.lazy="alt"
     :placeholder="i18n.global.t('editor.common.placeholder.alt_input')"
-    class="bg-gray-50 rounded-md hover:bg-gray-100 block px-2 w-full py-1.5 text-sm text-gray-900 border border-gray-300 focus:ring-blue-500 focus:border-blue-500"
+    class="block w-full rounded-md border border-gray-300 bg-gray-50 px-2 py-1.5 text-sm text-gray-900 hover:bg-gray-100 focus:border-blue-500 focus:ring-blue-500"
   />
 </template>
diff --git a/ui/packages/editor/src/extensions/image/BubbleItemImageHref.vue b/ui/packages/editor/src/extensions/image/BubbleItemImageHref.vue
index 999852667..5e6a36f09 100644
--- a/ui/packages/editor/src/extensions/image/BubbleItemImageHref.vue
+++ b/ui/packages/editor/src/extensions/image/BubbleItemImageHref.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
+import { ExtensionImage, ExtensionLink } from "@/extensions";
 import { i18n } from "@/locales";
 import type { Editor } from "@/tiptap/vue-3";
 import { computed, type Component } from "vue";
-import { ExtensionLink, ExtensionImage } from "@/extensions";
 
 const props = defineProps<{
   editor: Editor;
@@ -41,13 +41,13 @@ const target = computed({
   <input
     v-model.lazy="href"
     :placeholder="i18n.global.t('editor.common.placeholder.alt_href')"
-    class="bg-gray-50 rounded-md hover:bg-gray-100 block px-2 w-full py-1.5 text-sm text-gray-900 border border-gray-300 focus:ring-blue-500 focus:border-blue-500"
+    class="block w-full rounded-md border border-gray-300 bg-gray-50 px-2 py-1.5 text-sm text-gray-900 hover:bg-gray-100 focus:border-blue-500 focus:ring-blue-500"
   />
-  <label class="inline-flex items-center mt-2">
+  <label class="mt-2 inline-flex items-center">
     <input
       v-model="target"
       type="checkbox"
-      class="form-checkbox text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
+      class="form-checkbox rounded border-gray-300 text-blue-600 focus:ring-blue-500"
     />
     <span class="ml-2 text-sm text-gray-500">
       {{ i18n.global.t("editor.extensions.link.open_in_new_window") }}
diff --git a/ui/packages/editor/src/extensions/image/BubbleItemImageLink.vue b/ui/packages/editor/src/extensions/image/BubbleItemImageLink.vue
index 761a49d9a..689a7f2c8 100644
--- a/ui/packages/editor/src/extensions/image/BubbleItemImageLink.vue
+++ b/ui/packages/editor/src/extensions/image/BubbleItemImageLink.vue
@@ -32,6 +32,6 @@ const src = computed({
   <input
     v-model.lazy="src"
     :placeholder="i18n.global.t('editor.common.placeholder.link_input')"
-    class="bg-gray-50 rounded-md hover:bg-gray-100 block px-2 w-full py-1.5 text-sm text-gray-900 border border-gray-300 focus:ring-blue-500 focus:border-blue-500"
+    class="block w-full rounded-md border border-gray-300 bg-gray-50 px-2 py-1.5 text-sm text-gray-900 hover:bg-gray-100 focus:border-blue-500 focus:ring-blue-500"
   />
 </template>
diff --git a/ui/packages/editor/src/extensions/image/ImageView.vue b/ui/packages/editor/src/extensions/image/ImageView.vue
index 64dfd69c3..8aab77a43 100644
--- a/ui/packages/editor/src/extensions/image/ImageView.vue
+++ b/ui/packages/editor/src/extensions/image/ImageView.vue
@@ -95,11 +95,11 @@ onMounted(() => {
 
 <template>
   <node-view-wrapper as="div" class="inline-block w-full">
-    <div v-if="!src" class="p-1.5 w-full">
+    <div v-if="!src" class="w-full p-1.5">
       <input
         ref="inputRef"
         v-model.lazy="src"
-        class="block px-2 w-full py-1.5 text-sm text-gray-900 border border-gray-300 rounded-md bg-gray-50 focus:ring-blue-500 focus:border-blue-500"
+        class="block w-full rounded-md border border-gray-300 bg-gray-50 px-2 py-1.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500"
         :placeholder="i18n.global.t('editor.common.placeholder.link_input')"
         tabindex="-1"
         @focus="handleSetFocus"
@@ -108,9 +108,9 @@ onMounted(() => {
     <div
       v-else
       ref="resizeRef"
-      class="resize-x inline-block overflow-hidden text-center relative rounded-md max-w-full"
+      class="relative inline-block max-w-full resize-x overflow-hidden rounded-md text-center"
       :class="{
-        'ring-2 rounded': selected,
+        'rounded ring-2': selected,
       }"
       :style="{
         width: node.attrs.width,
@@ -122,7 +122,7 @@ onMounted(() => {
         :title="node.attrs.title"
         :alt="alt"
         :href="href"
-        class="w-full h-full"
+        class="h-full w-full"
         @load="onImageLoaded"
       />
     </div>
diff --git a/ui/packages/editor/src/extensions/index.ts b/ui/packages/editor/src/extensions/index.ts
index 180d34979..50309370b 100644
--- a/ui/packages/editor/src/extensions/index.ts
+++ b/ui/packages/editor/src/extensions/index.ts
@@ -28,11 +28,11 @@ import ExtensionTextAlign from "./text-align";
 import ExtensionUnderline from "./underline";
 
 // Custom extensions
-import ExtensionTextStyle from "@/extensions/text-style";
 import {
   ExtensionCodeBlock,
   type ExtensionCodeBlockOptions,
 } from "@/extensions/code-block";
+import ExtensionTextStyle from "@/extensions/text-style";
 import { ExtensionCommands } from "../extensions/commands-menu";
 import ExtensionAudio from "./audio";
 import ExtensionClearFormat from "./clear-format";
@@ -110,6 +110,7 @@ const allExtensions = [
 ];
 
 export {
+  allExtensions,
   ExtensionAudio,
   ExtensionBlockquote,
   ExtensionBold,
@@ -156,7 +157,6 @@ export {
   ExtensionUnderline,
   ExtensionVideo,
   RangeSelection,
-  allExtensions,
 };
 
 export type { ExtensionCodeBlockOptions };
diff --git a/ui/packages/editor/src/extensions/link/LinkBubbleButton.vue b/ui/packages/editor/src/extensions/link/LinkBubbleButton.vue
index 66a95ac34..7432d9aff 100644
--- a/ui/packages/editor/src/extensions/link/LinkBubbleButton.vue
+++ b/ui/packages/editor/src/extensions/link/LinkBubbleButton.vue
@@ -102,7 +102,7 @@ const handleLinkBubbleButton = () => {
           ? i18n.global.t('editor.extensions.link.edit_link')
           : i18n.global.t('editor.extensions.link.add_link')
       "
-      class="text-gray-600 text-lg hover:bg-gray-100 p-2 rounded-md"
+      class="rounded-md p-2 text-lg text-gray-600 hover:bg-gray-100"
       :class="{ 'bg-gray-200 !text-black': isActive({ editor }) }"
     >
       <MdiLinkVariant />
@@ -110,29 +110,29 @@ const handleLinkBubbleButton = () => {
 
     <template #popper>
       <div
-        class="relative rounded-md bg-white overflow-hidden shadow w-96 p-1 max-h-72 overflow-y-auto"
+        class="relative max-h-72 w-96 overflow-hidden overflow-y-auto rounded-md bg-white p-1 shadow"
       >
         <input
           v-model.lazy="href"
           :placeholder="i18n.global.t('editor.extensions.link.placeholder')"
-          class="bg-gray-50 rounded-md hover:bg-gray-100 block px-2 w-full py-1.5 text-sm text-gray-900 border border-gray-300 focus:ring-blue-500 focus:border-blue-500"
+          class="block w-full rounded-md border border-gray-300 bg-gray-50 px-2 py-1.5 text-sm text-gray-900 hover:bg-gray-100 focus:border-blue-500 focus:ring-blue-500"
         />
-        <label class="inline-flex items-center mt-2 mr-2">
+        <label class="mr-2 mt-2 inline-flex items-center">
           <input
             v-model="target"
             type="checkbox"
-            class="form-checkbox text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
+            class="form-checkbox rounded border-gray-300 text-blue-600 focus:ring-blue-500"
           />
           <span class="ml-2 text-sm text-gray-500">
             {{ i18n.global.t("editor.extensions.link.open_in_new_window") }}
           </span>
         </label>
-        <label class="inline-flex items-center mt-2">
+        <label class="mt-2 inline-flex items-center">
           <!-- nofollow -->
           <input
             v-model="rel"
             type="checkbox"
-            class="form-checkbox text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
+            class="form-checkbox rounded border-gray-300 text-blue-600 focus:ring-blue-500"
           />
           <span class="ml-2 text-sm text-gray-500">
             {{ i18n.global.t("editor.extensions.link.nofollow") }}
diff --git a/ui/packages/editor/src/extensions/range-selection/range-selection.ts b/ui/packages/editor/src/extensions/range-selection/range-selection.ts
index fa6157ed2..ce606b5de 100644
--- a/ui/packages/editor/src/extensions/range-selection/range-selection.ts
+++ b/ui/packages/editor/src/extensions/range-selection/range-selection.ts
@@ -147,7 +147,10 @@ class RangeSelection extends Selection {
 Selection.jsonID("range", RangeSelection);
 
 class RangeBookmark {
-  constructor(readonly anchor: number, readonly head: number) {}
+  constructor(
+    readonly anchor: number,
+    readonly head: number
+  ) {}
 
   map(mapping: Mappable) {
     return new RangeBookmark(mapping.map(this.anchor), mapping.map(this.head));
diff --git a/ui/packages/editor/src/extensions/search-and-replace/SearchAndReplace.vue b/ui/packages/editor/src/extensions/search-and-replace/SearchAndReplace.vue
index 5214d72f0..d36ec141d 100644
--- a/ui/packages/editor/src/extensions/search-and-replace/SearchAndReplace.vue
+++ b/ui/packages/editor/src/extensions/search-and-replace/SearchAndReplace.vue
@@ -155,17 +155,17 @@ watch(
 <template>
   <Transition v-show="visible" appear name="slide">
     <div
-      class="absolute float-right top-0 right-5 z-50 flex justify-end bg-white shadow p-1 !pt-2 rounded min-w-[500px]"
+      class="absolute right-5 top-0 z-50 float-right flex min-w-[500px] justify-end rounded bg-white p-1 !pt-2 shadow"
       @keydown.escape.prevent="handleCloseSearch"
     >
-      <section class="w-full flex flex-col gap-1">
-        <div class="flex items-center relative">
+      <section class="flex w-full flex-col gap-1">
+        <div class="relative flex items-center">
           <div class="relative w-full max-w-[55%]">
             <input
               ref="searchInput"
               v-model="searchTerm"
               type="text"
-              class="block w-full p-1 ps-2 !pr-[5.5rem] bg-gray-50 rounded border !border-solid !text-sm !leading-7 border-gray-300 text-gray-900 focus:ring-blue-500 focus:border-blue-500"
+              class="block w-full rounded border !border-solid border-gray-300 bg-gray-50 p-1 !pr-[5.5rem] ps-2 !text-sm !leading-7 text-gray-900 focus:border-blue-500 focus:ring-blue-500"
               :placeholder="
                 i18n.global.t(
                   'editor.extensions.search_and_replace.search_placeholder'
@@ -174,7 +174,7 @@ watch(
               tabindex="2"
               @keydown.enter.prevent="findNextSearchResult"
             />
-            <div class="absolute inset-y-0 end-0 flex items-center pr-1 gap-1">
+            <div class="absolute inset-y-0 end-0 flex items-center gap-1 pr-1">
               <button
                 :title="
                   i18n.global.t(
@@ -182,7 +182,7 @@ watch(
                   )
                 "
                 type="button"
-                class="p-0.5 rounded-sm hover:bg-gray-200"
+                class="rounded-sm p-0.5 hover:bg-gray-200"
                 :class="{
                   '!bg-blue-200 outline outline-1 outline-blue-500 hover:!bg-blue-200':
                     caseSensitive,
@@ -198,7 +198,7 @@ watch(
                   )
                 "
                 type="button"
-                class="p-0.5 rounded-sm hover:bg-gray-200"
+                class="rounded-sm p-0.5 hover:bg-gray-200"
                 :class="{
                   '!bg-blue-200 outline outline-1 outline-blue-500 hover:!bg-blue-200':
                     matchWord,
@@ -214,7 +214,7 @@ watch(
                   )
                 "
                 type="button"
-                class="p-0.5 rounded-sm hover:bg-gray-200"
+                class="rounded-sm p-0.5 hover:bg-gray-200"
                 :class="{
                   '!bg-blue-200 outline outline-1 outline-blue-500 hover:!bg-blue-200':
                     regex,
@@ -225,7 +225,7 @@ watch(
               </button>
             </div>
           </div>
-          <div class="min-w-[130px] text-sm mx-2">
+          <div class="mx-2 min-w-[130px] text-sm">
             <div v-if="findState.findCount === 0">
               <span :class="{ 'text-red-600': searchTerm.length > 0 }">{{
                 i18n.global.t("editor.extensions.search_and_replace.not_found")
@@ -245,7 +245,7 @@ watch(
               </span>
             </div>
           </div>
-          <div class="h-full flex items-center absolute right-0">
+          <div class="absolute right-0 flex h-full items-center">
             <button
               :title="
                 i18n.global.t(
@@ -253,9 +253,9 @@ watch(
                 )
               "
               type="button"
-              class="p-0.5 rounded-sm opacity-50"
+              class="rounded-sm p-0.5 opacity-50"
               :class="{
-                'hover:!bg-gray-200 !opacity-100': findState.findCount > 0,
+                '!opacity-100 hover:!bg-gray-200': findState.findCount > 0,
               }"
               :disabled="findState.findCount === 0"
               @click="findPreviousSearchResult"
@@ -267,9 +267,9 @@ watch(
                 i18n.global.t('editor.extensions.search_and_replace.find_next')
               "
               type="button"
-              class="p-0.5 rounded-sm opacity-50"
+              class="rounded-sm p-0.5 opacity-50"
               :class="{
-                'hover:!bg-gray-200 !opacity-100': findState.findCount > 0,
+                '!opacity-100 hover:!bg-gray-200': findState.findCount > 0,
               }"
               :disabled="findState.findCount === 0"
               @click="findNextSearchResult"
@@ -281,7 +281,7 @@ watch(
                 i18n.global.t('editor.extensions.search_and_replace.close')
               "
               type="button"
-              class="p-0.5 rounded-sm hover:bg-gray-200"
+              class="rounded-sm p-0.5 hover:bg-gray-200"
               @click="handleCloseSearch"
             >
               <MdiClose></MdiClose>
@@ -294,7 +294,7 @@ watch(
             <input
               v-model="replaceTerm"
               type="text"
-              class="block w-full p-1 ps-2 rounded bg-gray-50 border !border-solid !text-sm !leading-7 border-gray-300 text-gray-900 focus:ring-blue-500 focus:border-blue-500"
+              class="block w-full rounded border !border-solid border-gray-300 bg-gray-50 p-1 ps-2 !text-sm !leading-7 text-gray-900 focus:border-blue-500 focus:ring-blue-500"
               :placeholder="
                 i18n.global.t(
                   'editor.extensions.search_and_replace.replace_placeholder'
@@ -304,15 +304,15 @@ watch(
               @keydown.enter.prevent="replace"
             />
           </div>
-          <div class="flex items-center gap-2 mx-2">
+          <div class="mx-2 flex items-center gap-2">
             <button
               :title="
                 i18n.global.t('editor.extensions.search_and_replace.replace')
               "
               type="button"
-              class="p-0.5 rounded-sm opacity-50"
+              class="rounded-sm p-0.5 opacity-50"
               :class="{
-                'hover:!bg-gray-200 !opacity-100': findState.findCount > 0,
+                '!opacity-100 hover:!bg-gray-200': findState.findCount > 0,
               }"
               :disabled="findState.findCount === 0"
               @click="replace"
@@ -326,9 +326,9 @@ watch(
                 )
               "
               type="button"
-              class="p-0.5 rounded-sm opacity-50"
+              class="rounded-sm p-0.5 opacity-50"
               :class="{
-                'hover:!bg-gray-200 !opacity-100': findState.findCount > 0,
+                '!opacity-100 hover:!bg-gray-200': findState.findCount > 0,
               }"
               :disabled="findState.findCount === 0"
               @click="replaceAll"
diff --git a/ui/packages/editor/src/extensions/table/util.ts b/ui/packages/editor/src/extensions/table/util.ts
index d51777ccf..8b7906a81 100644
--- a/ui/packages/editor/src/extensions/table/util.ts
+++ b/ui/packages/editor/src/extensions/table/util.ts
@@ -79,28 +79,31 @@ export const getCellsInColumn =
       const indexes = Array.isArray(columnIndex)
         ? columnIndex
         : Array.from([columnIndex]);
-      return indexes.reduce((acc, index) => {
-        if (index >= 0 && index <= map.width - 1) {
-          const cells = map.cellsInRect({
-            left: index,
-            right: index + 1,
-            top: 0,
-            bottom: map.height,
-          });
-          return acc.concat(
-            cells.map((nodePos: number) => {
-              const node = table.node.nodeAt(nodePos);
-              const pos = nodePos + table.start;
-              return { pos, start: pos + 1, node };
-            }) as unknown as {
-              pos: number;
-              start: number;
-              node: Node | null | undefined;
-            }[]
-          );
-        }
-        return acc;
-      }, [] as { pos: number; start: number; node: Node | null | undefined }[]);
+      return indexes.reduce(
+        (acc, index) => {
+          if (index >= 0 && index <= map.width - 1) {
+            const cells = map.cellsInRect({
+              left: index,
+              right: index + 1,
+              top: 0,
+              bottom: map.height,
+            });
+            return acc.concat(
+              cells.map((nodePos: number) => {
+                const node = table.node.nodeAt(nodePos);
+                const pos = nodePos + table.start;
+                return { pos, start: pos + 1, node };
+              }) as unknown as {
+                pos: number;
+                start: number;
+                node: Node | null | undefined;
+              }[]
+            );
+          }
+          return acc;
+        },
+        [] as { pos: number; start: number; node: Node | null | undefined }[]
+      );
     }
   };
 
@@ -112,28 +115,31 @@ export const getCellsInRow =
       const indexes = Array.isArray(rowIndex)
         ? rowIndex
         : Array.from([rowIndex]);
-      return indexes.reduce((acc, index) => {
-        if (index >= 0 && index <= map.height - 1) {
-          const cells = map.cellsInRect({
-            left: 0,
-            right: map.width,
-            top: index,
-            bottom: index + 1,
-          });
-          return acc.concat(
-            cells.map((nodePos) => {
-              const node = table.node.nodeAt(nodePos);
-              const pos = nodePos + table.start;
-              return { pos, start: pos + 1, node };
-            }) as unknown as {
-              pos: number;
-              start: number;
-              node: Node | null | undefined;
-            }[]
-          );
-        }
-        return acc;
-      }, [] as { pos: number; start: number; node: Node | null | undefined }[]);
+      return indexes.reduce(
+        (acc, index) => {
+          if (index >= 0 && index <= map.height - 1) {
+            const cells = map.cellsInRect({
+              left: 0,
+              right: map.width,
+              top: index,
+              bottom: index + 1,
+            });
+            return acc.concat(
+              cells.map((nodePos) => {
+                const node = table.node.nodeAt(nodePos);
+                const pos = nodePos + table.start;
+                return { pos, start: pos + 1, node };
+              }) as unknown as {
+                pos: number;
+                start: number;
+                node: Node | null | undefined;
+              }[]
+            );
+          }
+          return acc;
+        },
+        [] as { pos: number; start: number; node: Node | null | undefined }[]
+      );
     }
   };
 
diff --git a/ui/packages/editor/src/extensions/video/BubbleItemVideoLink.vue b/ui/packages/editor/src/extensions/video/BubbleItemVideoLink.vue
index 59c93a15d..862fd1321 100644
--- a/ui/packages/editor/src/extensions/video/BubbleItemVideoLink.vue
+++ b/ui/packages/editor/src/extensions/video/BubbleItemVideoLink.vue
@@ -27,6 +27,6 @@ const src = computed({
   <input
     v-model.lazy="src"
     :placeholder="i18n.global.t('editor.common.placeholder.link_input')"
-    class="bg-gray-50 rounded-md hover:bg-gray-100 block px-2 w-full py-1.5 text-sm text-gray-900 border border-gray-300 focus:ring-blue-500 focus:border-blue-500"
+    class="block w-full rounded-md border border-gray-300 bg-gray-50 px-2 py-1.5 text-sm text-gray-900 hover:bg-gray-100 focus:border-blue-500 focus:ring-blue-500"
   />
 </template>
diff --git a/ui/packages/editor/src/extensions/video/BubbleItemVideoSize.vue b/ui/packages/editor/src/extensions/video/BubbleItemVideoSize.vue
index ce122ddcb..1b398025d 100644
--- a/ui/packages/editor/src/extensions/video/BubbleItemVideoSize.vue
+++ b/ui/packages/editor/src/extensions/video/BubbleItemVideoSize.vue
@@ -54,6 +54,6 @@ function handleSetSize(width: string, height: string) {
 </template>
 <style lang="scss">
 .editor-block__actions-input {
-  @apply bg-gray-50 rounded-md hover:bg-gray-100 block px-2 w-32 py-1 text-sm text-gray-900 border border-gray-300  focus:ring-blue-500 focus:border-blue-500;
+  @apply block w-32 rounded-md border border-gray-300 bg-gray-50 px-2 py-1 text-sm text-gray-900 hover:bg-gray-100 focus:border-blue-500 focus:ring-blue-500;
 }
 </style>
diff --git a/ui/packages/editor/src/extensions/video/VideoView.vue b/ui/packages/editor/src/extensions/video/VideoView.vue
index 4ab6e5719..830a6509b 100644
--- a/ui/packages/editor/src/extensions/video/VideoView.vue
+++ b/ui/packages/editor/src/extensions/video/VideoView.vue
@@ -43,7 +43,7 @@ onMounted(() => {
 <template>
   <node-view-wrapper as="div" class="inline-block w-full">
     <div
-      class="inline-block overflow-hidden transition-all text-center relative h-full max-w-full"
+      class="relative inline-block h-full max-w-full overflow-hidden text-center transition-all"
       :style="{
         width: node.attrs.width,
       }"
@@ -52,7 +52,7 @@ onMounted(() => {
         <input
           ref="inputRef"
           v-model.lazy="src"
-          class="block px-2 w-full py-1.5 text-sm text-gray-900 border border-gray-300 rounded-md bg-gray-50 focus:ring-blue-500 focus:border-blue-500"
+          class="block w-full rounded-md border border-gray-300 bg-gray-50 px-2 py-1.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500"
           :placeholder="i18n.global.t('editor.common.placeholder.link_input')"
           tabindex="-1"
           @focus="handleSetFocus"
@@ -63,7 +63,7 @@ onMounted(() => {
         :controls="controls"
         :autoplay="autoplay"
         :loop="loop"
-        class="rounded-md m-0"
+        class="m-0 rounded-md"
         :src="node!.attrs.src"
         :style="{
           width: node.attrs.width,
diff --git a/ui/packages/editor/src/styles/base.scss b/ui/packages/editor/src/styles/base.scss
index 54f4691c2..010d0ca2d 100644
--- a/ui/packages/editor/src/styles/base.scss
+++ b/ui/packages/editor/src/styles/base.scss
@@ -97,7 +97,7 @@
 
 .v-popper--theme-editor-block-dropdown {
   .v-popper__inner {
-    @apply bg-white shadow-md rounded-md;
+    @apply rounded-md bg-white shadow-md;
   }
 
   .v-popper__arrow-container {
diff --git a/ui/packages/editor/src/styles/format-brush.scss b/ui/packages/editor/src/styles/format-brush.scss
index 3cb3781bb..44a1a68f8 100644
--- a/ui/packages/editor/src/styles/format-brush.scss
+++ b/ui/packages/editor/src/styles/format-brush.scss
@@ -1,7 +1,8 @@
 .halo-rich-text-editor {
   .ProseMirror {
     &.format-brush-mode {
-      cursor: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PHBhdGggZD0iTTI0IDB2MjRIMFYwek0xMi41OTQgMjMuMjU4bC0uMDEyLjAwMmwtLjA3MS4wMzVsLS4wMi4wMDRsLS4wMTQtLjAwNGwtLjA3MS0uMDM2Yy0uMDEtLjAwMy0uMDE5IDAtLjAyNC4wMDZsLS4wMDQuMDFsLS4wMTcuNDI4bC4wMDUuMDJsLjAxLjAxM2wuMTA0LjA3NGwuMDE1LjAwNGwuMDEyLS4wMDRsLjEwNC0uMDc0bC4wMTItLjAxNmwuMDA0LS4wMTdsLS4wMTctLjQyN2MtLjAwMi0uMDEtLjAwOS0uMDE3LS4wMTYtLjAxOG0uMjY0LS4xMTNsLS4wMTQuMDAybC0uMTg0LjA5M2wtLjAxLjAxbC0uMDAzLjAxMWwuMDE4LjQzbC4wMDUuMDEybC4wMDguMDA4bC4yMDEuMDkyYy4wMTIuMDA0LjAyMyAwIC4wMjktLjAwOGwuMDA0LS4wMTRsLS4wMzQtLjYxNGMtLjAwMy0uMDEyLS4wMS0uMDItLjAyLS4wMjJtLS43MTUuMDAyYS4wMjMuMDIzIDAgMCAwLS4wMjcuMDA2bC0uMDA2LjAxNGwtLjAzNC42MTRjMCAuMDEyLjAwNy4wMi4wMTcuMDI0bC4wMTUtLjAwMmwuMjAxLS4wOTNsLjAxLS4wMDhsLjAwMy0uMDExbC4wMTgtLjQzbC0uMDAzLS4wMTJsLS4wMS0uMDF6Ii8+PHBhdGggZmlsbD0iY3VycmVudENvbG9yIiBkPSJNMTQuMzMgMi4zMDdhMyAzIDAgMCAxIDIuMTIgMy42NzRsLTEuMDM1IDMuODY0bDEuMzU4LjM2M2MxLjY1NC40NDQgMi41MSAyLjEyIDIuMjc4IDMuNjU2Yy0uMTEuNzI5LS4xNTQgMS40NDYtLjA2NSAxLjk2OGMuMTg1IDEuMDg0LjgwOCAyLjE0NiAxLjQ1OCAzLjA3M2wuMzU0LjQ5MkExIDEgMCAwIDEgMjAgMjFINS41Yy0uMzIgMC0uNjI3LS4xNTgtLjgxMy0uNDE4Yy0uNDg5LS42ODQtLjgzOC0xLjQ1OC0xLjEyNS0yLjI0NGMtLjUtMS4zNjQtLjkxNy0zLjI5My0uNTQ4LTUuNTAyYTExLjYzMyAxMS42MzMgMCAwIDEgMS40MjgtMy45OTRjLjY1NS0xLjEwOCAxLjkzMS0xLjQyIDIuOTkxLTEuMTM2bDIuMTg3LjU4NmwxLjAzNS0zLjg2NGEzIDMgMCAwIDEgMy42NzQtMi4xMjFaTTcuOTc4IDE1YTEgMSAwIDAgMC0uOTkzIDEuMDA3Yy4wMDcgMS4wMjQuMzI3IDIuMDA1LjY2OSAyLjc3bC4xMDIuMjIzaDIuMjc3YTguOTQ0IDguOTQ0IDAgMCAxLS4zOTItLjY5OWMtLjMxLS42MTctLjU4My0xLjM0OC0uNjQ0LTIuMDQ3bC0uMDEyLS4yNjFBMSAxIDAgMCAwIDcuOTc5IDE1Wm00LjYwOC0xMC4wNTRsLTEuMjk0IDQuODNhMSAxIDAgMCAxLTEuMjI1LjcwNmwtMy4xNTItLjg0NGMtLjM4My0uMTAzLS42NDYuMDQzLS43NTEuMjIxYTkuMTExIDkuMTExIDAgMCAwLS43MDMgMS40OTRsMTEuNTEgMy4wNTNjLjAyNS0uMjkzLjA2MS0uNTc4LjEwMS0uODQyYy4xMDUtLjY5LS4yOTctMS4yODQtLjgxOC0xLjQyNGwtMi4zMjMtLjYyMmExIDEgMCAwIDEtLjcwNy0xLjIyNWwxLjI5NC00LjgzYTEgMSAwIDAgMC0xLjkzMi0uNTE3Ii8+PC9nPjwvc3ZnPg==)
+      cursor:
+        url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PHBhdGggZD0iTTI0IDB2MjRIMFYwek0xMi41OTQgMjMuMjU4bC0uMDEyLjAwMmwtLjA3MS4wMzVsLS4wMi4wMDRsLS4wMTQtLjAwNGwtLjA3MS0uMDM2Yy0uMDEtLjAwMy0uMDE5IDAtLjAyNC4wMDZsLS4wMDQuMDFsLS4wMTcuNDI4bC4wMDUuMDJsLjAxLjAxM2wuMTA0LjA3NGwuMDE1LjAwNGwuMDEyLS4wMDRsLjEwNC0uMDc0bC4wMTItLjAxNmwuMDA0LS4wMTdsLS4wMTctLjQyN2MtLjAwMi0uMDEtLjAwOS0uMDE3LS4wMTYtLjAxOG0uMjY0LS4xMTNsLS4wMTQuMDAybC0uMTg0LjA5M2wtLjAxLjAxbC0uMDAzLjAxMWwuMDE4LjQzbC4wMDUuMDEybC4wMDguMDA4bC4yMDEuMDkyYy4wMTIuMDA0LjAyMyAwIC4wMjktLjAwOGwuMDA0LS4wMTRsLS4wMzQtLjYxNGMtLjAwMy0uMDEyLS4wMS0uMDItLjAyLS4wMjJtLS43MTUuMDAyYS4wMjMuMDIzIDAgMCAwLS4wMjcuMDA2bC0uMDA2LjAxNGwtLjAzNC42MTRjMCAuMDEyLjAwNy4wMi4wMTcuMDI0bC4wMTUtLjAwMmwuMjAxLS4wOTNsLjAxLS4wMDhsLjAwMy0uMDExbC4wMTgtLjQzbC0uMDAzLS4wMTJsLS4wMS0uMDF6Ii8+PHBhdGggZmlsbD0iY3VycmVudENvbG9yIiBkPSJNMTQuMzMgMi4zMDdhMyAzIDAgMCAxIDIuMTIgMy42NzRsLTEuMDM1IDMuODY0bDEuMzU4LjM2M2MxLjY1NC40NDQgMi41MSAyLjEyIDIuMjc4IDMuNjU2Yy0uMTEuNzI5LS4xNTQgMS40NDYtLjA2NSAxLjk2OGMuMTg1IDEuMDg0LjgwOCAyLjE0NiAxLjQ1OCAzLjA3M2wuMzU0LjQ5MkExIDEgMCAwIDEgMjAgMjFINS41Yy0uMzIgMC0uNjI3LS4xNTgtLjgxMy0uNDE4Yy0uNDg5LS42ODQtLjgzOC0xLjQ1OC0xLjEyNS0yLjI0NGMtLjUtMS4zNjQtLjkxNy0zLjI5My0uNTQ4LTUuNTAyYTExLjYzMyAxMS42MzMgMCAwIDEgMS40MjgtMy45OTRjLjY1NS0xLjEwOCAxLjkzMS0xLjQyIDIuOTkxLTEuMTM2bDIuMTg3LjU4NmwxLjAzNS0zLjg2NGEzIDMgMCAwIDEgMy42NzQtMi4xMjFaTTcuOTc4IDE1YTEgMSAwIDAgMC0uOTkzIDEuMDA3Yy4wMDcgMS4wMjQuMzI3IDIuMDA1LjY2OSAyLjc3bC4xMDIuMjIzaDIuMjc3YTguOTQ0IDguOTQ0IDAgMCAxLS4zOTItLjY5OWMtLjMxLS42MTctLjU4My0xLjM0OC0uNjQ0LTIuMDQ3bC0uMDEyLS4yNjFBMSAxIDAgMCAwIDcuOTc5IDE1Wm00LjYwOC0xMC4wNTRsLTEuMjk0IDQuODNhMSAxIDAgMCAxLTEuMjI1LjcwNmwtMy4xNTItLjg0NGMtLjM4My0uMTAzLS42NDYuMDQzLS43NTEuMjIxYTkuMTExIDkuMTExIDAgMCAwLS43MDMgMS40OTRsMTEuNTEgMy4wNTNjLjAyNS0uMjkzLjA2MS0uNTc4LjEwMS0uODQyYy4xMDUtLjY5LS4yOTctMS4yODQtLjgxOC0xLjQyNGwtMi4zMjMtLjYyMmExIDEgMCAwIDEtLjcwNy0xLjIyNWwxLjI5NC00LjgzYTEgMSAwIDAgMC0xLjkzMi0uNTE3Ii8+PC9nPjwvc3ZnPg==)
           5 10,
         text;
     }
diff --git a/ui/packages/editor/vite.lib.config.ts b/ui/packages/editor/vite.lib.config.ts
index 4a7b53f72..6d1881dbe 100644
--- a/ui/packages/editor/vite.lib.config.ts
+++ b/ui/packages/editor/vite.lib.config.ts
@@ -1,11 +1,11 @@
 import { fileURLToPath, URL } from "url";
 
-import { defineConfig } from "vite";
-import Vue from "@vitejs/plugin-vue";
-import Icons from "unplugin-icons/vite";
-import dts from "vite-plugin-dts";
-import path from "path";
 import VueI18nPlugin from "@intlify/unplugin-vue-i18n/vite";
+import Vue from "@vitejs/plugin-vue";
+import path from "path";
+import Icons from "unplugin-icons/vite";
+import { defineConfig } from "vite";
+import dts from "vite-plugin-dts";
 
 export default ({ mode }: { mode: string }) => {
   const isProduction = mode === "production";
diff --git a/ui/packages/shared/package.json b/ui/packages/shared/package.json
index 39bbb7bdd..b62096d15 100644
--- a/ui/packages/shared/package.json
+++ b/ui/packages/shared/package.json
@@ -30,7 +30,6 @@
   "scripts": {
     "build": "tsdown",
     "dev": "tsdown --watch",
-    "prettier": "prettier --write './src/**/*.{vue,js,jsx,ts,tsx,css,scss,json,yml,yaml,html}'",
     "typecheck": "tsc --noEmit -p tsconfig.app.json --composite false"
   },
   "dependencies": {
diff --git a/ui/packages/shared/prettier.config.js b/ui/packages/shared/prettier.config.js
deleted file mode 100644
index 23ebaf45d..000000000
--- a/ui/packages/shared/prettier.config.js
+++ /dev/null
@@ -1,3 +0,0 @@
-module.exports = {
-  plugins: ["../../prettier.config.cjs"],
-};
diff --git a/ui/packages/shared/src/types/plugin.ts b/ui/packages/shared/src/types/plugin.ts
index 355dd0456..dd9b6425b 100644
--- a/ui/packages/shared/src/types/plugin.ts
+++ b/ui/packages/shared/src/types/plugin.ts
@@ -8,12 +8,12 @@ import type { UserProfileTab, UserTab } from "@/states/user-tab";
 import type {
   Attachment,
   Backup,
-  ListedPost,
-  Plugin,
-  Theme,
   ListedComment,
+  ListedPost,
   ListedReply,
   ListedSinglePage,
+  Plugin,
+  Theme,
 } from "@halo-dev/api-client";
 import type { AnyExtension } from "@halo-dev/richtext-editor";
 import type { Component, Ref } from "vue";
diff --git a/ui/packages/ui-plugin-bundler-kit/.prettierrc.cjs b/ui/packages/ui-plugin-bundler-kit/.prettierrc.cjs
deleted file mode 100644
index 23ebaf45d..000000000
--- a/ui/packages/ui-plugin-bundler-kit/.prettierrc.cjs
+++ /dev/null
@@ -1,3 +0,0 @@
-module.exports = {
-  plugins: ["../../prettier.config.cjs"],
-};
diff --git a/ui/packages/ui-plugin-bundler-kit/README.md b/ui/packages/ui-plugin-bundler-kit/README.md
index d1817bedc..93f75b723 100644
--- a/ui/packages/ui-plugin-bundler-kit/README.md
+++ b/ui/packages/ui-plugin-bundler-kit/README.md
@@ -273,20 +273,20 @@ Both Vite and Rsbuild are excellent build tools, but they have different strengt
 **Example with dynamic imports:**
 
 ```typescript
-import { definePlugin } from '@halo-dev/console-shared';
-import { defineAsyncComponent } from 'vue';
-import { VLoading } from '@halo-dev/components';
+import { definePlugin } from "@halo-dev/console-shared";
+import { defineAsyncComponent } from "vue";
+import { VLoading } from "@halo-dev/components";
 
 export default definePlugin({
   routes: [
     {
-      parentName: 'Root',
+      parentName: "Root",
       route: {
-        path: 'demo',
-        name: 'DemoPage',
+        path: "demo",
+        name: "DemoPage",
         // Lazy load heavy components
         component: defineAsyncComponent({
-          loader: () => import('./views/DemoPage.vue'),
+          loader: () => import("./views/DemoPage.vue"),
           loadingComponent: VLoading,
         }),
       },
@@ -306,14 +306,14 @@ export default definePlugin({
 
 ### Summary
 
-| Feature | Vite | Rsbuild |
-|---------|------|---------|
-| Code Splitting | ❌ Limited | ✅ Excellent |
-| Vue Ecosystem | ✅ Excellent | ✅ Good |
-| Build Performance | ✅ Good | ✅ Excellent |
-| Dev Experience | ✅ Excellent | ✅ Excellent |
-| Plugin Ecosystem | ✅ Rich | ✅ Growing |
-| Configuration | ✅ Simple | ⚖️ Moderate |
+| Feature           | Vite         | Rsbuild      |
+| ----------------- | ------------ | ------------ |
+| Code Splitting    | ❌ Limited   | ✅ Excellent |
+| Vue Ecosystem     | ✅ Excellent | ✅ Good      |
+| Build Performance | ✅ Good      | ✅ Excellent |
+| Dev Experience    | ✅ Excellent | ✅ Excellent |
+| Plugin Ecosystem  | ✅ Rich      | ✅ Growing   |
+| Configuration     | ✅ Simple    | ⚖️ Moderate  |
 
 **Recommendation**: Use **Rsbuild** for complex plugins with large frontend codebases, and **Vite** for simpler plugins or when you need extensive Vue ecosystem integration.
 
diff --git a/ui/packages/ui-plugin-bundler-kit/src/constants/externals.ts b/ui/packages/ui-plugin-bundler-kit/src/constants/externals.ts
index 8d0b239c7..ae761193a 100644
--- a/ui/packages/ui-plugin-bundler-kit/src/constants/externals.ts
+++ b/ui/packages/ui-plugin-bundler-kit/src/constants/externals.ts
@@ -13,4 +13,4 @@ const GLOBALS = {
 
 const EXTERNALS = Object.keys(GLOBALS) as string[];
 
-export { GLOBALS, EXTERNALS };
+export { EXTERNALS, GLOBALS };
diff --git a/ui/packages/ui-plugin-bundler-kit/src/index.ts b/ui/packages/ui-plugin-bundler-kit/src/index.ts
index 59ca49e37..7a427e02a 100644
--- a/ui/packages/ui-plugin-bundler-kit/src/index.ts
+++ b/ui/packages/ui-plugin-bundler-kit/src/index.ts
@@ -1,3 +1,3 @@
 export { HaloUIPluginBundlerKit } from "./legacy";
-export { viteConfig } from "./vite";
 export { rsbuildConfig } from "./rsbuild";
+export { viteConfig } from "./vite";
diff --git a/ui/packages/ui-plugin-bundler-kit/src/legacy.ts b/ui/packages/ui-plugin-bundler-kit/src/legacy.ts
index be21ce8da..c64e846d3 100644
--- a/ui/packages/ui-plugin-bundler-kit/src/legacy.ts
+++ b/ui/packages/ui-plugin-bundler-kit/src/legacy.ts
@@ -1,7 +1,7 @@
 import { Plugin } from "vite";
+import { DEFAULT_OUT_DIR_DEV } from "./constants/build";
 import { EXTERNALS, GLOBALS } from "./constants/externals";
 import { DEFAULT_MANIFEST_PATH } from "./constants/halo-plugin";
-import { DEFAULT_OUT_DIR_DEV } from "./constants/build";
 import { getHaloPluginManifest } from "./utils/halo-plugin";
 
 const LEGACY_OUT_DIR_PROD = "../src/main/resources/console";
diff --git a/ui/packages/ui-plugin-bundler-kit/src/rsbuild.ts b/ui/packages/ui-plugin-bundler-kit/src/rsbuild.ts
index 2f37c596c..4d0319816 100644
--- a/ui/packages/ui-plugin-bundler-kit/src/rsbuild.ts
+++ b/ui/packages/ui-plugin-bundler-kit/src/rsbuild.ts
@@ -1,15 +1,15 @@
 import {
   defineConfig,
   mergeRsbuildConfig,
+  type ConfigParams,
   type RsbuildConfig,
   type RsbuildMode,
-  type ConfigParams,
 } from "@rsbuild/core";
-import { getHaloPluginManifest } from "./utils/halo-plugin";
-import { DEFAULT_OUT_DIR_DEV, DEFAULT_OUT_DIR_PROD } from "./constants/build";
 import { pluginVue } from "@rsbuild/plugin-vue";
+import { DEFAULT_OUT_DIR_DEV, DEFAULT_OUT_DIR_PROD } from "./constants/build";
 import { GLOBALS } from "./constants/externals";
 import { DEFAULT_MANIFEST_PATH } from "./constants/halo-plugin";
+import { getHaloPluginManifest } from "./utils/halo-plugin";
 
 export interface RsBuildUserConfig {
   /**
diff --git a/ui/packages/ui-plugin-bundler-kit/src/utils/halo-plugin.ts b/ui/packages/ui-plugin-bundler-kit/src/utils/halo-plugin.ts
index b1a33ba3e..1004408b5 100644
--- a/ui/packages/ui-plugin-bundler-kit/src/utils/halo-plugin.ts
+++ b/ui/packages/ui-plugin-bundler-kit/src/utils/halo-plugin.ts
@@ -1,6 +1,6 @@
+import type { Plugin as HaloPlugin } from "@halo-dev/api-client";
 import fs from "fs";
 import yaml from "js-yaml";
-import type { Plugin as HaloPlugin } from "@halo-dev/api-client";
 
 export function getHaloPluginManifest(manifestPath: string) {
   const manifest = yaml.load(
diff --git a/ui/packages/ui-plugin-bundler-kit/src/vite.ts b/ui/packages/ui-plugin-bundler-kit/src/vite.ts
index 144c75dff..500294410 100644
--- a/ui/packages/ui-plugin-bundler-kit/src/vite.ts
+++ b/ui/packages/ui-plugin-bundler-kit/src/vite.ts
@@ -1,14 +1,14 @@
+import Vue from "@vitejs/plugin-vue";
 import {
   defineConfig,
   mergeConfig,
   UserConfig,
   UserConfigFnObject,
 } from "vite";
-import Vue from "@vitejs/plugin-vue";
-import { EXTERNALS, GLOBALS } from "./constants/externals";
 import { DEFAULT_OUT_DIR_DEV, DEFAULT_OUT_DIR_PROD } from "./constants/build";
-import { getHaloPluginManifest } from "./utils/halo-plugin";
+import { EXTERNALS, GLOBALS } from "./constants/externals";
 import { DEFAULT_MANIFEST_PATH } from "./constants/halo-plugin";
+import { getHaloPluginManifest } from "./utils/halo-plugin";
 
 export interface ViteUserConfig {
   /**
diff --git a/ui/pnpm-lock.yaml b/ui/pnpm-lock.yaml
index 5f5968702..98867763b 100644
--- a/ui/pnpm-lock.yaml
+++ b/ui/pnpm-lock.yaml
@@ -279,7 +279,7 @@ importers:
         version: 3.5.16
       '@vue/eslint-config-prettier':
         specifier: ^10.2.0
-        version: 10.2.0(@types/eslint@8.56.10)(eslint@9.29.0(jiti@2.4.2))(prettier@2.8.8)
+        version: 10.2.0(@types/eslint@8.56.10)(eslint@9.29.0(jiti@2.4.2))(prettier@3.6.0)
       '@vue/eslint-config-typescript':
         specifier: ^14.5.0
         version: 14.5.1(eslint-plugin-vue@9.33.0(eslint@9.29.0(jiti@2.4.2)))(eslint@9.29.0(jiti@2.4.2))(typescript@5.8.3)
@@ -323,14 +323,14 @@ importers:
         specifier: ^1.1.1
         version: 1.1.1
       prettier:
-        specifier: ^2.8.8
-        version: 2.8.8
+        specifier: ^3.6.0
+        version: 3.6.0
       prettier-plugin-organize-imports:
         specifier: ^4.1.0
-        version: 4.1.0(prettier@2.8.8)(typescript@5.8.3)(vue-tsc@2.2.10(typescript@5.8.3))
+        version: 4.1.0(prettier@3.6.0)(typescript@5.8.3)(vue-tsc@2.2.10(typescript@5.8.3))
       prettier-plugin-tailwindcss:
-        specifier: ^0.1.13
-        version: 0.1.13(prettier@2.8.8)
+        specifier: ^0.6.13
+        version: 0.6.13(prettier-plugin-organize-imports@4.1.0(prettier@3.6.0)(typescript@5.8.3)(vue-tsc@2.2.10(typescript@5.8.3)))(prettier@3.6.0)
       rollup-plugin-gzip:
         specifier: ^3.1.0
         version: 3.1.0(rollup@4.43.0)
@@ -8672,17 +8672,71 @@ packages:
       vue-tsc:
         optional: true
 
-  prettier-plugin-tailwindcss@0.1.13:
-    resolution: {integrity: sha512-/EKQURUrxLu66CMUg4+1LwGdxnz8of7IDvrSLqEtDqhLH61SAlNNUSr90UTvZaemujgl3OH/VHg+fyGltrNixw==}
-    engines: {node: '>=12.17.0'}
+  prettier-plugin-tailwindcss@0.6.13:
+    resolution: {integrity: sha512-uQ0asli1+ic8xrrSmIOaElDu0FacR4x69GynTh2oZjFY10JUt6EEumTQl5tB4fMeD6I1naKd+4rXQQ7esT2i1g==}
+    engines: {node: '>=14.21.3'}
     peerDependencies:
-      prettier: '>=2.2.0'
+      '@ianvs/prettier-plugin-sort-imports': '*'
+      '@prettier/plugin-pug': '*'
+      '@shopify/prettier-plugin-liquid': '*'
+      '@trivago/prettier-plugin-sort-imports': '*'
+      '@zackad/prettier-plugin-twig': '*'
+      prettier: ^3.0
+      prettier-plugin-astro: '*'
+      prettier-plugin-css-order: '*'
+      prettier-plugin-import-sort: '*'
+      prettier-plugin-jsdoc: '*'
+      prettier-plugin-marko: '*'
+      prettier-plugin-multiline-arrays: '*'
+      prettier-plugin-organize-attributes: '*'
+      prettier-plugin-organize-imports: '*'
+      prettier-plugin-sort-imports: '*'
+      prettier-plugin-style-order: '*'
+      prettier-plugin-svelte: '*'
+    peerDependenciesMeta:
+      '@ianvs/prettier-plugin-sort-imports':
+        optional: true
+      '@prettier/plugin-pug':
+        optional: true
+      '@shopify/prettier-plugin-liquid':
+        optional: true
+      '@trivago/prettier-plugin-sort-imports':
+        optional: true
+      '@zackad/prettier-plugin-twig':
+        optional: true
+      prettier-plugin-astro:
+        optional: true
+      prettier-plugin-css-order:
+        optional: true
+      prettier-plugin-import-sort:
+        optional: true
+      prettier-plugin-jsdoc:
+        optional: true
+      prettier-plugin-marko:
+        optional: true
+      prettier-plugin-multiline-arrays:
+        optional: true
+      prettier-plugin-organize-attributes:
+        optional: true
+      prettier-plugin-organize-imports:
+        optional: true
+      prettier-plugin-sort-imports:
+        optional: true
+      prettier-plugin-style-order:
+        optional: true
+      prettier-plugin-svelte:
+        optional: true
 
   prettier@2.8.8:
     resolution: {integrity: sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==}
     engines: {node: '>=10.13.0'}
     hasBin: true
 
+  prettier@3.6.0:
+    resolution: {integrity: sha512-ujSB9uXHJKzM/2GBuE0hBOUgC77CN3Bnpqa+g80bkv3T3A93wL/xlzDATHhnhkzifz/UE2SNOvmbTz5hSkDlHw==}
+    engines: {node: '>=14'}
+    hasBin: true
+
   pretty-bytes@5.6.0:
     resolution: {integrity: sha512-FFw039TmrBqFK8ma/7OL3sDz/VytdtJr044/QUJtH0wK9lb9jLq9tJyIxUwtQJHwar2BqtiA4iCWSwo9JLkzFg==}
     engines: {node: '>=6'}
@@ -16232,12 +16286,12 @@ snapshots:
     dependencies:
       rfdc: 1.4.1
 
-  '@vue/eslint-config-prettier@10.2.0(@types/eslint@8.56.10)(eslint@9.29.0(jiti@2.4.2))(prettier@2.8.8)':
+  '@vue/eslint-config-prettier@10.2.0(@types/eslint@8.56.10)(eslint@9.29.0(jiti@2.4.2))(prettier@3.6.0)':
     dependencies:
       eslint: 9.29.0(jiti@2.4.2)
       eslint-config-prettier: 10.1.5(eslint@9.29.0(jiti@2.4.2))
-      eslint-plugin-prettier: 5.5.0(@types/eslint@8.56.10)(eslint-config-prettier@10.1.5(eslint@9.29.0(jiti@2.4.2)))(eslint@9.29.0(jiti@2.4.2))(prettier@2.8.8)
-      prettier: 2.8.8
+      eslint-plugin-prettier: 5.5.0(@types/eslint@8.56.10)(eslint-config-prettier@10.1.5(eslint@9.29.0(jiti@2.4.2)))(eslint@9.29.0(jiti@2.4.2))(prettier@3.6.0)
+      prettier: 3.6.0
     transitivePeerDependencies:
       - '@types/eslint'
 
@@ -17927,10 +17981,10 @@ snapshots:
     dependencies:
       eslint: 9.29.0(jiti@2.4.2)
 
-  eslint-plugin-prettier@5.5.0(@types/eslint@8.56.10)(eslint-config-prettier@10.1.5(eslint@9.29.0(jiti@2.4.2)))(eslint@9.29.0(jiti@2.4.2))(prettier@2.8.8):
+  eslint-plugin-prettier@5.5.0(@types/eslint@8.56.10)(eslint-config-prettier@10.1.5(eslint@9.29.0(jiti@2.4.2)))(eslint@9.29.0(jiti@2.4.2))(prettier@3.6.0):
     dependencies:
       eslint: 9.29.0(jiti@2.4.2)
-      prettier: 2.8.8
+      prettier: 3.6.0
       prettier-linter-helpers: 1.0.0
       synckit: 0.11.8
     optionalDependencies:
@@ -20383,19 +20437,23 @@ snapshots:
     dependencies:
       fast-diff: 1.2.0
 
-  prettier-plugin-organize-imports@4.1.0(prettier@2.8.8)(typescript@5.8.3)(vue-tsc@2.2.10(typescript@5.8.3)):
+  prettier-plugin-organize-imports@4.1.0(prettier@3.6.0)(typescript@5.8.3)(vue-tsc@2.2.10(typescript@5.8.3)):
     dependencies:
-      prettier: 2.8.8
+      prettier: 3.6.0
       typescript: 5.8.3
     optionalDependencies:
       vue-tsc: 2.2.10(typescript@5.8.3)
 
-  prettier-plugin-tailwindcss@0.1.13(prettier@2.8.8):
+  prettier-plugin-tailwindcss@0.6.13(prettier-plugin-organize-imports@4.1.0(prettier@3.6.0)(typescript@5.8.3)(vue-tsc@2.2.10(typescript@5.8.3)))(prettier@3.6.0):
     dependencies:
-      prettier: 2.8.8
+      prettier: 3.6.0
+    optionalDependencies:
+      prettier-plugin-organize-imports: 4.1.0(prettier@3.6.0)(typescript@5.8.3)(vue-tsc@2.2.10(typescript@5.8.3))
 
   prettier@2.8.8: {}
 
+  prettier@3.6.0: {}
+
   pretty-bytes@5.6.0: {}
 
   pretty-bytes@6.0.0: {}
diff --git a/ui/pnpm-workspace.yaml b/ui/pnpm-workspace.yaml
index 600b4bb48..9c9be4ba8 100644
--- a/ui/pnpm-workspace.yaml
+++ b/ui/pnpm-workspace.yaml
@@ -1,2 +1,2 @@
 packages:
-  - 'packages/**'
+  - "packages/**"
diff --git a/ui/prettier.config.cjs b/ui/prettier.config.cjs
deleted file mode 100644
index 6a241df3e..000000000
--- a/ui/prettier.config.cjs
+++ /dev/null
@@ -1,6 +0,0 @@
-module.exports = {
-  plugins: [
-    require("prettier-plugin-tailwindcss"),
-    require("prettier-plugin-organize-imports"),
-  ],
-};
diff --git a/ui/src/components/attachment/AttachmentPermalinkList.vue b/ui/src/components/attachment/AttachmentPermalinkList.vue
index ff239ee64..39ae0fe2b 100644
--- a/ui/src/components/attachment/AttachmentPermalinkList.vue
+++ b/ui/src/components/attachment/AttachmentPermalinkList.vue
@@ -134,7 +134,7 @@ const formats = computed(
     ]"
     type="outline"
   ></VTabbar>
-  <ul class="flex flex-col space-y-2 mt-3">
+  <ul class="mt-3 flex flex-col space-y-2">
     <li v-for="format in formats" :key="format.key">
       <div
         class="flex w-full cursor-pointer items-center justify-between space-x-3 rounded border p-3 hover:border-primary"
diff --git a/ui/src/components/dropdown-selector/EditorProviderSelector.vue b/ui/src/components/dropdown-selector/EditorProviderSelector.vue
index 222a698f7..c5eb9e445 100644
--- a/ui/src/components/dropdown-selector/EditorProviderSelector.vue
+++ b/ui/src/components/dropdown-selector/EditorProviderSelector.vue
@@ -35,7 +35,7 @@ fetchEditorProviders();
     >
       <VAvatar v-if="provider?.logo" :src="provider.logo" size="xs"></VAvatar>
       <div
-        class="select-none text-sm text-gray-600 group-hover:text-gray-900 whitespace-nowrap"
+        class="select-none whitespace-nowrap text-sm text-gray-600 group-hover:text-gray-900"
       >
         {{ provider?.displayName }}
       </div>
diff --git a/ui/src/components/form/AnnotationsForm.vue b/ui/src/components/form/AnnotationsForm.vue
index 745336fb9..92fbbd478 100644
--- a/ui/src/components/form/AnnotationsForm.vue
+++ b/ui/src/components/form/AnnotationsForm.vue
@@ -3,7 +3,7 @@ import {
   reset,
   submitForm,
   type FormKitNode,
-  type FormKitSchemaCondition,
+  type FormKitSchemaDefinition,
   type FormKitSchemaNode,
 } from "@formkit/core";
 
@@ -77,10 +77,13 @@ const annotations = ref<{
 const customAnnotationsState = ref<{ key: string; value: string }[]>([]);
 
 const customAnnotations = computed(() => {
-  return customAnnotationsState.value.reduce((acc, cur) => {
-    acc[cur.key] = cur.value;
-    return acc;
-  }, {} as { [key: string]: string });
+  return customAnnotationsState.value.reduce(
+    (acc, cur) => {
+      acc[cur.key] = cur.value;
+      return acc;
+    },
+    {} as { [key: string]: string }
+  );
 });
 
 const handleProcessCustomAnnotations = () => {
@@ -133,12 +136,15 @@ const handleProcessCustomAnnotations = () => {
       }
     })
     .filter(Boolean)
-    .reduce((acc, cur) => {
-      if (cur) {
-        acc[cur.key] = cur.value;
-      }
-      return acc;
-    }, {} as { [key: string]: string });
+    .reduce(
+      (acc, cur) => {
+        if (cur) {
+          acc[cur.key] = cur.value;
+        }
+        return acc;
+      },
+      {} as { [key: string]: string }
+    );
 };
 
 onMounted(async () => {
@@ -222,7 +228,9 @@ function onCustomFormToggle(e: Event) {
         <FormKitSchema
           v-if="annotationSetting.spec?.formSchema"
           :key="index"
-          :schema="annotationSetting.spec?.formSchema as (FormKitSchemaCondition| FormKitSchemaNode[])"
+          :schema="
+            annotationSetting.spec?.formSchema as FormKitSchemaDefinition
+          "
         />
       </template>
     </FormKit>
@@ -230,7 +238,7 @@ function onCustomFormToggle(e: Event) {
     <!-- @vue-ignore -->
     <details
       :open="showCustomForm"
-      class="flex flex-col cursor-pointer space-y-4 py-4 transition-all first:pt-0"
+      class="flex cursor-pointer flex-col space-y-4 py-4 transition-all first:pt-0"
       @toggle="onCustomFormToggle"
     >
       <summary class="group flex items-center justify-between">
diff --git a/ui/src/components/global-search/GlobalSearchModal.vue b/ui/src/components/global-search/GlobalSearchModal.vue
index 178f74a34..a5767d24c 100644
--- a/ui/src/components/global-search/GlobalSearchModal.vue
+++ b/ui/src/components/global-search/GlobalSearchModal.vue
@@ -381,10 +381,10 @@ useEventListener("keydown", handleKeydown);
           @click="handleRoute(item)"
         >
           <div
-            class="flex items-center rounded-md px-2 py-2.5 cursor-pointer hover:bg-gray-100"
+            class="flex cursor-pointer items-center rounded-md px-2 py-2.5 hover:bg-gray-100"
             :class="{ 'bg-gray-100': selectedIndex === itemIndex }"
           >
-            <div class="inline-flex items-center gap-3 flex-1">
+            <div class="inline-flex flex-1 items-center gap-3">
               <div class="h-5 w-5 rounded border p-0.5">
                 <component
                   :is="item.icon.component"
@@ -399,7 +399,7 @@ useEventListener("keydown", handleKeydown);
               </div>
               <span class="text-sm font-medium">{{ item.title }}</span>
             </div>
-            <div class="text-xs text-gray-500 flex-shrink-0 flex-none">
+            <div class="flex-none flex-shrink-0 text-xs text-gray-500">
               {{ item.group }}
             </div>
           </div>
diff --git a/ui/src/components/user-avatar/UserAvatar.vue b/ui/src/components/user-avatar/UserAvatar.vue
index 5b36c8a87..6f885f29c 100644
--- a/ui/src/components/user-avatar/UserAvatar.vue
+++ b/ui/src/components/user-avatar/UserAvatar.vue
@@ -161,7 +161,7 @@ const hasAvatar = computed(() => {
       circle
       width="100%"
       height="100%"
-      class="ring-4 ring-white shadow-xl"
+      class="shadow-xl ring-4 ring-white"
     />
     <VDropdown
       v-if="currentUserHasPermission(['system:users:manage']) || isCurrentUser"
diff --git a/ui/src/formkit/inputs/secret/SecretSelect.vue b/ui/src/formkit/inputs/secret/SecretSelect.vue
index bd9d2813d..f4152ffb1 100644
--- a/ui/src/formkit/inputs/secret/SecretSelect.vue
+++ b/ui/src/formkit/inputs/secret/SecretSelect.vue
@@ -224,7 +224,9 @@ async function handleCreateSecret() {
   <SecretCreationModal
     v-if="secretCreationModalVisible"
     :form-state="{
-      stringDataArray: [{ key: requiredKey ? requiredKey  as string : '', value: text || '' }],
+      stringDataArray: [
+        { key: requiredKey ? (requiredKey as string) : '', value: text || '' },
+      ],
     }"
     @close="secretCreationModalVisible = false"
   />
diff --git a/ui/src/formkit/inputs/secret/components/SecretCreationModal.vue b/ui/src/formkit/inputs/secret/components/SecretCreationModal.vue
index a3fad705c..0636dda1a 100644
--- a/ui/src/formkit/inputs/secret/components/SecretCreationModal.vue
+++ b/ui/src/formkit/inputs/secret/components/SecretCreationModal.vue
@@ -28,10 +28,13 @@ const modal = ref<InstanceType<typeof VModal> | null>(null);
 const { mutate, isLoading } = useMutation({
   mutationKey: ["create-secret"],
   mutationFn: async ({ data }: { data: SecretFormState }) => {
-    const stringData = data.stringDataArray.reduce((acc, { key, value }) => {
-      acc[key] = value;
-      return acc;
-    }, {} as Record<string, string>);
+    const stringData = data.stringDataArray.reduce(
+      (acc, { key, value }) => {
+        acc[key] = value;
+        return acc;
+      },
+      {} as Record<string, string>
+    );
 
     return await coreApiClient.secret.createSecret({
       secret: {
diff --git a/ui/src/formkit/inputs/secret/components/SecretEditModal.vue b/ui/src/formkit/inputs/secret/components/SecretEditModal.vue
index b479cfa70..b64da0b75 100644
--- a/ui/src/formkit/inputs/secret/components/SecretEditModal.vue
+++ b/ui/src/formkit/inputs/secret/components/SecretEditModal.vue
@@ -28,10 +28,13 @@ const modal = ref<InstanceType<typeof VModal> | null>(null);
 const { mutate, isLoading } = useMutation({
   mutationKey: ["create-secret"],
   mutationFn: async ({ data }: { data: SecretFormState }) => {
-    const stringData = data.stringDataArray.reduce((acc, { key, value }) => {
-      acc[key] = value;
-      return acc;
-    }, {} as Record<string, string>);
+    const stringData = data.stringDataArray.reduce(
+      (acc, { key, value }) => {
+        acc[key] = value;
+        return acc;
+      },
+      {} as Record<string, string>
+    );
 
     return await coreApiClient.secret.patchSecret({
       name: props.secret.metadata.name,
diff --git a/ui/src/formkit/inputs/select/SelectMain.vue b/ui/src/formkit/inputs/select/SelectMain.vue
index 54658d722..e62734713 100644
--- a/ui/src/formkit/inputs/select/SelectMain.vue
+++ b/ui/src/formkit/inputs/select/SelectMain.vue
@@ -446,9 +446,8 @@ const mapUnresolvedOptions = async (
       mappedOptions = await fetchRemoteMappedOptions(unmappedSelectValues);
     } else if (selectProps.remote) {
       const remoteOption = selectProps.remoteOption as SelectRemoteOption;
-      mappedOptions = await remoteOption.findOptionsByValues(
-        unmappedSelectValues
-      );
+      mappedOptions =
+        await remoteOption.findOptionsByValues(unmappedSelectValues);
     }
   }
 
diff --git a/ui/tsconfig.node.json b/ui/tsconfig.node.json
index 0e33b5b43..d602dadeb 100644
--- a/ui/tsconfig.node.json
+++ b/ui/tsconfig.node.json
@@ -4,6 +4,7 @@
     "vite.config.ts",
     "vite.uc.config.ts",
     "vitest.config.*",
+    "eslint.config.ts",
     "src/vite/library-external.ts",
     "src/vite/config-builder.ts"
   ],
diff --git a/ui/uc-src/modules/contents/posts/components/PostListItem.vue b/ui/uc-src/modules/contents/posts/components/PostListItem.vue
index 769cf4ccd..d55271ead 100644
--- a/ui/uc-src/modules/contents/posts/components/PostListItem.vue
+++ b/ui/uc-src/modules/contents/posts/components/PostListItem.vue
@@ -124,9 +124,9 @@ function handleDelete() {
     <template #start>
       <VEntityField v-if="post.post.spec.cover">
         <template #description>
-          <div class="aspect-h-2 rounded-md overflow-hidden aspect-w-3 w-20">
+          <div class="aspect-h-2 aspect-w-3 w-20 overflow-hidden rounded-md">
             <img
-              class="object-cover w-full h-full"
+              class="h-full w-full object-cover"
               :src="generateThumbnailUrl(post.post.spec.cover, 's')"
             />
           </div>
diff --git a/ui/uc-src/modules/notifications/Notifications.vue b/ui/uc-src/modules/notifications/Notifications.vue
index 55a722342..e4fc51e7c 100644
--- a/ui/uc-src/modules/notifications/Notifications.vue
+++ b/ui/uc-src/modules/notifications/Notifications.vue
@@ -156,20 +156,20 @@ function handleMarkAllAsRead() {
             ></VTabbar>
 
             <div
-              class="absolute right-4 top-1/2 -translate-y-1/2 flex items-center gap-2"
+              class="absolute right-4 top-1/2 flex -translate-y-1/2 items-center gap-2"
             >
               <button
                 v-if="activeTab === 'unread'"
-                class="flex items-center justify-center h-7 w-7 rounded-full cursor-pointer hover:bg-gray-200 disabled:pointer-events-none disabled:opacity-70"
+                class="flex h-7 w-7 cursor-pointer items-center justify-center rounded-full hover:bg-gray-200 disabled:pointer-events-none disabled:opacity-70"
                 :disabled="!notifications?.items.length"
                 @click="handleMarkAllAsRead"
               >
                 <IconCheckboxCircle
-                  class="w-4 h-4 text-gray-600 group-hover:text-gray-900"
+                  class="h-4 w-4 text-gray-600 group-hover:text-gray-900"
                 />
               </button>
               <button
-                class="flex items-center justify-center h-7 w-7 group rounded-full cursor-pointer hover:bg-gray-200 disabled:pointer-events-none disabled:opacity-70"
+                class="group flex h-7 w-7 cursor-pointer items-center justify-center rounded-full hover:bg-gray-200 disabled:pointer-events-none disabled:opacity-70"
                 :disabled="!notifications?.items.length"
                 @click="handleDeleteNotifications"
               >
diff --git a/ui/uc-src/modules/profile/tabs/PersonalAccessTokens.vue b/ui/uc-src/modules/profile/tabs/PersonalAccessTokens.vue
index 86a8b1ed4..2dab69cd1 100644
--- a/ui/uc-src/modules/profile/tabs/PersonalAccessTokens.vue
+++ b/ui/uc-src/modules/profile/tabs/PersonalAccessTokens.vue
@@ -69,7 +69,7 @@ const creationModal = ref(false);
   </Transition>
 
   <Transition v-else appear name="fade">
-    <div class="rounded-base border overflow-hidden">
+    <div class="overflow-hidden rounded-base border">
       <VEntityContainer>
         <PersonalAccessTokenListItem
           v-for="token in pats"
diff --git a/ui/uc-src/modules/profile/tabs/TwoFactor.vue b/ui/uc-src/modules/profile/tabs/TwoFactor.vue
index ab5a44a01..b0b1ed77b 100644
--- a/ui/uc-src/modules/profile/tabs/TwoFactor.vue
+++ b/ui/uc-src/modules/profile/tabs/TwoFactor.vue
@@ -61,7 +61,7 @@ const totpDeletionModalVisible = ref(false);
   <VLoading v-if="isLoading" />
 
   <Transition v-else appear name="fade">
-    <div class="rounded-base border overflow-hidden">
+    <div class="overflow-hidden rounded-base border">
       <div class="bg-gray-50 px-4 py-3">
         <span class="text-sm font-semibold text-gray-900">
           {{ $t("core.uc_profile.2fa.methods.title") }}