diff --git a/src/components/common/icon-tooltip.vue b/src/components/common/icon-tooltip.vue
new file mode 100644
index 00000000..d98db322
--- /dev/null
+++ b/src/components/common/icon-tooltip.vue
@@ -0,0 +1,42 @@
+<script lang="ts" setup>
+import { computed, useSlots } from 'vue';
+import type { PopoverPlacement } from 'naive-ui';
+
+defineOptions({ name: 'IconTooltip' });
+
+interface Props {
+  icon?: string;
+  localIcon?: string;
+  desc?: string;
+  placement?: PopoverPlacement;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  icon: 'mdi-help-circle',
+  localIcon: '',
+  desc: '',
+  placement: 'top'
+});
+
+const slots = useSlots();
+const hasCustomTrigger = computed(() => Boolean(slots.trigger));
+
+if (!hasCustomTrigger.value && !props.icon && !props.localIcon) {
+  throw new Error('icon or localIcon is required when no custom trigger slot is provided');
+}
+</script>
+
+<template>
+  <NTooltip :placement="placement">
+    <template #trigger>
+      <slot name="trigger">
+        <div class="cursor-pointer">
+          <SvgIcon :icon="icon" :local-icon="localIcon" />
+        </div>
+      </slot>
+    </template>
+    <slot>
+      <span>{{ desc }}</span>
+    </slot>
+  </NTooltip>
+</template>
diff --git a/src/hooks/common/table.ts b/src/hooks/common/table.ts
index 31bd3d16..4aea61f2 100644
--- a/src/hooks/common/table.ts
+++ b/src/hooks/common/table.ts
@@ -38,6 +38,13 @@ export function useNaiveTable<ResponseData, ApiData>(options: UseNaiveTableOptio
     getColumns
   });
 
+  // calculate the total width of the table this is used for horizontal scrolling
+  const scrollX = computed(() => {
+    return result.columns.value.reduce((acc, column) => {
+      return acc + Number(column.width ?? column.minWidth ?? 120);
+    }, 0);
+  });
+
   scope.run(() => {
     watch(
       () => appStore.locale,
@@ -51,7 +58,10 @@ export function useNaiveTable<ResponseData, ApiData>(options: UseNaiveTableOptio
     scope.stop();
   });
 
-  return result;
+  return {
+    ...result,
+    scrollX
+  };
 }
 
 type PaginationParams = Pick<PaginationProps, 'page' | 'pageSize'>;
diff --git a/src/layouts/modules/global-menu/modules/top-hybrid-sidebar-first.vue b/src/layouts/modules/global-menu/modules/top-hybrid-sidebar-first.vue
index 3bb0b2ce..ff037723 100644
--- a/src/layouts/modules/global-menu/modules/top-hybrid-sidebar-first.vue
+++ b/src/layouts/modules/global-menu/modules/top-hybrid-sidebar-first.vue
@@ -30,15 +30,17 @@ const { selectedKey } = useMenu();
     />
   </Teleport>
   <Teleport :to="`#${GLOBAL_SIDER_MENU_ID}`">
-    <FirstLevelMenu
-      :menus="firstLevelMenus"
-      :active-menu-key="activeFirstLevelMenuKey"
-      :sider-collapse="appStore.siderCollapse"
-      :dark-mode="themeStore.darkMode"
-      :theme-color="themeStore.themeColor"
-      @select="handleSelectFirstLevelMenu"
-      @toggle-sider-collapse="appStore.toggleSiderCollapse"
-    />
+    <div class="h-full pt-2">
+      <FirstLevelMenu
+        :menus="firstLevelMenus"
+        :active-menu-key="activeFirstLevelMenuKey"
+        :sider-collapse="appStore.siderCollapse"
+        :dark-mode="themeStore.darkMode"
+        :theme-color="themeStore.themeColor"
+        @select="handleSelectFirstLevelMenu"
+        @toggle-sider-collapse="appStore.toggleSiderCollapse"
+      />
+    </div>
   </Teleport>
 </template>
 
diff --git a/src/layouts/modules/theme-drawer/components/layout-mode-card.vue b/src/layouts/modules/theme-drawer/components/layout-mode-card.vue
index 351bb942..e0563508 100644
--- a/src/layouts/modules/theme-drawer/components/layout-mode-card.vue
+++ b/src/layouts/modules/theme-drawer/components/layout-mode-card.vue
@@ -80,7 +80,7 @@ function handleChangeMode(mode: UnionKey.ThemeLayoutMode) {
       class="flex-col-center cursor-pointer"
       @click="handleChangeMode(key)"
     >
-      <NTooltip :placement="item.placement">
+      <IconTooltip :placement="item.placement">
         <template #trigger>
           <div
             class="h-64px w-96px gap-6px rd-4px p-6px shadow ring-2 ring-transparent transition-all hover:ring-primary"
@@ -92,7 +92,7 @@ function handleChangeMode(mode: UnionKey.ThemeLayoutMode) {
           </div>
         </template>
         {{ $t(`theme.layout.layoutMode.${key}_detail`) }}
-      </NTooltip>
+      </IconTooltip>
       <p class="mt-8px text-12px">{{ $t(themeLayoutModeRecord[key]) }}</p>
     </div>
   </div>
diff --git a/src/layouts/modules/theme-drawer/components/setting-item.vue b/src/layouts/modules/theme-drawer/components/setting-item.vue
index ccd29bd2..07316a6d 100644
--- a/src/layouts/modules/theme-drawer/components/setting-item.vue
+++ b/src/layouts/modules/theme-drawer/components/setting-item.vue
@@ -13,7 +13,7 @@ defineProps<Props>();
 
 <template>
   <div class="w-full flex-y-center justify-between">
-    <div>
+    <div class="flex-y-center">
       <span class="pr-8px text-base-text">{{ label }}</span>
       <slot name="suffix"></slot>
     </div>
diff --git a/src/layouts/modules/theme-drawer/modules/appearance/modules/theme-color.vue b/src/layouts/modules/theme-drawer/modules/appearance/modules/theme-color.vue
index 42811c49..6c38897d 100644
--- a/src/layouts/modules/theme-drawer/modules/appearance/modules/theme-color.vue
+++ b/src/layouts/modules/theme-drawer/modules/appearance/modules/theme-color.vue
@@ -36,27 +36,28 @@ const swatches: string[] = [
 <template>
   <NDivider>{{ $t('theme.appearance.themeColor.title') }}</NDivider>
   <div class="flex-col-stretch gap-12px">
-    <NTooltip placement="top-start">
-      <template #trigger>
-        <SettingItem key="recommend-color" :label="$t('theme.appearance.recommendColor')">
-          <NSwitch v-model:value="themeStore.recommendColor" />
-        </SettingItem>
+    <SettingItem key="recommend-color" :label="$t('theme.appearance.recommendColor')">
+      <template #suffix>
+        <IconTooltip>
+          <p>
+            <span class="pr-12px">{{ $t('theme.appearance.recommendColorDesc') }}</span>
+            <br />
+            <NButton
+              text
+              tag="a"
+              href="https://uicolors.app/create"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="text-gray"
+            >
+              https://uicolors.app/create
+            </NButton>
+          </p>
+        </IconTooltip>
       </template>
-      <p>
-        <span class="pr-12px">{{ $t('theme.appearance.recommendColorDesc') }}</span>
-        <br />
-        <NButton
-          text
-          tag="a"
-          href="https://uicolors.app/create"
-          target="_blank"
-          rel="noopener noreferrer"
-          class="text-gray"
-        >
-          https://uicolors.app/create
-        </NButton>
-      </p>
-    </NTooltip>
+      <NSwitch v-model:value="themeStore.recommendColor" />
+    </SettingItem>
+
     <SettingItem
       v-for="(_, key) in themeStore.themeColors"
       :key="key"
diff --git a/src/layouts/modules/theme-drawer/modules/layout/modules/content-settings.vue b/src/layouts/modules/theme-drawer/modules/layout/modules/content-settings.vue
index d72b21d7..f0fadffe 100644
--- a/src/layouts/modules/theme-drawer/modules/layout/modules/content-settings.vue
+++ b/src/layouts/modules/theme-drawer/modules/layout/modules/content-settings.vue
@@ -19,6 +19,9 @@ const isWrapperScrollMode = computed(() => themeStore.layout.scrollMode === 'wra
   <NDivider>{{ $t('theme.layout.content.title') }}</NDivider>
   <TransitionGroup tag="div" name="setting-list" class="flex-col-stretch gap-12px">
     <SettingItem key="1" :label="$t('theme.layout.content.scrollMode.title')">
+      <template #suffix>
+        <IconTooltip :desc="$t('theme.layout.content.scrollMode.tip')" />
+      </template>
       <NSelect
         v-model:value="themeStore.layout.scrollMode"
         :options="translateOptions(themeScrollModeOptions)"
diff --git a/src/layouts/modules/theme-drawer/modules/layout/modules/tab-settings.vue b/src/layouts/modules/theme-drawer/modules/layout/modules/tab-settings.vue
index 4a82a8f9..585da6ec 100644
--- a/src/layouts/modules/theme-drawer/modules/layout/modules/tab-settings.vue
+++ b/src/layouts/modules/theme-drawer/modules/layout/modules/tab-settings.vue
@@ -27,6 +27,9 @@ const themeStore = useThemeStore();
       <NSwitch v-model:value="themeStore.tab.visible" />
     </SettingItem>
     <SettingItem v-if="themeStore.tab.visible" key="2" :label="$t('theme.layout.tab.cache')">
+      <template #suffix>
+        <IconTooltip :desc="$t('theme.layout.tab.cacheTip')" />
+      </template>
       <NSwitch v-model:value="themeStore.tab.cache" />
     </SettingItem>
     <SettingItem v-if="themeStore.tab.visible" key="3" :label="$t('theme.layout.tab.height')">
diff --git a/src/locales/langs/en-us.ts b/src/locales/langs/en-us.ts
index 686f7dd6..9a2ae496 100644
--- a/src/locales/langs/en-us.ts
+++ b/src/locales/langs/en-us.ts
@@ -133,6 +133,7 @@ const local: App.I18n.Schema = {
         title: 'Tab Settings',
         visible: 'Tab Visible',
         cache: 'Tag Bar Info Cache',
+        cacheTip: 'One-click to open/close global keepalive',
         height: 'Tab Height',
         mode: {
           title: 'Tab Mode',
@@ -168,6 +169,7 @@ const local: App.I18n.Schema = {
         title: 'Content Area Settings',
         scrollMode: {
           title: 'Scroll Mode',
+          tip: 'The theme scroll only scrolls the main part, the outer scroll can carry the header and footer together',
           wrapper: 'Wrapper',
           content: 'Content'
         },
diff --git a/src/locales/langs/zh-cn.ts b/src/locales/langs/zh-cn.ts
index 84991a1a..fa572c75 100644
--- a/src/locales/langs/zh-cn.ts
+++ b/src/locales/langs/zh-cn.ts
@@ -130,6 +130,7 @@ const local: App.I18n.Schema = {
         title: '标签栏设置',
         visible: '显示标签栏',
         cache: '标签栏信息缓存',
+        cacheTip: '一键开启/关闭全局 keepalive',
         height: '标签栏高度',
         mode: {
           title: '标签栏风格',
@@ -165,6 +166,7 @@ const local: App.I18n.Schema = {
         title: '内容区域设置',
         scrollMode: {
           title: '滚动模式',
+          tip: '主题滚动仅 main 部分滚动，外层滚动可携带头部底部一起滚动',
           wrapper: '外层滚动',
           content: '主体滚动'
         },
diff --git a/src/typings/app.d.ts b/src/typings/app.d.ts
index e72868f3..79fa1578 100644
--- a/src/typings/app.d.ts
+++ b/src/typings/app.d.ts
@@ -426,6 +426,7 @@ declare namespace App {
             title: string;
             visible: string;
             cache: string;
+            cacheTip: string;
             height: string;
             mode: { title: string } & Record<UnionKey.ThemeTabMode, string>;
           };
@@ -455,7 +456,7 @@ declare namespace App {
           };
           content: {
             title: string;
-            scrollMode: { title: string } & Record<UnionKey.ThemeScrollMode, string>;
+            scrollMode: { title: string; tip: string } & Record<UnionKey.ThemeScrollMode, string>;
             page: {
               animate: string;
               mode: { title: string } & Record<UnionKey.ThemePageAnimateMode, string>;
diff --git a/src/typings/components.d.ts b/src/typings/components.d.ts
index 0d8d0df1..46923e64 100644
--- a/src/typings/components.d.ts
+++ b/src/typings/components.d.ts
@@ -46,6 +46,7 @@ declare module 'vue' {
     'IconQuill:collapse': typeof import('~icons/quill/collapse')['default']
     'IconQuill:expand': typeof import('~icons/quill/expand')['default']
     'IconSimpleIcons:gitee': typeof import('~icons/simple-icons/gitee')['default']
+    IconTooltip: typeof import('./../components/common/icon-tooltip.vue')['default']
     IconUilSearch: typeof import('~icons/uil/search')['default']
     JsonPreview: typeof import('./../components/custom/json-preview.vue')['default']
     LangSwitch: typeof import('./../components/common/lang-switch.vue')['default']