diff --git a/ui/src/views/Usage.vue b/ui/src/views/Usage.vue
index 8d5ada9..4338433 100644
--- a/ui/src/views/Usage.vue
+++ b/ui/src/views/Usage.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { RefreshCw } from 'lucide-vue-next'
-import { onMounted, ref } from 'vue'
+import { Layers, RefreshCw } from 'lucide-vue-next'
+import { computed, onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { Button } from '@/components/ui/button'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
@@ -76,15 +76,11 @@ function refreshStats() {
 }
 
 function formatNumber(num: number) {
-  if (num >= 1000000) {
+  if (num >= 1000000)
     return `${(num / 1000000).toFixed(1)}M`
-  }
-  else if (num >= 1000) {
+  if (num >= 1000)
     return `${(num / 1000).toFixed(1)}K`
-  }
-  else {
-    return num.toString()
-  }
+  return num.toString()
 }
 
 function formatTime(timestamp: string) {
@@ -96,6 +92,52 @@ function formatTime(timestamp: string) {
   }
 }
 
+function formatCurrency(num: number) {
+  return `¥${num.toFixed(2)}`
+}
+
+function getPercentage(part: number, total: number) {
+  if (!total)
+    return 0
+  return Math.round((part / total) * 100)
+}
+
+const totalTokens = computed(() => stats.value?.totalTokens ?? 0)
+const totalCost = computed(() => stats.value?.totalCost ?? 0)
+const totalRequests = computed(() => stats.value?.totalRequests ?? 0)
+const avgTokens = computed(() => {
+  if (!stats.value?.totalRequests)
+    return 0
+  return Math.round(stats.value.totalTokens / stats.value.totalRequests)
+})
+
+const appStats = computed(() => {
+  if (!stats.value)
+    return []
+  return Object.entries(stats.value.byApp)
+    .map(([id, app]) => ({
+      id,
+      name: app.appName || t('unknownApp'),
+      tokens: app.totalTokens,
+      cost: app.totalCost,
+      requests: app.requestCount,
+    }))
+    .sort((a, b) => b.tokens - a.tokens)
+})
+
+const providerStats = computed(() => {
+  if (!stats.value)
+    return []
+  return Object.entries(stats.value.byKey)
+    .map(([name, provider]) => ({
+      name,
+      tokens: provider.totalTokens,
+      cost: provider.totalCost,
+      requests: provider.requestCount,
+    }))
+    .sort((a, b) => b.tokens - a.tokens)
+})
+
 onMounted(() => {
   loadStats()
 })
@@ -104,13 +146,18 @@ onMounted(() => {
 <template>
   <div class="p-6">
     <div class="space-y-6">
-      <div class="flex items-center justify-between">
-        <h2 class="text-2xl font-bold">
-          {{ t('title') }}
-        </h2>
+      <div class="flex flex-wrap items-center justify-between gap-3">
+        <div>
+          <p class="text-xs uppercase tracking-wide text-muted-foreground">
+            {{ t('title') }}
+          </p>
+          <h2 class="text-2xl font-bold">
+            {{ t('overview') }}
+          </h2>
+        </div>
         <div class="flex items-center gap-2">
           <Select v-model="selectedDays" @update:model-value="loadStats">
-            <SelectTrigger class="w-[180px]">
+            <SelectTrigger class="w-[150px]">
               <SelectValue>
                 {{ selectedDays === '7' ? t('last7Days') : selectedDays === '30' ? t('last30Days') : t('last90Days') }}
               </SelectValue>
@@ -127,154 +174,198 @@ onMounted(() => {
               </SelectItem>
             </SelectContent>
           </Select>
-          <Button variant="outline" :disabled="loading" @click="refreshStats">
-            <RefreshCw class="mr-2 h-4 w-4" :class="{ 'animate-spin': loading }" />
-            {{ t('refresh') }}
+          <Button variant="outline" size="icon" :disabled="loading" @click="refreshStats">
+            <RefreshCw class="h-4 w-4" :class="[loading ? 'animate-spin' : '']" />
           </Button>
         </div>
       </div>
 
-      <!-- Overview Cards -->
-      <div v-if="stats" class="grid gap-4 md:grid-cols-4">
-        <Card>
-          <CardHeader class="pb-2">
-            <CardTitle class="text-sm font-medium text-muted-foreground">
-              {{ t('totalTokens') }}
-            </CardTitle>
-          </CardHeader>
-          <CardContent>
-            <div class="text-2xl font-bold">
-              {{ formatNumber(stats.totalTokens) }}
-            </div>
-          </CardContent>
-        </Card>
+      <div v-if="loading && !stats" class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+        <Skeleton v-for="i in 3" :key="i" class="h-32 rounded-2xl" />
+      </div>
 
-        <Card>
-          <CardHeader class="pb-2">
-            <CardTitle class="text-sm font-medium text-muted-foreground">
-              {{ t('totalCost') }}
-            </CardTitle>
-          </CardHeader>
-          <CardContent>
-            <div class="text-2xl font-bold">
-              ¥{{ stats.totalCost.toFixed(2) }}
-            </div>
-          </CardContent>
-        </Card>
+      <div v-else-if="error" class="p-6 bg-destructive/5 border border-destructive/50 rounded-2xl">
+        <p class="text-destructive font-medium">
+          {{ t('loadFailed') }}
+        </p>
+        <p class="text-sm text-destructive/80">
+          {{ error }}
+        </p>
+      </div>
 
-        <Card>
-          <CardHeader class="pb-2">
-            <CardTitle class="text-sm font-medium text-muted-foreground">
-              {{ t('totalRequests') }}
-            </CardTitle>
-          </CardHeader>
-          <CardContent>
-            <div class="text-2xl font-bold">
-              {{ formatNumber(stats.totalRequests) }}
+      <div v-else-if="stats" class="space-y-6">
+        <Card class="flex flex-col gap-6 rounded-xl border py-6">
+          <CardContent class="p-6 space-y-6 text-foreground">
+            <div class="flex flex-wrap items-center justify-between gap-4">
+              <div>
+                <p class="text-sm text-muted-foreground">
+                  {{ t('totalTokens') }}
+                </p>
+                <h3 class="text-4xl font-semibold text-foreground">
+                  {{ formatNumber(totalTokens) }}
+                  <span class="text-xl font-normal text-muted-foreground">{{ t('tokensUnit') }}</span>
+                </h3>
+              </div>
+              <span class="px-4 py-1 rounded-full bg-muted text-sm font-medium text-foreground">
+                {{ selectedDays === '7' ? t('last7Days') : selectedDays === '30' ? t('last30Days') : t('last90Days') }}
+              </span>
             </div>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader class="pb-2">
-            <CardTitle class="text-sm font-medium text-muted-foreground">
-              {{ t('averageTokensPerRequest') }}
-            </CardTitle>
-          </CardHeader>
-          <CardContent>
-            <div class="text-2xl font-bold">
-              {{ stats.totalRequests > 0 ? Math.round(stats.totalTokens / stats.totalRequests) : 0 }}
+            <div class="grid gap-4 md:grid-cols-3">
+              <div class="rounded-2xl border bg-muted/30 p-4">
+                <p class="text-sm text-muted-foreground">
+                  {{ t('totalCost') }}
+                </p>
+                <p class="text-2xl font-semibold mt-1 text-foreground">
+                  {{ formatCurrency(totalCost) }}
+                </p>
+              </div>
+              <div class="rounded-2xl border bg-muted/30 p-4">
+                <p class="text-sm text-muted-foreground">
+                  {{ t('totalRequests') }}
+                </p>
+                <p class="text-2xl font-semibold mt-1 text-foreground">
+                  {{ formatNumber(totalRequests) }}
+                </p>
+              </div>
+              <div class="rounded-2xl border bg-muted/30 p-4">
+                <p class="text-sm text-muted-foreground">
+                  {{ t('averageTokensPerRequest') }}
+                </p>
+                <p class="text-2xl font-semibold mt-1 text-foreground">
+                  {{ formatNumber(avgTokens) }}
+                </p>
+              </div>
             </div>
           </CardContent>
         </Card>
-      </div>
-
-      <!-- Loading State -->
-      <div v-if="loading" class="space-y-4">
-        <div class="grid gap-4 md:grid-cols-4">
-          <Skeleton v-for="i in 4" :key="i" class="h-24" />
-        </div>
-        <div class="grid gap-4 md:grid-cols-3">
-          <Skeleton v-for="i in 3" :key="i" class="h-64" />
-        </div>
-      </div>
 
-      <!-- Error State -->
-      <div v-else-if="error" class="rounded-lg border border-red-200 bg-red-50 p-4">
-        <p class="text-red-800">
-          {{ t('loadFailed') }}: {{ error }}
-        </p>
-      </div>
-
-      <!-- Statistics Tables -->
-      <div v-else-if="stats" class="grid gap-6 md:grid-cols-3">
-        <!-- By Application -->
-        <Card>
-          <CardHeader>
-            <CardTitle class="text-lg">
-              {{ t('byApp') }}
-            </CardTitle>
-          </CardHeader>
-          <CardContent>
-            <div class="space-y-2">
-              <div v-if="Object.keys(stats.byApp).length === 0" class="text-sm text-muted-foreground text-center py-4">
+        <div class="grid gap-6 lg:grid-cols-2">
+          <Card>
+            <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
+              <div>
+                <p class="text-sm text-muted-foreground uppercase tracking-wide">
+                  {{ t('byApp') }}
+                </p>
+                <CardTitle class="text-xl font-bold text-foreground">
+                  {{ t('appUsage') }}
+                </CardTitle>
+              </div>
+              <div class="size-9 rounded-full bg-primary/10 text-primary flex items-center justify-center font-semibold">
+                {{ appStats.length }}
+              </div>
+            </CardHeader>
+            <CardContent>
+              <div v-if="appStats.length === 0" class="text-center py-8 text-muted-foreground">
                 {{ t('noData') }}
               </div>
-              <div
-                v-for="(app, appId) in stats.byApp" v-else :key="appId"
-                class="flex justify-between items-center p-2 rounded border"
-              >
-                <div>
-                  <div class="font-medium text-sm">
-                    {{ app.appName || t('unknownApp') }}
+              <div v-else class="space-y-4">
+                <div
+                  v-for="app in appStats"
+                  :key="app.id"
+                  class="rounded-xl border bg-muted/30 p-3"
+                >
+                  <div class="flex items-center justify-between">
+                    <div>
+                      <p class="font-medium text-sm">
+                        {{ app.name }}
+                      </p>
+                      <p class="text-xs text-muted-foreground">
+                        {{ app.requests }} {{ t('requests') }} · {{ formatCurrency(app.cost) }}
+                      </p>
+                    </div>
+                    <p class="font-mono text-sm">
+                      {{ formatNumber(app.tokens) }}
+                    </p>
                   </div>
-                  <div class="text-xs text-muted-foreground">
-                    {{ app.requestCount }} {{ t('requests') }}
+                  <div class="mt-3 h-2 rounded-full bg-muted overflow-hidden">
+                    <div
+                      class="h-full rounded-full bg-primary"
+                      :style="{ width: `${getPercentage(app.tokens, totalTokens)}%` }"
+                    />
                   </div>
                 </div>
-                <div class="text-right">
-                  <div class="font-mono text-sm">
-                    {{ formatNumber(app.totalTokens) }}
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
+              <div>
+                <p class="text-sm text-muted-foreground uppercase tracking-wide">
+                  {{ t('byProvider') }}
+                </p>
+                <CardTitle class="text-xl font-bold text-foreground">
+                  {{ t('providerUsage') }}
+                </CardTitle>
+              </div>
+              <div class="size-9 rounded-full bg-muted flex items-center justify-center">
+                <Layers class="h-4 w-4 text-muted-foreground" />
+              </div>
+            </CardHeader>
+            <CardContent>
+              <div v-if="providerStats.length === 0" class="text-center py-8 text-muted-foreground">
+                {{ t('noData') }}
+              </div>
+              <div v-else class="space-y-4">
+                <div
+                  v-for="provider in providerStats"
+                  :key="provider.name"
+                  class="rounded-xl border p-3 hover:border-primary/40 transition"
+                >
+                  <div class="flex items-center justify-between">
+                    <div>
+                      <p class="font-medium text-sm">
+                        {{ provider.name }}
+                      </p>
+                      <p class="text-xs text-muted-foreground">
+                        {{ provider.requests }} {{ t('requests') }} · {{ formatCurrency(provider.cost) }}
+                      </p>
+                    </div>
+                    <p class="font-mono text-sm">
+                      {{ formatNumber(provider.tokens) }}
+                    </p>
                   </div>
-                  <div class="text-xs text-muted-foreground">
-                    ¥{{ app.totalCost.toFixed(2) }}
+                  <div class="mt-3 h-2 rounded-full bg-muted overflow-hidden">
+                    <div
+                      class="h-full rounded-full bg-slate-500"
+                      :style="{ width: `${getPercentage(provider.tokens, totalTokens)}%` }"
+                    />
                   </div>
                 </div>
               </div>
-            </div>
-          </CardContent>
-        </Card>
+            </CardContent>
+          </Card>
+        </div>
 
-        <!-- By Provider -->
         <Card>
           <CardHeader>
             <CardTitle class="text-lg">
-              {{ t('byProvider') }}
+              {{ t('byModel') }}
             </CardTitle>
           </CardHeader>
           <CardContent>
             <div class="space-y-2">
-              <div v-if="Object.keys(stats.byKey).length === 0" class="text-sm text-muted-foreground text-center py-4">
+              <div v-if="Object.keys(stats.byModel).length === 0" class="text-sm text-muted-foreground text-center py-4">
                 {{ t('noData') }}
               </div>
               <div
-                v-for="(provider, name) in stats.byKey" v-else :key="name"
+                v-for="(model, name) in stats.byModel" v-else :key="name"
                 class="flex justify-between items-center p-2 rounded border"
               >
                 <div>
                   <div class="font-medium text-sm">
-                    {{ name }}
+                    {{ name.split('/')[1] || name }}
                   </div>
                   <div class="text-xs text-muted-foreground">
-                    {{ provider.requestCount }} {{ t('requests') }}
+                    {{ model.key }} · {{ model.requestCount }} {{ t('times') }}
                   </div>
                 </div>
                 <div class="text-right">
                   <div class="font-mono text-sm">
-                    {{ formatNumber(provider.totalTokens) }}
+                    {{ formatNumber(model.totalTokens) }}
                   </div>
                   <div class="text-xs text-muted-foreground">
-                    ¥{{ provider.totalCost.toFixed(2) }}
+                    {{ formatCurrency(model.totalCost) }}
                   </div>
                 </div>
               </div>
@@ -282,36 +373,44 @@ onMounted(() => {
           </CardContent>
         </Card>
 
-        <!-- By Model -->
         <Card>
           <CardHeader>
             <CardTitle class="text-lg">
-              {{ t('byModel') }}
+              {{ t('recentUsageRecords') }}
             </CardTitle>
           </CardHeader>
           <CardContent>
-            <div class="space-y-2">
-              <div v-if="Object.keys(stats.byModel).length === 0" class="text-sm text-muted-foreground text-center py-4">
-                {{ t('noData') }}
-              </div>
+            <div v-if="stats.recentUsages.length === 0" class="text-center py-8 text-muted-foreground">
+              {{ t('noUsageRecords') }}
+            </div>
+            <div v-else class="space-y-2 max-h-96 overflow-y-auto pr-1">
               <div
-                v-for="(model, name) in stats.byModel" v-else :key="name"
-                class="flex justify-between items-center p-2 rounded border"
+                v-for="usage in stats.recentUsages"
+                :key="usage.id"
+                class="flex items-center justify-between gap-3 p-4 rounded-xl border bg-muted/30 hover:bg-muted/60 transition"
               >
-                <div>
-                  <div class="font-medium text-sm">
-                    {{ name.split('/')[1] || name }}
+                <div class="flex-1">
+                  <div class="flex flex-wrap items-center gap-2">
+                    <span class="font-medium text-sm">{{ usage.appName || t('unknownApp') }}</span>
+                    <span class="text-xs px-2 py-1 bg-secondary rounded">{{ usage.key }}</span>
+                    <span class="text-xs text-muted-foreground">{{ usage.model }}</span>
                   </div>
-                  <div class="text-xs text-muted-foreground">
-                    {{ model.key }} · {{ model.requestCount }} {{ t('times') }}
+                  <div class="text-xs text-muted-foreground mt-1">
+                    {{ formatTime(usage.timestamp) }} · {{ usage.endpoint }}
                   </div>
                 </div>
                 <div class="text-right">
                   <div class="font-mono text-sm">
-                    {{ formatNumber(model.totalTokens) }}
+                    {{ formatNumber(usage.totalTokens) }} {{ t('tokensUnit') }}
                   </div>
-                  <div class="text-xs text-muted-foreground">
-                    ¥{{ model.totalCost.toFixed(2) }}
+                  <div class="text-xs text-muted-foreground flex items-center justify-end gap-2">
+                    {{ formatCurrency(usage.cost) }}
+                    <span
+                      :class="usage.status === 'success' ? 'text-green-600' : 'text-red-500'"
+                      class="text-xs font-medium"
+                    >
+                      {{ usage.status === 'success' ? t('statusSuccess') : t('statusFailed') }}
+                    </span>
                   </div>
                 </div>
               </div>
@@ -319,48 +418,6 @@ onMounted(() => {
           </CardContent>
         </Card>
       </div>
-
-      <!-- Recent Usage Records -->
-      <Card v-if="stats">
-        <CardHeader>
-          <CardTitle class="text-lg">
-            {{ t('recentUsageRecords') }}
-          </CardTitle>
-        </CardHeader>
-        <CardContent>
-          <div v-if="stats.recentUsages.length === 0" class="text-center py-8 text-muted-foreground">
-            {{ t('noUsageRecords') }}
-          </div>
-          <div v-else class="space-y-2 max-h-96 overflow-y-auto">
-            <div
-              v-for="usage in stats.recentUsages" :key="usage.id"
-              class="flex items-center justify-between p-3 rounded border hover:bg-muted/50"
-            >
-              <div class="flex-1">
-                <div class="flex items-center gap-2">
-                  <span class="font-medium text-sm">{{ usage.appName || t('unknownApp') }}</span>
-                  <span class="text-xs px-2 py-1 bg-muted rounded">{{ usage.key }}</span>
-                  <span class="text-xs text-muted-foreground">{{ usage.model }}</span>
-                </div>
-                <div class="text-xs text-muted-foreground mt-1">
-                  {{ formatTime(usage.timestamp) }} · {{ usage.endpoint }}
-                </div>
-              </div>
-              <div class="text-right">
-                <div class="font-mono text-sm">
-                  {{ formatNumber(usage.totalTokens) }} {{ t('tokensUnit') }}
-                </div>
-                <div class="text-xs text-muted-foreground">
-                  ¥{{ usage.cost.toFixed(4) }}
-                  <span :class="usage.status === 'success' ? 'text-green-600' : 'text-red-600'" class="ml-1">
-                    {{ usage.status === 'success' ? '✓' : '✗' }}
-                  </span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </CardContent>
-      </Card>
     </div>
   </div>
 </template>
@@ -368,17 +425,20 @@ onMounted(() => {
 <i18n lang="yaml">
 zh-CN:
   title: Token 用量统计
-  last7Days: 最近 7 天
-  last30Days: 最近 30 天
-  last90Days: 最近 90 天
+  overview: 用量总览
+  last7Days: 最近7天
+  last30Days: 最近30天
+  last90Days: 最近90天
   refresh: 刷新
-  totalTokens: 总 Token 消耗
+  totalTokens: 总Token消耗
   totalCost: 总费用
   totalRequests: 总请求数
-  averageTokensPerRequest: 平均每请求 Token
+  averageTokensPerRequest: 平均每请求Token
   loadFailed: 加载用量统计失败
   byApp: 按应用统计
   byProvider: 按提供商统计
+  appUsage: 应用用量
+  providerUsage: 提供商用量
   byModel: 按模型统计
   noData: 暂无数据
   unknownApp: 未知应用
@@ -389,8 +449,11 @@ zh-CN:
   tokensUnit: tokens
   error: 未知错误
   invalidTime: 无效时间
+  statusSuccess: 成功
+  statusFailed: 失败
 en-US:
   title: Token Usage Statistics
+  overview: Overview
   last7Days: Last 7 Days
   last30Days: Last 30 Days
   last90Days: Last 90 Days
@@ -402,6 +465,8 @@ en-US:
   loadFailed: Failed to load usage statistics
   byApp: By Application
   byProvider: By Provider
+  appUsage: App Usage
+  providerUsage: Provider Usage
   byModel: By Model
   noData: No data available
   unknownApp: Unknown App
@@ -412,4 +477,6 @@ en-US:
   tokensUnit: tokens
   error: Unknown error
   invalidTime: Invalid time
+  statusSuccess: Success
+  statusFailed: Failed
 </i18n>