diff --git a/web/src/components/404.vue b/web/src/components/404.vue
index eb49866..6a532ec 100644
--- a/web/src/components/404.vue
+++ b/web/src/components/404.vue
@@ -18,19 +18,19 @@ const goBack = () => {
 </script>
 
 <template>
-  <div class="min-h-screen bg-gray-50 flex items-center justify-center px-4">
+  <div class="min-h-screen bg-background flex items-center justify-center px-4">
     <Card class="w-full max-w-md text-center">
       <CardHeader>
-        <div class="mx-auto mb-4 w-24 h-24 bg-red-100 rounded-full flex items-center justify-center">
-          <span class="text-4xl font-bold text-red-600">404</span>
+        <div class="mx-auto mb-4 w-24 h-24 bg-red-100 dark:bg-red-400/20 border border-border rounded-full flex items-center justify-center">
+          <span class="text-4xl font-bold text-red-600 dark:text-red-400">404</span>
         </div>
-        <CardTitle class="text-2xl font-bold text-gray-900">页面未找到</CardTitle>
-        <CardDescription class="text-gray-600">
+        <CardTitle class="text-2xl font-bold text-foreground">页面未找到</CardTitle>
+        <CardDescription class="text-muted-foreground">
           抱歉，您访问的页面不存在或已被移除
         </CardDescription>
       </CardHeader>
       <CardContent class="space-y-4">
-        <p class="text-sm text-gray-500">
+        <p class="text-sm text-muted-foreground">
           请检查URL是否正确，或者使用下面的按钮返回
         </p>
         <div class="flex flex-col sm:flex-row gap-3 justify-center">
diff --git a/web/src/components/ui/EmptyTableState.vue b/web/src/components/ui/EmptyTableState.vue
index 101ff56..c6e0e15 100644
--- a/web/src/components/ui/EmptyTableState.vue
+++ b/web/src/components/ui/EmptyTableState.vue
@@ -1,15 +1,15 @@
 <template>
   <div class="flex flex-col items-center justify-center space-y-3">
-    <div class="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center">
+    <div class="w-16 h-16 bg-muted border border-border rounded-full flex items-center justify-center">
       <slot name="icon">
-        <svg class="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <svg class="w-8 h-8 text-muted-foreground" fill="none" stroke="currentColor" viewBox="0 0 24 24">
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2M4 13h2m13-8V4a1 1 0 00-1-1H6a1 1 0 00-1 1v1m16 0V4a1 1 0 00-1-1H6a1 1 0 00-1 1v1"></path>
         </svg>
       </slot>
     </div>
-    <div class="text-gray-500 text-center">
-      <p class="text-lg font-medium">{{ title }}</p>
-      <p class="text-sm">{{ description }}</p>
+    <div class="text-center">
+      <p class="text-lg font-medium text-foreground">{{ title }}</p>
+      <p class="text-sm text-muted-foreground">{{ description }}</p>
     </div>
   </div>
 </template>