diff --git a/src/components/custom/ButtonTab/index.vue b/src/components/custom/ButtonTab/index.vue
index bc6caabe..fe56c30a 100644
--- a/src/components/custom/ButtonTab/index.vue
+++ b/src/components/custom/ButtonTab/index.vue
@@ -8,6 +8,9 @@
       border-1px border-[#e5e7eb]
       dark:border-[#ffffff3d]
       rounded-2px
+      transition-border-color
+      duration-300
+      ease-in-out
       cursor-pointer
     "
     :class="[closable ? 'pr-6px' : 'pr-14px']"
diff --git a/src/components/custom/ChromeTab/components/SvgRadiusBg.vue b/src/components/custom/ChromeTab/components/SvgRadiusBg.vue
index b9d1423b..66f8f986 100644
--- a/src/components/custom/ChromeTab/components/SvgRadiusBg.vue
+++ b/src/components/custom/ChromeTab/components/SvgRadiusBg.vue
@@ -12,11 +12,23 @@
       </clipPath>
     </defs>
     <svg width="52%" height="100%">
-      <use xlink:href="#geometry-left" width="214" height="36" :fill="fill"></use>
+      <use
+        xlink:href="#geometry-left"
+        width="214"
+        height="36"
+        :fill="fill"
+        class="transition-fill duration-300 ease-in-out"
+      ></use>
     </svg>
     <g transform="scale(-1, 1)">
       <svg width="52%" height="100%" x="-100%" y="0">
-        <use xlink:href="#geometry-right" width="214" height="36" :fill="fill"></use>
+        <use
+          xlink:href="#geometry-right"
+          width="214"
+          height="36"
+          :fill="fill"
+          class="transition-fill duration-300 ease-in-out"
+        ></use>
       </svg>
     </g>
   </svg>
diff --git a/src/layouts/BaseLayout/components/common/GlobalLogo/index.vue b/src/layouts/BaseLayout/components/common/GlobalLogo/index.vue
index 686054ea..d2dcc9ed 100644
--- a/src/layouts/BaseLayout/components/common/GlobalLogo/index.vue
+++ b/src/layouts/BaseLayout/components/common/GlobalLogo/index.vue
@@ -1,5 +1,17 @@
 <template>
-  <a href="/" class="flex-center nowrap-hidden bg-light dark:bg-dark cursor-pointer">
+  <a
+    href="/"
+    class="
+      flex-center
+      nowrap-hidden
+      bg-light
+      dark:bg-dark
+      transition-background-color
+      duration-300
+      ease-in-out
+      cursor-pointer
+    "
+  >
     <system-logo class="w-32px h-32px" :color="theme.themeColor" />
     <h2 v-show="showTitle" class="text-primary pl-8px text-16px font-bold">{{ title }}</h2>
   </a>
diff --git a/src/layouts/BaseLayout/components/common/GlobalTab/index.vue b/src/layouts/BaseLayout/components/common/GlobalTab/index.vue
index c9ef4d0f..4ef1e321 100644
--- a/src/layouts/BaseLayout/components/common/GlobalTab/index.vue
+++ b/src/layouts/BaseLayout/components/common/GlobalTab/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="multi-tab flex-center w-full pl-16px bg-light dark:bg-dark">
+  <div class="multi-tab flex-center w-full pl-16px">
     <div class="flex-1-hidden h-full">
       <better-scroll :options="{ scrollX: true, scrollY: false, click: true }">
         <multi-tab />
diff --git a/src/router/modules/dashboard.ts b/src/router/modules/dashboard.ts
index 760c4401..625bc1d3 100644
--- a/src/router/modules/dashboard.ts
+++ b/src/router/modules/dashboard.ts
@@ -1,6 +1,6 @@
 import type { CustomRoute } from '@/interface';
 import { EnumRoutePath, EnumRouteTitle } from '@/enum';
-import { BasicLayout } from '@/layouts';
+import { BaseLayout } from '@/layouts';
 import { ROUTE_NAME_MAP, setRouterCacheName } from '@/utils';
 import { ROUTE_HOME } from '../routes';
 import DashboardWorkbench from '@/views/dashboard/workbench/index.vue';
@@ -10,7 +10,7 @@ setRouterCacheName(DashboardWorkbench, ROUTE_NAME_MAP.get('dashboard_workbench')
 const DASHBOARD: CustomRoute = {
   name: ROUTE_NAME_MAP.get('dashboard'),
   path: EnumRoutePath.dashboard,
-  component: BasicLayout,
+  component: BaseLayout,
   redirect: { name: ROUTE_NAME_MAP.get('dashboard_analysis') },
   meta: {
     title: EnumRouteTitle.dashboard,
diff --git a/windi.config.ts b/windi.config.ts
index ddde3a9b..86b6ca65 100644
--- a/windi.config.ts
+++ b/windi.config.ts
@@ -55,7 +55,7 @@ export default defineConfig({
         dark: '#18181c',
         'deep-dark': '#101014'
       },
-      transitionProperty: ['width', 'height', 'background', 'background-color']
+      transitionProperty: ['width', 'height', 'background', 'background-color', 'border-color', 'fill']
     }
   },
   variants: {},