diff --git a/web/package-lock.json b/web/package-lock.json
index 9be1e35..f2b83f7 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -10,6 +10,7 @@
       "license": "MIT",
       "dependencies": {
         "@vicons/ionicons5": "^0.13.0",
+        "@vueuse/core": "^13.6.0",
         "axios": "^1.9.0",
         "naive-ui": "^2.41.0",
         "vue": "^3.5.13",
@@ -1122,6 +1123,12 @@
         "undici-types": "~6.21.0"
       }
     },
+    "node_modules/@types/web-bluetooth": {
+      "version": "0.0.21",
+      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.21.tgz",
+      "integrity": "sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA==",
+      "license": "MIT"
+    },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "8.35.1",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.35.1.tgz",
@@ -1590,6 +1597,44 @@
         }
       }
     },
+    "node_modules/@vueuse/core": {
+      "version": "13.6.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-13.6.0.tgz",
+      "integrity": "sha512-DJbD5fV86muVmBgS9QQPddVX7d9hWYswzlf4bIyUD2dj8GC46R1uNClZhVAmsdVts4xb2jwp1PbpuiA50Qee1A==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/web-bluetooth": "^0.0.21",
+        "@vueuse/metadata": "13.6.0",
+        "@vueuse/shared": "13.6.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "vue": "^3.5.0"
+      }
+    },
+    "node_modules/@vueuse/metadata": {
+      "version": "13.6.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-13.6.0.tgz",
+      "integrity": "sha512-rnIH7JvU7NjrpexTsl2Iwv0V0yAx9cw7+clymjKuLSXG0QMcLD0LDgdNmXic+qL0SGvgSVPEpM9IDO/wqo1vkQ==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/shared": {
+      "version": "13.6.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-13.6.0.tgz",
+      "integrity": "sha512-pDykCSoS2T3fsQrYqf9SyF0QXWHmcGPQ+qiOVjlYSzlWd9dgppB2bFSM1GgKKkt7uzn0BBMV3IbJsUfHG2+BCg==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "vue": "^3.5.0"
+      }
+    },
     "node_modules/acorn": {
       "version": "8.15.0",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
diff --git a/web/package.json b/web/package.json
index ca71f75..ce7f98a 100644
--- a/web/package.json
+++ b/web/package.json
@@ -4,7 +4,14 @@
   "version": "0.1.0",
   "description": "GPT Load Balancer Frontend - A modern Vue 3 frontend for GPT load balancing service",
   "type": "module",
-  "keywords": ["vue3", "typescript", "vite", "naive-ui", "gpt-load", "frontend"],
+  "keywords": [
+    "vue3",
+    "typescript",
+    "vite",
+    "naive-ui",
+    "gpt-load",
+    "frontend"
+  ],
   "author": "tbphp",
   "license": "MIT",
   "repository": {
@@ -32,6 +39,7 @@
   },
   "dependencies": {
     "@vicons/ionicons5": "^0.13.0",
+    "@vueuse/core": "^13.6.0",
     "axios": "^1.9.0",
     "naive-ui": "^2.41.0",
     "vue": "^3.5.13",
diff --git a/web/src/components/AppFooter.vue b/web/src/components/AppFooter.vue
index 86df4d2..15410d9 100644
--- a/web/src/components/AppFooter.vue
+++ b/web/src/components/AppFooter.vue
@@ -218,7 +218,7 @@ onMounted(() => {
   border-top: 1px solid rgba(0, 0, 0, 0.08);
   padding: 12px 24px;
   font-size: 14px;
-  height: 52px;
+  min-height: 52px;
 }
 
 .footer-container {
@@ -231,7 +231,6 @@ onMounted(() => {
   align-items: center;
   justify-content: center;
   gap: 16px;
-  flex-wrap: wrap;
   line-height: 1.4;
 }
 
@@ -269,6 +268,7 @@ onMounted(() => {
   font-weight: 500;
   font-size: 13px;
   color: #666;
+  white-space: nowrap;
 }
 
 .version-clickable {
@@ -301,6 +301,7 @@ onMounted(() => {
   border-radius: 4px;
   transition: all 0.2s ease;
   font-size: 13px;
+  white-space: nowrap;
 }
 
 .footer-link:hover {
@@ -345,6 +346,7 @@ onMounted(() => {
 @media (max-width: 768px) {
   .app-footer {
     padding: 10px 16px;
+    height: auto;
   }
 
   .footer-main {
@@ -353,7 +355,7 @@ onMounted(() => {
     text-align: center;
   }
 
-  .divider {
+  .footer-main :deep(.n-divider) {
     display: none;
   }
 
diff --git a/web/src/components/BaseInfoCard.vue b/web/src/components/BaseInfoCard.vue
index 82047ce..d51f577 100644
--- a/web/src/components/BaseInfoCard.vue
+++ b/web/src/components/BaseInfoCard.vue
@@ -59,7 +59,7 @@ onMounted(() => {
 <template>
   <div class="stats-container">
     <n-space vertical size="medium">
-      <n-grid :cols="4" :x-gap="20" :y-gap="20" responsive="screen">
+      <n-grid cols="2 s:4" :x-gap="20" :y-gap="20" responsive="screen">
         <!-- 密钥数量 -->
         <n-grid-item span="1">
           <n-card :bordered="false" class="stat-card" style="animation-delay: 0s">
@@ -217,13 +217,13 @@ onMounted(() => {
 }
 
 .stat-icon {
-  width: 48px;
-  height: 48px;
+  width: 40px;
+  height: 40px;
   border-radius: var(--border-radius-md);
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 1.5rem;
+  font-size: 1.4rem;
   color: white;
   box-shadow: var(--shadow-md);
 }
@@ -262,7 +262,7 @@ onMounted(() => {
 }
 
 .stat-value {
-  font-size: 2.5rem;
+  font-size: 2rem;
   font-weight: 700;
   line-height: 1.2;
   color: #1e293b;
diff --git a/web/src/components/GlobalTaskProgressBar.vue b/web/src/components/GlobalTaskProgressBar.vue
index 342f3cb..56e4aed 100644
--- a/web/src/components/GlobalTaskProgressBar.vue
+++ b/web/src/components/GlobalTaskProgressBar.vue
@@ -170,7 +170,8 @@ function getTaskTitle(): string {
   bottom: 62px;
   right: 10px;
   z-index: 9999;
-  width: 350px;
+  width: 95%;
+  max-width: 350px;
   background: white;
   border-radius: var(--border-radius-md);
   box-shadow: var(--shadow-lg);
@@ -178,6 +179,14 @@ function getTaskTitle(): string {
   animation: slideIn 0.3s ease-out;
 }
 
+@media (max-width: 768px) {
+  .global-task-progress {
+    bottom: 72px;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+}
+
 @keyframes slideIn {
   from {
     transform: translateX(100%);
diff --git a/web/src/components/Layout.vue b/web/src/components/Layout.vue
index 2f8e36c..1a7f128 100644
--- a/web/src/components/Layout.vue
+++ b/web/src/components/Layout.vue
@@ -3,6 +3,21 @@ import AppFooter from "@/components/AppFooter.vue";
 import GlobalTaskProgressBar from "@/components/GlobalTaskProgressBar.vue";
 import Logout from "@/components/Logout.vue";
 import NavBar from "@/components/NavBar.vue";
+import { useMediaQuery } from "@vueuse/core";
+import { ref, watch } from "vue";
+
+const isMenuOpen = ref(false);
+const isMobile = useMediaQuery("(max-width: 768px)");
+
+watch(isMobile, value => {
+  if (!value) {
+    isMenuOpen.value = false;
+  }
+});
+
+const toggleMenu = () => {
+  isMenuOpen.value = !isMenuOpen.value;
+};
 </script>
 
 <template>
@@ -13,17 +28,33 @@ import NavBar from "@/components/NavBar.vue";
           <div class="brand-icon">
             <img src="@/assets/logo.png" alt="" />
           </div>
-          <h1 class="brand-title">GPT Load</h1>
+          <h1 v-if="!isMobile" class="brand-title">GPT Load</h1>
         </div>
 
-        <nav-bar class="header-nav" />
+        <nav v-if="!isMobile" class="header-nav">
+          <nav-bar />
+        </nav>
 
         <div class="header-actions">
-          <logout />
+          <logout v-if="!isMobile" />
+          <n-button v-else text @click="toggleMenu">
+            <svg viewBox="0 0 24 24" width="24" height="24">
+              <path fill="currentColor" d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z" />
+            </svg>
+          </n-button>
         </div>
       </div>
     </n-layout-header>
 
+    <n-drawer v-model:show="isMenuOpen" :width="240" placement="right">
+      <n-drawer-content title="GPT Load" body-content-style="padding: 0;">
+        <nav-bar mode="vertical" @close="isMenuOpen = false" />
+        <div class="mobile-actions">
+          <logout />
+        </div>
+      </n-drawer-content>
+    </n-drawer>
+
     <n-layout-content class="layout-content">
       <div class="content-wrapper">
         <router-view v-slot="{ Component }">
@@ -56,14 +87,14 @@ import NavBar from "@/components/NavBar.vue";
   position: sticky;
   top: 0;
   z-index: 100;
-  padding: 0 24px;
+  padding: 0 12px;
 }
 
 .header-content {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 8px;
+  padding: 8px 0;
   overflow-x: auto;
   max-width: 1200px;
   margin: 0 auto;
@@ -101,6 +132,13 @@ import NavBar from "@/components/NavBar.vue";
 
 .header-actions {
   flex-shrink: 0;
+  display: flex;
+  align-items: center;
+}
+
+.mobile-actions {
+  padding: 12px;
+  border-top: 1px solid rgba(0, 0, 0, 0.08);
 }
 
 .layout-content {
@@ -113,7 +151,7 @@ import NavBar from "@/components/NavBar.vue";
 }
 
 .content-wrapper {
-  padding: 24px 12px;
+  padding: 16px;
   min-height: calc(100vh - 111px);
 }
 
diff --git a/web/src/components/LineChart.vue b/web/src/components/LineChart.vue
index 96ef0d5..18d9932 100644
--- a/web/src/components/LineChart.vue
+++ b/web/src/components/LineChart.vue
@@ -792,9 +792,34 @@ onMounted(() => {
     align-items: flex-start;
   }
 
+  .chart-wrapper {
+    flex-direction: column;
+    align-items: center;
+  }
+
   .chart-legend {
+    position: relative;
+    transform: none;
+    left: auto;
+    top: auto;
+    margin-top: 8px;
+    margin-bottom: 12px;
+    background: transparent;
+    backdrop-filter: none;
+    border: none;
+    width: 100%;
     flex-wrap: wrap;
-    gap: 16px;
+    gap: 8px;
+    justify-content: center;
+  }
+
+  .legend-item {
+    padding: 4px 10px;
+    font-size: 12px;
+    color: #333;
+    background: white;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    gap: 6px;
   }
 
   .chart-svg {
diff --git a/web/src/components/NavBar.vue b/web/src/components/NavBar.vue
index a92df6f..e74ba84 100644
--- a/web/src/components/NavBar.vue
+++ b/web/src/components/NavBar.vue
@@ -1,18 +1,37 @@
 <script setup lang="ts">
-import type { MenuOption } from "naive-ui";
-import { computed, h } from "vue";
+import { type MenuOption } from "naive-ui";
+import { computed, h, watch } from "vue";
 import { RouterLink, useRoute } from "vue-router";
 
-const menuOptions: MenuOption[] = [
-  renderMenuItem("dashboard", "仪表盘", "📊"),
-  renderMenuItem("keys", "密钥管理", "🔑"),
-  renderMenuItem("logs", "日志", "📋"),
-  renderMenuItem("settings", "系统设置", "⚙️"),
-];
+const props = defineProps({
+  mode: {
+    type: String,
+    default: "horizontal",
+  },
+});
+
+const emit = defineEmits(["close"]);
+
+const menuOptions = computed<MenuOption[]>(() => {
+  const options: MenuOption[] = [
+    renderMenuItem("dashboard", "仪表盘", "📊"),
+    renderMenuItem("keys", "密钥管理", "🔑"),
+    renderMenuItem("logs", "日志", "📋"),
+    renderMenuItem("settings", "系统设置", "⚙️"),
+  ];
+
+  return options;
+});
 
 const route = useRoute();
 const activeMenu = computed(() => route.name);
 
+watch(activeMenu, () => {
+  if (props.mode === "vertical") {
+    emit("close");
+  }
+});
+
 function renderMenuItem(key: string, label: string, icon: string): MenuOption {
   return {
     label: () =>
@@ -39,10 +58,9 @@ function renderMenuItem(key: string, label: string, icon: string): MenuOption {
 <template>
   <div>
     <n-menu
-      mode="horizontal"
+      :mode="mode"
       :options="menuOptions"
       :value="activeMenu"
-      responsive
       class="modern-menu"
     />
   </div>
@@ -61,24 +79,22 @@ function renderMenuItem(key: string, label: string, icon: string): MenuOption {
   font-weight: 500;
 }
 
-:deep(.n-menu-item-content) {
-  padding: 0 10px !important;
-}
-
-:deep(.nav-item-text) {
-  font-size: 0.95rem;
-  letter-spacing: 0.2px;
-}
-
 :deep(.n-menu-item) {
   border-radius: var(--border-radius-md);
-  margin: 0 4px;
-  transition: all 0.2s ease;
+}
+
+:deep(.n-menu--vertical .n-menu-item-content) {
+  justify-content: center;
+}
+
+:deep(.n-menu--vertical .n-menu-item) {
+  margin: 4px 8px;
 }
 
 :deep(.n-menu-item:hover) {
   background: rgba(102, 126, 234, 0.1);
   transform: translateY(-1px);
+  border-radius: var(--border-radius-md);
 }
 
 :deep(.n-menu-item--selected) {
@@ -86,6 +102,7 @@ function renderMenuItem(key: string, label: string, icon: string): MenuOption {
   color: white;
   font-weight: 600;
   box-shadow: var(--shadow-md);
+  border-radius: var(--border-radius-md);
 }
 
 :deep(.n-menu-item--selected:hover) {
diff --git a/web/src/components/keys/GroupFormModal.vue b/web/src/components/keys/GroupFormModal.vue
index 1b60c53..f4654e1 100644
--- a/web/src/components/keys/GroupFormModal.vue
+++ b/web/src/components/keys/GroupFormModal.vue
@@ -366,6 +366,10 @@ function handleConfigKeyChange(index: number, key: string) {
   }
 }
 
+const getConfigOption = (key: string) => {
+  return configOptions.value.find(opt => opt.key === key);
+};
+
 // 关闭弹窗
 function handleClose() {
   emit("update:show", false);
@@ -440,7 +444,7 @@ async function handleSubmit() {
 <template>
   <n-modal :show="show" @update:show="handleClose" class="group-form-modal">
     <n-card
-      style="width: 800px"
+      class="group-form-card"
       :title="group ? '编辑分组' : '创建分组'"
       :bordered="false"
       size="huge"
@@ -462,6 +466,7 @@ async function handleSubmit() {
         label-placement="left"
         label-width="120px"
         require-mark-placement="right-hanging"
+        class="group-form"
       >
         <!-- 基础信息 -->
         <div class="form-section">
@@ -677,9 +682,14 @@ async function handleSubmit() {
               </div>
               <div class="upstream-weight">
                 <span class="weight-label">权重</span>
-                <n-tooltip trigger="hover" placement="top">
+                <n-tooltip trigger="hover" placement="top" style="width: 100%">
                   <template #trigger>
-                    <n-input-number v-model:value="upstream.weight" :min="1" placeholder="权重" />
+                    <n-input-number
+                      v-model:value="upstream.weight"
+                      :min="1"
+                      placeholder="权重"
+                      style="width: 100%"
+                    />
                   </template>
                   负载均衡权重，数值越大被选中的概率越高。例如：权重为2的上游被选中的概率是权重为1的两倍
                 </n-tooltip>
@@ -771,11 +781,16 @@ async function handleSubmit() {
                         />
                       </div>
                       <div class="config-value">
-                        <n-input-number
-                          v-model:value="configItem.value"
-                          placeholder="参数值"
-                          :precision="0"
-                        />
+                        <n-tooltip trigger="hover" placement="top">
+                          <template #trigger>
+                            <n-input-number
+                              v-model:value="configItem.value"
+                              placeholder="参数值"
+                              :precision="0"
+                            />
+                          </template>
+                          {{ getConfigOption(configItem.key)?.description || "设置此配置项的值" }}
+                        </n-tooltip>
                       </div>
                       <div class="config-actions">
                         <n-button
@@ -1106,4 +1121,49 @@ async function handleSubmit() {
   display: flex;
   justify-content: center;
 }
+
+@media (max-width: 768px) {
+  .group-form-card {
+    width: 100vw !important;
+  }
+
+  .group-form {
+    label-width: auto !important;
+  }
+
+  .form-row {
+    flex-direction: column;
+    gap: 0;
+  }
+
+  .form-item-half {
+    width: 100%;
+  }
+
+  .section-title {
+    font-size: 0.9rem;
+  }
+
+  .upstream-row,
+  .config-item-content {
+    flex-direction: column;
+    gap: 8px;
+    align-items: stretch;
+  }
+
+  .upstream-weight {
+    flex: 1;
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .config-value {
+    flex: 1;
+  }
+
+  .upstream-actions,
+  .config-actions {
+    justify-content: flex-end;
+  }
+}
 </style>
diff --git a/web/src/components/keys/GroupInfoCard.vue b/web/src/components/keys/GroupInfoCard.vue
index 507e20f..d01c64e 100644
--- a/web/src/components/keys/GroupInfoCard.vue
+++ b/web/src/components/keys/GroupInfoCard.vue
@@ -275,7 +275,7 @@ function resetPage() {
       <!-- 统计摘要区 -->
       <div class="stats-summary">
         <n-spin :show="loading" size="small">
-          <n-grid :cols="4" :x-gap="12" :y-gap="12" responsive="screen">
+          <n-grid cols="2 s:4" :x-gap="12" :y-gap="12" responsive="screen">
             <n-grid-item span="1">
               <n-statistic :label="`密钥数量：${stats?.key_stats?.total_keys ?? 0}`">
                 <n-tooltip trigger="hover">
@@ -379,7 +379,7 @@ function resetPage() {
               <div class="detail-section">
                 <h4 class="section-title">基础信息</h4>
                 <n-form label-placement="left" label-width="85px" label-align="right">
-                  <n-grid :cols="2">
+                  <n-grid cols="1 m:2">
                     <n-grid-item>
                       <n-form-item label="分组名称：">
                         {{ group?.name }}
diff --git a/web/src/components/keys/KeyTable.vue b/web/src/components/keys/KeyTable.vue
index a1fcd25..6331597 100644
--- a/web/src/components/keys/KeyTable.vue
+++ b/web/src/components/keys/KeyTable.vue
@@ -815,8 +815,8 @@ function resetPage() {
 
 .keys-grid {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 12px;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 16px;
 }
 
 .key-card {
@@ -1026,4 +1026,23 @@ function resetPage() {
   font-size: 12px;
   color: #6c757d;
 }
+
+@media (max-width: 768px) {
+  .toolbar {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 12px;
+  }
+
+  .toolbar-left,
+  .toolbar-right {
+    width: 100%;
+    justify-content: space-between;
+  }
+
+  .toolbar-right .n-space {
+    width: 100%;
+    justify-content: space-between;
+  }
+}
 </style>
diff --git a/web/src/components/logs/LogTable.vue b/web/src/components/logs/LogTable.vue
index 5ee6511..31bd01c 100644
--- a/web/src/components/logs/LogTable.vue
+++ b/web/src/components/logs/LogTable.vue
@@ -235,80 +235,70 @@ function changePageSize(size: number) {
       <!-- 工具栏 -->
       <div class="toolbar">
         <div class="filter-section">
-          <!-- 第一行：基础筛选 -->
           <div class="filter-row">
-            <div class="filter-group">
-              <n-date-picker
-                v-model:value="filters.start_time"
-                type="datetime"
-                clearable
-                size="small"
-                placeholder="开始时间"
-                style="width: 180px"
-              />
-            </div>
-            <div class="filter-group">
-              <n-date-picker
-                v-model:value="filters.end_time"
-                type="datetime"
-                clearable
-                size="small"
-                placeholder="结束时间"
-                style="width: 180px"
-              />
-            </div>
-            <div class="filter-group">
-              <n-select
-                v-model:value="filters.is_success"
-                :options="successOptions"
-                size="small"
-                style="width: 166px"
-                @update:value="handleSearch"
-              />
-            </div>
-            <div class="filter-group">
-              <n-input
-                v-model:value="filters.status_code"
-                placeholder="状态码"
-                size="small"
-                clearable
-                style="width: 166px"
-                @keyup.enter="handleSearch"
-              />
-            </div>
-            <div class="filter-group">
-              <n-input
-                v-model:value="filters.group_name"
-                placeholder="分组名"
-                size="small"
-                clearable
-                style="width: 166px"
-                @keyup.enter="handleSearch"
-              />
-            </div>
-            <div class="filter-group">
-              <n-input
-                v-model:value="filters.key_value"
-                placeholder="密钥"
-                size="small"
-                clearable
-                style="width: 166px"
-                @keyup.enter="handleSearch"
-              />
-            </div>
-          </div>
-
-          <!-- 第二行：详细筛选和操作 -->
-          <div class="filter-row">
-            <div class="filter-group">
-              <n-input
-                v-model:value="filters.error_contains"
-                placeholder="错误信息"
-                size="small"
-                clearable
-                style="width: 384px"
-                @keyup.enter="handleSearch"
-              />
+            <div class="filter-grid">
+              <div class="filter-item">
+                <n-input
+                  v-model:value="filters.group_name"
+                  placeholder="分组名"
+                  size="small"
+                  clearable
+                  @keyup.enter="handleSearch"
+                />
+              </div>
+              <div class="filter-item">
+                <n-input
+                  v-model:value="filters.key_value"
+                  placeholder="密钥"
+                  size="small"
+                  clearable
+                  @keyup.enter="handleSearch"
+                />
+              </div>
+              <div class="filter-item">
+                <n-input
+                  v-model:value="filters.status_code"
+                  placeholder="状态码"
+                  size="small"
+                  clearable
+                  @keyup.enter="handleSearch"
+                />
+              </div>
+              <div class="filter-item">
+                <n-select
+                  v-model:value="filters.is_success"
+                  :options="successOptions"
+                  size="small"
+                  @update:value="handleSearch"
+                />
+              </div>
+              <div class="filter-item">
+                <n-input
+                  v-model:value="filters.error_contains"
+                  placeholder="错误信息"
+                  size="small"
+                  clearable
+                  @keyup.enter="handleSearch"
+                />
+              </div>
+              <div class="filter-item">
+                <n-date-picker
+                  v-model:value="filters.start_time"
+                  type="datetime"
+                  clearable
+                  size="small"
+                  placeholder="开始时间"
+                />
+              </div>
+              <div class="filter-item">
+                <n-date-picker
+                  v-model:value="filters.end_time"
+                  type="datetime"
+                  clearable
+                  size="small"
+                  placeholder="结束时间"
+                />
+              </div>
             </div>
             <div class="filter-actions">
               <n-button ghost size="small" :disabled="loading" @click="handleSearch">
@@ -400,50 +390,47 @@ function changePageSize(size: number) {
 
 .filter-row {
   display: flex;
-  align-items: center;
-  gap: 24px;
   flex-wrap: wrap;
+  align-items: flex-end; /* Aligns buttons with the bottom of the filter items */
+  gap: 16px;
 }
 
-.filter-group {
+.filter-grid {
   display: flex;
-  align-items: center;
-  gap: 8px;
+  flex-wrap: wrap;
+  gap: 12px;
+  flex: 1 1 auto; /* Let it take available space and wrap */
 }
 
-.filter-label {
-  font-size: 13px;
-  color: #666;
-  white-space: nowrap;
-  min-width: 50px;
-}
-
-.filter-separator {
-  font-size: 12px;
-  color: #999;
-  margin: 0 4px;
+.filter-item {
+  flex: 1 1 180px; /* Each item will have a base width of 180px and can grow */
+  min-width: 180px; /* Prevent from becoming too narrow */
 }
 
 .filter-actions {
   display: flex;
   align-items: center;
   gap: 8px;
-  margin-left: auto;
 }
 
-@media (max-width: 1200px) {
-  .filter-row {
-    gap: 16px;
-  }
-
-  .filter-group {
-    min-width: auto;
+@media (max-width: 768px) {
+  .pagination-container {
+    flex-direction: column;
+    gap: 12px;
   }
+}
 
+@media (max-width: 480px) {
   .filter-actions {
-    margin-left: 0;
+    width: 100%;
+    flex-direction: column;
+    align-items: stretch;
+  }
+  .filter-actions .n-button {
+    width: 100%;
   }
 }
+
 .table-main {
   background: white;
   border-radius: 8px;
@@ -453,7 +440,7 @@ function changePageSize(size: number) {
   /* background: white;
   border-radius: 8px; */
   flex: 1;
-  overflow: hidden;
+  overflow: auto;
   position: relative;
 }
 .empty-container {
diff --git a/web/src/views/Dashboard.vue b/web/src/views/Dashboard.vue
index 9cc03f0..7be7718 100644
--- a/web/src/views/Dashboard.vue
+++ b/web/src/views/Dashboard.vue
@@ -7,10 +7,8 @@ import { NSpace } from "naive-ui";
 <template>
   <div class="dashboard-container">
     <n-space vertical size="large">
-      <n-space vertical size="large" style="gap: 24px">
-        <base-info-card />
-        <line-chart class="dashboard-chart" />
-      </n-space>
+      <base-info-card />
+      <line-chart class="dashboard-chart" />
     </n-space>
   </div>
 </template>
diff --git a/web/src/views/Keys.vue b/web/src/views/Keys.vue
index b5a6733..70a96e1 100644
--- a/web/src/views/Keys.vue
+++ b/web/src/views/Keys.vue
@@ -106,14 +106,14 @@ function handleGroupDelete(deletedGroup: Group) {
 <style scoped>
 .keys-container {
   display: flex;
+  flex-direction: column;
   gap: 8px;
   width: 100%;
 }
 
 .sidebar {
-  width: 240px;
+  width: 100%;
   flex-shrink: 0;
-  height: calc(100vh - 159px);
 }
 
 .main-content {
@@ -133,4 +133,15 @@ function handleGroupDelete(deletedGroup: Group) {
   flex-direction: column;
   min-height: 0;
 }
+
+@media (min-width: 768px) {
+  .keys-container {
+    flex-direction: row;
+  }
+
+  .sidebar {
+    width: 240px;
+    height: calc(100vh - 159px);
+  }
+}
 </style>