diff --git a/client/src/App.vue b/client/src/App.vue
index 0fa7082..596e059 100644
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -1,37 +1,50 @@
 <template>
   <div class="min-h-screen bg-art-bg text-art-text">
-    <!-- Global Noise -->
-    <div class="fixed inset-0 pointer-events-none z-[60] bg-noise opacity-30 mix-blend-overlay"></div>
+    <!-- Global Noise (Only for frontend) -->
+    <div v-if="!isAdminOrLogin" class="fixed inset-0 pointer-events-none z-[60] bg-noise opacity-30 mix-blend-overlay"></div>
     
     <!-- Toast Container -->
     <div id="toast-container" class="toast-container"></div>
     
-    <!-- Header -->
-    <Header />
+    <!-- Header (Hide on Admin & Login) -->
+    <Header v-if="!isAdminOrLogin" />
     
-    <!-- Mobile Menu -->
-    <MobileMenu />
+    <!-- Mobile Menu (Hide on Admin & Login) -->
+    <MobileMenu v-if="!isAdminOrLogin" />
     
     <!-- Main Content -->
-    <main class="pt-32 pb-20 px-6 max-w-7xl mx-auto relative z-10">
+    <!-- Conditional classes: Apply max-w-7xl only for frontend pages -->
+    <main :class="[
+      isAdminOrLogin ? 'w-full h-full' : 'pt-32 pb-20 px-6 max-w-7xl mx-auto relative z-10'
+    ]">
       <router-view />
     </main>
     
-    <!-- Footer -->
-    <Footer />
+    <!-- Footer (Hide on Admin & Login) -->
+    <Footer v-if="!isAdminOrLogin" />
     
-    <!-- Snippet Modal -->
-    <SnippetModal />
+    <!-- Snippet Modal (Hide on Admin & Login) -->
+    <SnippetModal v-if="!isAdminOrLogin" />
     
-    <!-- Inquiry Modal -->
-    <InquiryModal />
+    <!-- Inquiry Modal (Hide on Admin & Login) -->
+    <InquiryModal v-if="!isAdminOrLogin" />
   </div>
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
 import Header from './components/Header.vue'
 import MobileMenu from './components/MobileMenu.vue'
 import Footer from './components/Footer.vue'
 import SnippetModal from './components/SnippetModal.vue'
 import InquiryModal from './components/InquiryModal.vue'
-</script>
\ No newline at end of file
+
+const route = useRoute()
+
+// Check if current route is Admin or Login page
+const isAdminOrLogin = computed(() => {
+  const path = route.path
+  return path.startsWith('/admin') || path === '/login'
+})
+</script>
diff --git a/client/src/components/admin/AdminLayout.vue b/client/src/components/admin/AdminLayout.vue
index d8da94b..9470e13 100644
--- a/client/src/components/admin/AdminLayout.vue
+++ b/client/src/components/admin/AdminLayout.vue
@@ -1,108 +1,156 @@
 <template>
-  <div class="admin-layout">
+  <div class="flex h-screen bg-art-admin-bg text-white overflow-hidden font-sans">
     <!-- Sidebar Navigation -->
-    <aside class="admin-sidebar" :class="{ 'collapsed': !isSidebarOpen }">
-      <div class="sidebar-header">
-        <h1 class="sidebar-title">管理后台</h1>
+    <aside 
+      class="flex flex-col bg-art-admin-card border-r border-white/5 transition-all duration-300 z-20"
+      :class="[isSidebarOpen ? 'w-64' : 'w-20']"
+    >
+      <!-- Logo Area -->
+      <div class="h-16 flex items-center px-6 border-b border-white/5 shrink-0">
+        <h1 class="font-serif italic text-xl tracking-wide truncate transition-all duration-300" :class="{ 'opacity-0': !isSidebarOpen }">
+          Niangao<span class="text-art-accent">.Admin</span>
+        </h1>
+        <span v-if="!isSidebarOpen" class="absolute left-1/2 -translate-x-1/2 text-art-accent font-serif text-xl italic">N</span>
       </div>
-      <nav class="sidebar-nav">
-        <ul>
-          <li v-for="(item, index) in menuItems" :key="index">
-            <!-- Parent Menu Item -->
+      
+      <!-- Nav Menu -->
+      <nav class="flex-1 overflow-y-auto py-6 px-3 space-y-1 custom-scrollbar">
+        <template v-for="(item, index) in menuItems" :key="index">
+          <!-- Parent Menu Item -->
+          <div v-if="item.children">
             <div 
-              v-if="item.children" 
-              class="nav-item-parent" 
-              :class="{ 'expanded': item.isOpen }"
+              class="flex items-center justify-between px-3 py-2.5 rounded-md cursor-pointer transition-colors duration-200 group mb-1"
+              :class="[isParentActive(item) ? 'text-white' : 'text-art-muted hover:text-white hover:bg-white/5']"
               @click="toggleMenu(index)"
             >
-              <div class="nav-link-content">
-                <span class="nav-icon">{{ item.icon }}</span>
-                <span class="nav-text">{{ item.title }}</span>
+              <div class="flex items-center gap-3 min-w-0">
+                <span class="text-lg shrink-0 group-hover:text-art-accent transition-colors" :class="isParentActive(item) ? 'text-art-accent' : ''">{{ item.icon }}</span>
+                <span class="text-sm font-medium truncate transition-opacity duration-300" :class="{ 'opacity-0 w-0': !isSidebarOpen }">{{ item.title }}</span>
               </div>
-              <span class="nav-arrow">▼</span>
+              <span 
+                v-if="isSidebarOpen" 
+                class="text-[10px] transition-transform duration-200 opacity-50 group-hover:opacity-100"
+                :class="{ 'rotate-180': item.isOpen }"
+              >▼</span>
             </div>
             
-            <!-- Single Menu Item -->
-            <router-link 
-              v-else 
-              :to="item.path || ''" 
-              class="nav-link" 
-              active-class="active"
-            >
-              <span class="nav-icon">{{ item.icon }}</span>
-              <span class="nav-text">{{ item.title }}</span>
-            </router-link>
-
             <!-- Submenu -->
-            <ul v-if="item.children" class="submenu" :style="{ maxHeight: item.isOpen ? (item.children.length * 50) + 'px' : '0px' }">
-              <li v-for="(child, childIndex) in item.children" :key="childIndex">
-                <router-link :to="child.path" class="nav-link sub-link" active-class="active">
-                  <span class="nav-icon">{{ child.icon }}</span>
-                  <span class="nav-text">{{ child.title }}</span>
-                </router-link>
-              </li>
-            </ul>
-          </li>
-        </ul>
+            <div 
+              v-show="isSidebarOpen && item.isOpen" 
+              class="ml-4 pl-4 border-l border-white/5 space-y-1 mb-2 overflow-hidden transition-all duration-300"
+            >
+              <router-link 
+                v-for="(child, childIndex) in item.children" 
+                :key="childIndex"
+                :to="child.path"
+                class="flex items-center gap-3 px-3 py-2 rounded-md text-sm transition-all duration-200 relative group"
+                active-class="text-art-accent bg-art-accent/5 font-medium"
+                :class="!isActive(child.path) ? 'text-art-muted hover:text-white hover:bg-white/5' : ''"
+              >
+                <!-- Active Indicator Line -->
+                <div v-if="isActive(child.path)" class="absolute left-0 top-1/2 -translate-y-1/2 w-0.5 h-4 bg-art-accent rounded-full"></div>
+                
+                <span class="truncate">{{ child.title }}</span>
+              </router-link>
+            </div>
+          </div>
+          
+          <!-- Single Menu Item -->
+          <router-link 
+            v-else
+            :to="item.path || ''" 
+            class="flex items-center gap-3 px-3 py-2.5 rounded-md mb-1 transition-all duration-200 relative group"
+            active-class="text-art-accent bg-art-accent/5"
+            :class="!isActive(item.path || '') ? 'text-art-muted hover:text-white hover:bg-white/5' : ''"
+          >
+            <div v-if="isActive(item.path || '')" class="absolute left-0 top-1/2 -translate-y-1/2 w-0.5 h-5 bg-art-accent rounded-full"></div>
+            <span class="text-lg shrink-0 group-hover:text-art-accent transition-colors">{{ item.icon }}</span>
+            <span class="text-sm font-medium truncate transition-opacity duration-300" :class="{ 'opacity-0 w-0': !isSidebarOpen }">{{ item.title }}</span>
+          </router-link>
+        </template>
       </nav>
-      <!-- Sidebar Footer removed as per request -->
+      
+      <!-- User Footer -->
+      <div class="p-4 border-t border-white/5">
+        <div class="flex items-center gap-3">
+           <div class="w-8 h-8 rounded-full bg-art-accent/10 flex items-center justify-center text-art-accent font-bold text-xs shrink-0">
+             {{ currentUser.username?.charAt(0).toUpperCase() || 'A' }}
+           </div>
+           <div class="min-w-0 transition-opacity duration-300" :class="{ 'opacity-0 w-0': !isSidebarOpen }">
+             <p class="text-sm font-medium text-white truncate">{{ currentUser.username }}</p>
+             <p class="text-xs text-art-muted truncate">Administrator</p>
+           </div>
+        </div>
+      </div>
     </aside>
 
     <!-- Main Content Area -->
-    <main class="admin-main">
-      <!-- Top Navigation Bar -->
-      <header class="admin-header">
-        <div class="header-left">
-          <button class="toggle-btn" @click="toggleSidebar">
-            ☰
+    <main class="flex-1 flex flex-col min-w-0 bg-art-admin-bg relative">
+      <!-- Top Header -->
+      <header class="h-16 bg-art-admin-bg border-b border-white/5 flex items-center justify-between px-6 shrink-0 z-10">
+        <!-- Left: Toggle & Breadcrumb (Optional) -->
+        <div class="flex items-center gap-4">
+          <button 
+            @click="toggleSidebar"
+            class="p-2 -ml-2 text-art-muted hover:text-white hover:bg-white/5 rounded-md transition-colors"
+          >
+            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
           </button>
+          <h2 class="text-sm font-medium text-white/80 hidden sm:block">{{ currentRouteTitle }}</h2>
         </div>
-        <div class="header-right">
-          <div class="user-dropdown relative" ref="dropdownRef">
-            <button class="user-info-btn" @click="toggleUserDropdown">
-              <span class="username">{{ currentUser.username }}</span>
-              <span class="role">({{ currentUser.role }})</span>
-              <span class="arrow" :class="{ 'rotated': isUserDropdownOpen }">▼</span>
+
+        <!-- Right: Actions -->
+        <div class="flex items-center gap-3">
+          <button class="p-2 text-art-muted hover:text-white hover:bg-white/5 rounded-full transition-colors relative">
+             <span class="absolute top-2 right-2 w-2 h-2 bg-art-accent rounded-full border-2 border-art-admin-bg"></span>
+             <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
+          </button>
+          
+          <div class="relative" ref="dropdownRef">
+            <button 
+              @click="toggleUserDropdown"
+              class="flex items-center gap-2 text-sm font-medium text-art-muted hover:text-white transition-colors"
+            >
+              <span>设置</span>
+              <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="transition-transform duration-200" :class="{ 'rotate-180': isUserDropdownOpen }"><polyline points="6 9 12 15 18 9"></polyline></svg>
             </button>
             
-            <div v-if="isUserDropdownOpen" class="dropdown-menu">
-              <div class="dropdown-header">
-                <span class="user-email">管理员</span>
-              </div>
-              <ul class="dropdown-list">
-                <li>
-                  <button @click="handleChangePassword" class="dropdown-item">
-                    <span class="icon">🔒</span>
-                    修改密码
-                  </button>
-                </li>
-                <li class="divider"></li>
-                <li>
-                  <button @click="handleLogout" class="dropdown-item text-red-400">
-                    <span class="icon">🚪</span>
-                    退出登录
-                  </button>
-                </li>
-              </ul>
+            <!-- Dropdown -->
+            <div 
+              v-if="isUserDropdownOpen"
+              class="absolute right-0 mt-2 w-48 bg-art-admin-card border border-white/10 rounded-lg shadow-xl py-1 z-50 origin-top-right animate-reveal"
+            >
+              <button @click="handleChangePassword" class="flex items-center gap-2 w-full px-4 py-2.5 text-sm text-art-muted hover:text-white hover:bg-white/5 text-left transition-colors">
+                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>
+                修改密码
+              </button>
+              <div class="h-px bg-white/5 my-1"></div>
+              <button @click="handleLogout" class="flex items-center gap-2 w-full px-4 py-2.5 text-sm text-red-400 hover:bg-red-500/10 text-left transition-colors">
+                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
+                退出登录
+              </button>
             </div>
           </div>
         </div>
       </header>
 
-      <!-- Content Container -->
-      <div class="admin-content">
-        <router-view />
+      <!-- Content Scroll Area -->
+      <div class="flex-1 overflow-auto p-6 scroll-smooth custom-scrollbar">
+        <div class="max-w-full mx-auto animate-reveal">
+          <router-view />
+        </div>
       </div>
     </main>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted } from 'vue'
-import { useRouter } from 'vue-router'
+import { ref, onMounted, onUnmounted, computed } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
 import { useToast } from '../../composables/useToast'
 
 const router = useRouter()
+const route = useRoute()
 const toast = useToast()
 const isSidebarOpen = ref(true)
 const currentUser = ref(JSON.parse(localStorage.getItem('user') || '{}'))
@@ -122,7 +170,6 @@ const closeDropdown = (e: MouseEvent) => {
 }
 
 const handleChangePassword = () => {
-  // Implement change password logic or navigate to page
   toast.showToast('功能开发中...', 'info')
   isUserDropdownOpen.value = false
 }
@@ -197,7 +244,15 @@ const menuItems = ref<MenuItem[]>([
 ])
 
 const toggleMenu = (index: number) => {
-  menuItems.value[index].isOpen = !menuItems.value[index].isOpen
+  if (!isSidebarOpen.value) {
+    isSidebarOpen.value = true
+    // Wait for transition
+    setTimeout(() => {
+       menuItems.value[index].isOpen = !menuItems.value[index].isOpen
+    }, 100)
+  } else {
+    menuItems.value[index].isOpen = !menuItems.value[index].isOpen
+  }
 }
 
 const toggleSidebar = () => {
@@ -211,6 +266,32 @@ const handleLogout = () => {
   router.push('/login')
 }
 
+// Helper to determine active state
+const isActive = (path: string) => {
+  return route.path === path || route.path.startsWith(path + '/')
+}
+
+const isParentActive = (item: MenuItem) => {
+  if (item.path && isActive(item.path)) return true
+  if (item.children) {
+    return item.children.some(child => isActive(child.path))
+  }
+  return false
+}
+
+// Get current route title for header
+const currentRouteTitle = computed(() => {
+  // Simple logic: find matching menu item title
+  for (const item of menuItems.value) {
+    if (item.path === route.path) return item.title
+    if (item.children) {
+      const child = item.children.find(c => c.path === route.path)
+      if (child) return `${item.title} / ${child.title}`
+    }
+  }
+  return '管理控制台'
+})
+
 // Check if user is authenticated
 onMounted(() => {
   const token = localStorage.getItem('token')
@@ -218,6 +299,13 @@ onMounted(() => {
     router.push('/login')
   }
   document.addEventListener('click', closeDropdown)
+  
+  // Auto open menu based on current route
+  menuItems.value.forEach(item => {
+    if (item.children && item.children.some(child => isActive(child.path))) {
+      item.isOpen = true
+    }
+  })
 })
 
 onUnmounted(() => {
@@ -226,365 +314,5 @@ onUnmounted(() => {
 </script>
 
 <style scoped>
-.admin-layout {
-  display: flex;
-  min-height: 100vh;
-  background-color: #050505;
-  color: #ececec;
-}
-
-/* User Dropdown Styles */
-.user-dropdown {
-  position: relative;
-}
-
-.user-info-btn {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  padding: 0.5rem;
-  border-radius: 0.375rem;
-  transition: background-color 0.2s;
-}
-
-.user-info-btn:hover {
-  background-color: rgba(255, 255, 255, 0.05);
-}
-
-.arrow {
-  font-size: 0.7rem;
-  color: rgba(255, 255, 255, 0.5);
-  transition: transform 0.2s;
-}
-
-.arrow.rotated {
-  transform: rotate(180deg);
-}
-
-.dropdown-menu {
-  position: absolute;
-  top: 100%;
-  right: 0;
-  margin-top: 0.5rem;
-  width: 200px;
-  background: #1a1a1a;
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  border-radius: 0.5rem;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
-  z-index: 9999;
-  overflow: hidden;
-  animation: slideIn 0.2s ease-out;
-}
-
-@keyframes slideIn {
-  from { opacity: 0; transform: translateY(-10px); }
-  to { opacity: 1; transform: translateY(0); }
-}
-
-.dropdown-header {
-  padding: 1rem;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
-  background: rgba(255, 255, 255, 0.02);
-}
-
-.user-email {
-  font-size: 0.85rem;
-  color: rgba(255, 255, 255, 0.5);
-  display: block;
-}
-
-.dropdown-list {
-  list-style: none;
-  padding: 0.5rem 0;
-  margin: 0;
-}
-
-.dropdown-item {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  width: 100%;
-  padding: 0.75rem 1rem;
-  background: transparent;
-  border: none;
-  color: rgba(255, 255, 255, 0.8);
-  font-size: 0.9rem;
-  cursor: pointer;
-  text-align: left;
-  transition: background-color 0.2s;
-}
-
-.dropdown-item:hover {
-  background-color: rgba(212, 179, 131, 0.1);
-  color: #d4b383;
-}
-
-.dropdown-item .icon {
-  font-size: 1.1rem;
-}
-
-.divider {
-  height: 1px;
-  background-color: rgba(255, 255, 255, 0.05);
-  margin: 0.5rem 0;
-}
-
-/* Sidebar Styles */
-.admin-sidebar {
-  width: 250px;
-  background: rgba(5, 5, 5, 0.7);
-  backdrop-filter: blur(20px);
-  -webkit-backdrop-filter: blur(20px);
-  border-right: 1px solid rgba(255, 255, 255, 0.03);
-  color: white;
-  display: flex;
-  flex-direction: column;
-  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
-  overflow-y: auto;
-}
-
-.admin-sidebar::-webkit-scrollbar {
-  width: 4px;
-}
-
-.admin-sidebar::-webkit-scrollbar-thumb {
-  background: rgba(255, 255, 255, 0.1);
-  border-radius: 2px;
-}
-
-.sidebar-header {
-  padding: 1.5rem;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
-}
-
-.sidebar-title {
-  font-size: 1.5rem;
-  font-weight: 600;
-  margin: 0;
-  color: #d4b383;
-  font-family: 'Playfair Display', serif;
-  font-style: italic;
-}
-
-.sidebar-nav {
-  flex: 1;
-  padding: 1rem 0;
-}
-
-.sidebar-nav ul {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-
-.nav-link, .nav-item-parent {
-  display: flex;
-  align-items: center;
-  padding: 0.75rem 1.5rem;
-  color: rgba(255, 255, 255, 0.7);
-  text-decoration: none;
-  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
-  border-left: 3px solid transparent;
-  position: relative;
-  cursor: pointer;
-}
-
-.nav-item-parent {
-  justify-content: space-between;
-}
-
-.nav-link-content {
-  display: flex;
-  align-items: center;
-}
-
-.nav-link:hover, .nav-item-parent:hover {
-  background-color: rgba(212, 179, 131, 0.1);
-  color: white;
-  border-left-color: rgba(212, 179, 131, 0.3);
-}
-
-.nav-link.active {
-  background-color: rgba(212, 179, 131, 0.15);
-  color: #d4b383;
-  border-left-color: #d4b383;
-  box-shadow: 0 0 15px rgba(212, 179, 131, 0.1);
-}
-
-.nav-icon {
-  margin-right: 0.75rem;
-  font-size: 1.1rem;
-  min-width: 1.5rem;
-  text-align: center;
-}
-
-.nav-text {
-  font-size: 0.95rem;
-  font-family: 'Inter', sans-serif;
-}
-
-.nav-arrow {
-  font-size: 0.7rem;
-  transition: transform 0.3s ease;
-  opacity: 0.5;
-}
-
-.nav-item-parent.expanded .nav-arrow {
-  transform: rotate(180deg);
-  opacity: 1;
-}
-
-/* Submenu Styles */
-.submenu {
-  background-color: rgba(0, 0, 0, 0.2);
-  overflow: hidden;
-  transition: max-height 0.3s ease-out;
-}
-
-.sub-link {
-  padding-left: 2.5rem;
-  font-size: 0.9rem;
-  border-left: 3px solid transparent;
-}
-
-.sub-link .nav-icon {
-  font-size: 1rem;
-  margin-right: 0.5rem;
-}
-
-.sidebar-footer {
-  padding: 1rem;
-  border-top: 1px solid rgba(255, 255, 255, 0.03);
-}
-
-.logout-btn {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  padding: 0.75rem 1.5rem;
-  background-color: transparent;
-  color: #d4b383;
-  border: none;
-  border-radius: 0.375rem;
-  cursor: pointer;
-  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
-  font-size: 0.95rem;
-  font-family: 'Inter', sans-serif;
-}
-
-.logout-btn:hover {
-  background-color: rgba(212, 179, 131, 0.1);
-  transform: translateY(-2px);
-  box-shadow: 0 5px 15px rgba(212, 179, 131, 0.1);
-}
-
-/* Main Content Styles */
-.admin-main {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-
-/* Header Styles */
-.admin-header {
-  background: rgba(5, 5, 5, 0.7);
-  backdrop-filter: blur(20px);
-  -webkit-backdrop-filter: blur(20px);
-  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
-  padding: 0 1.5rem;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  height: 60px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
-  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
-}
-
-.toggle-btn {
-  background: none;
-  border: none;
-  font-size: 1.5rem;
-  cursor: pointer;
-  color: rgba(255, 255, 255, 0.7);
-  padding: 0.5rem;
-  border-radius: 0.375rem;
-  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
-}
-
-.toggle-btn:hover {
-  background-color: rgba(212, 179, 131, 0.1);
-  color: #d4b383;
-  transform: scale(1.1);
-}
-
-.user-info {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  font-size: 0.95rem;
-  color: rgba(255, 255, 255, 0.8);
-  font-family: 'Inter', sans-serif;
-}
-
-.username {
-  font-weight: 600;
-  color: #d4b383;
-}
-
-.role {
-  color: rgba(255, 255, 255, 0.6);
-  font-size: 0.85rem;
-}
-
-/* Content Area */
-.admin-content {
-  flex: 1;
-  padding: 1.5rem;
-  overflow-y: auto;
-}
-
-/* Scrollbar Styles */
-.admin-content::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
-
-.admin-content::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-.admin-content::-webkit-scrollbar-thumb {
-  background: rgba(255, 255, 255, 0.1);
-  border-radius: 3px;
-  transition: all 0.3s ease;
-}
-
-.admin-content::-webkit-scrollbar-thumb:hover {
-  background: #d4b383;
-  box-shadow: 0 0 10px rgba(212, 179, 131, 0.4);
-}
-
-.admin-content::-webkit-scrollbar-corner {
-  background: transparent;
-}
-
-/* Responsive Design */
-@media (max-width: 768px) {
-  .admin-sidebar {
-    position: fixed;
-    left: 0;
-    top: 0;
-    height: 100vh;
-    z-index: 1000;
-    transform: translateX(0);
-  }
-
-  .admin-sidebar.collapsed {
-    transform: translateX(-100%);
-  }
-}
-</style>
\ No newline at end of file
+/* Scoped styles replaced by Tailwind classes */
+</style>
diff --git a/client/src/pages/Login.vue b/client/src/pages/Login.vue
index eeb7462..76b02a3 100644
--- a/client/src/pages/Login.vue
+++ b/client/src/pages/Login.vue
@@ -1,41 +1,103 @@
 <template>
-  <div class="login-container">
-    <div class="login-card">
-      <div class="text-center mb-8">
-        <h2 class="font-serif text-3xl italic text-white mb-2">后台管理</h2>
-        <p class="text-art-muted text-sm">请输入您的管理员账号</p>
+  <div class="min-h-screen flex w-full">
+    <!-- Left: Brand/Art Section -->
+    <div class="hidden lg:flex lg:w-3/5 bg-art-bg relative overflow-hidden items-center justify-center p-12">
+      <!-- Background Effects -->
+      <div class="absolute inset-0 bg-noise opacity-20"></div>
+      <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-art-bg via-[#0a0a0a] to-[#121214]"></div>
+      
+      <!-- Animated Orbs -->
+      <div class="absolute top-1/4 left-1/4 w-96 h-96 bg-art-accent/5 rounded-full blur-[100px] animate-pulse-slow"></div>
+      <div class="absolute bottom-1/3 right-1/4 w-64 h-64 bg-purple-900/10 rounded-full blur-[80px] animate-pulse-slow" style="animation-delay: 1s;"></div>
+      
+      <!-- Brand Content -->
+      <div class="relative z-10 text-center max-w-2xl">
+        <h1 class="font-serif text-6xl italic text-white mb-6 tracking-wide">
+          Niangao<span class="text-art-accent">.Admin</span>
+        </h1>
+        <div class="h-px w-32 bg-gradient-to-r from-transparent via-art-accent/50 to-transparent mx-auto mb-8"></div>
+        <p class="text-art-muted text-lg font-light leading-relaxed">
+          Art meets Technology. <br/>
+          Crafting the digital garden of <span class="text-white font-medium">年糕崽崽</span>.
+        </p>
       </div>
-      <form @submit.prevent="handleLogin" class="space-y-6">
-        <div class="form-group">
-          <label for="username" class="block text-sm font-medium text-art-muted mb-2">用户名</label>
-          <input
-            type="text"
-            id="username"
-            v-model="form.username"
-            class="w-full bg-white/5 border border-white/10 rounded-lg px-4 py-3 text-white placeholder-white/30 focus:outline-none focus:border-art-accent focus:ring-1 focus:ring-art-accent transition-all"
-            placeholder="Username"
-            required
-          />
+      
+      <!-- Footer Copyright -->
+      <div class="absolute bottom-8 text-white/20 text-xs font-mono tracking-widest uppercase">
+        © {{ new Date().getFullYear() }} Niangao Zaizai. All Rights Reserved.
+      </div>
+    </div>
+
+    <!-- Right: Login Form -->
+    <div class="w-full lg:w-2/5 bg-[#0a0a0a] flex items-center justify-center p-8 relative">
+      <div class="w-full max-w-md space-y-8">
+        <div class="text-center lg:text-left">
+          <h2 class="text-3xl font-medium text-white tracking-tight mb-2">欢迎回来</h2>
+          <p class="text-art-muted text-sm">请登录您的管理账号</p>
         </div>
-        <div class="form-group">
-          <label for="password" class="block text-sm font-medium text-art-muted mb-2">密码</label>
-          <input
-            type="password"
-            id="password"
-            v-model="form.password"
-            class="w-full bg-white/5 border border-white/10 rounded-lg px-4 py-3 text-white placeholder-white/30 focus:outline-none focus:border-art-accent focus:ring-1 focus:ring-art-accent transition-all"
-            placeholder="Password"
-            required
-          />
+
+        <form @submit.prevent="handleLogin" class="space-y-6 mt-8">
+          <div class="space-y-4">
+            <div>
+              <label for="username" class="block text-xs font-medium text-art-muted mb-1.5 uppercase tracking-wider">用户名</label>
+              <input
+                type="text"
+                id="username"
+                v-model="form.username"
+                class="w-full bg-[#0a0a0a] border border-white/10 rounded-md px-4 py-3 text-white placeholder-white/30 focus:border-art-accent focus:ring-1 focus:ring-art-accent outline-none transition-all duration-200 font-sans text-sm login-input"
+                placeholder="请输入用户名"
+                required
+              />
+            </div>
+            
+            <div>
+              <label for="password" class="block text-xs font-medium text-art-muted mb-1.5 uppercase tracking-wider">密码</label>
+              <input
+                type="password"
+                id="password"
+                v-model="form.password"
+                class="w-full bg-[#0a0a0a] border border-white/10 rounded-md px-4 py-3 text-white placeholder-white/30 focus:border-art-accent focus:ring-1 focus:ring-art-accent outline-none transition-all duration-200 font-sans text-sm login-input"
+                placeholder="请输入密码"
+                required
+              />
+            </div>
+          </div>
+
+          <div class="flex items-center justify-between text-sm">
+            <label class="flex items-center text-art-muted hover:text-white cursor-pointer transition-colors">
+              <input type="checkbox" class="mr-2 w-4 h-4 rounded border-white/10 bg-white/5 checked:bg-art-accent checked:border-art-accent focus:ring-offset-0 focus:ring-0 text-art-accent">
+              <span>记住我</span>
+            </label>
+            <a href="#" class="text-art-accent hover:text-white transition-colors">忘记密码？</a>
+          </div>
+
+          <button 
+            type="submit" 
+            class="w-full bg-art-accent text-black font-medium py-3.5 rounded-lg hover:opacity-90 active:scale-[0.98] transition-all duration-200 tracking-wide text-sm uppercase shadow-[0_0_20px_rgba(212,179,131,0.15)] hover:shadow-[0_0_30px_rgba(212,179,131,0.25)]"
+            :disabled="isLoading"
+          >
+            <span v-if="isLoading" class="flex items-center justify-center gap-2">
+              <svg class="animate-spin h-4 w-4 text-black" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+              </svg>
+              登录中...
+            </span>
+            <span v-else>登 录</span>
+          </button>
+          
+          <div v-if="error" class="text-art-error text-sm text-center bg-art-error/10 py-3 rounded-lg border border-art-error/20 flex items-center justify-center gap-2">
+            <span class="text-lg">!</span> {{ error }}
+          </div>
+        </form>
+        
+        <div class="pt-6 border-t border-white/5 text-center">
+          <p class="text-art-muted text-xs">
+            不是管理员？ 
+            <a href="/" class="text-white hover:text-art-accent underline decoration-art-accent/30 hover:decoration-art-accent underline-offset-4 transition-all">返回首页</a>
+          </p>
         </div>
-        <button 
-          type="submit" 
-          class="w-full bg-white text-black font-bold py-3 rounded-lg hover:bg-art-accent hover:text-white transition-all transform hover:scale-[1.02] active:scale-[0.98]"
-        >
-          登 录
-        </button>
-        <div v-if="error" class="text-red-500 text-sm text-center mt-4 bg-red-500/10 py-2 rounded border border-red-500/20">{{ error }}</div>
-      </form>
+      </div>
     </div>
   </div>
 </template>
@@ -55,42 +117,37 @@ const form = ref({
 })
 
 const error = ref('')
+const isLoading = ref(false)
 
 const handleLogin = async () => {
+  isLoading.value = true
+  error.value = ''
+  
   try {
     const response = await login(form.value)
     // 保存token到本地存储
     localStorage.setItem('token', response.token)
     localStorage.setItem('user', JSON.stringify(response.user))
-    toast.showToast('登录成功', 'success')
+    toast.showToast('欢迎回来，管理员', 'success')
     // 登录成功后重定向到管理后台
     router.push('/admin')
   } catch (err: any) {
     error.value = err.response?.data?.error || '登录失败，请检查用户名和密码'
     toast.showToast('登录失败', 'error')
+  } finally {
+    isLoading.value = false
   }
 }
 </script>
 
 <style scoped>
-.login-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  min-height: 100vh;
-  background-color: #050505;
-  background-image: radial-gradient(circle at 50% 50%, rgba(212, 179, 131, 0.05) 0%, transparent 50%);
-}
-
-.login-card {
-  background: rgba(255, 255, 255, 0.03);
-  backdrop-filter: blur(20px);
-  -webkit-backdrop-filter: blur(20px);
-  padding: 3rem;
-  border-radius: 1.5rem;
-  border: 1px solid rgba(255, 255, 255, 0.05);
-  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
-  width: 100%;
-  max-width: 420px;
+/* Fix autofill background color */
+.login-input:-webkit-autofill,
+.login-input:-webkit-autofill:hover, 
+.login-input:-webkit-autofill:focus, 
+.login-input:-webkit-autofill:active {
+  -webkit-box-shadow: 0 0 0 30px #0a0a0a inset !important;
+  -webkit-text-fill-color: white !important;
+  transition: background-color 5000s ease-in-out 0s;
 }
 </style>
diff --git a/client/src/pages/admin/PostForm.vue b/client/src/pages/admin/PostForm.vue
index 4318ba3..c82b015 100644
--- a/client/src/pages/admin/PostForm.vue
+++ b/client/src/pages/admin/PostForm.vue
@@ -1,108 +1,132 @@
 <template>
-  <div class="post-form-container">
-    <h1 class="page-title">{{ isEditing ? '编辑文章' : '新建文章' }}</h1>
-
-    <div class="form-container">
-      <form @submit.prevent="handleSubmit" class="post-form">
-        <!-- Title Field -->
-        <div class="form-group">
-          <label for="title">文章标题</label>
-          <input
-              type="text"
-              id="title"
-              v-model="form.title"
-              placeholder="请输入文章标题"
-              required
-          />
-          <div class="error-message" v-if="errors.title">
-            {{ errors.title }}
-          </div>
-        </div>
-
-        <!-- Category Field -->
-        <div class="form-group">
-          <label for="category">分类</label>
-          <input
-              type="text"
-              id="category"
-              v-model="form.category"
-              placeholder="请输入文章分类"
-              required
-          />
-          <div class="error-message" v-if="errors.category">
-            {{ errors.category }}
-          </div>
-        </div>
-
-        <!-- Date Field -->
-        <div class="form-group">
-          <label for="date">发布日期</label>
-          <input
-              type="date"
-              id="date"
-              v-model="form.date"
-              required
-          />
-          <div class="error-message" v-if="errors.date">
-            {{ errors.date }}
-          </div>
-        </div>
-
-        <!-- Excerpt Field -->
-        <div class="form-group">
-          <label for="excerpt">文章摘要</label>
-          <textarea
-              id="excerpt"
-              v-model="form.excerpt"
-              placeholder="请输入文章摘要"
-              rows="3"
-          ></textarea>
-          <div class="error-message" v-if="errors.excerpt">
-            {{ errors.excerpt }}
-          </div>
-        </div>
-
-        <!-- Content Field - 使用 Markdown 编辑器 -->
-        <div class="form-group">
-          <label>文章内容</label>
-          <div class="editor-wrapper">
-            <MdEditor
-                v-model="form.content"
-                theme="dark"
-                :preview="false"
-                placeholder="请输入 Markdown 内容..."
-                class="custom-md-editor"
-            />
-          </div>
-          <div class="error-message" v-if="errors.content">
-            {{ errors.content }}
-          </div>
-        </div>
-
-        <!-- Is Published Field -->
-        <div class="form-group">
-          <label for="isPublished">发布状态</label>
-          <CustomSelect
-              v-model="form.isPublished"
-              :options="publishStatusOptions"
-              placeholder="请选择发布状态"
-          />
-          <div class="error-message" v-if="errors.isPublished">
-            {{ errors.isPublished }}
-          </div>
-        </div>
-
-        <!-- Submit Buttons -->
-        <div class="form-actions">
-          <button type="button" class="cancel-btn" @click="handleCancel">
-            取消
-          </button>
-          <button type="submit" class="submit-btn" :disabled="isSubmitting">
-            {{ isSubmitting ? '提交中...' : (isEditing ? '更新文章' : '创建文章') }}
-          </button>
-        </div>
-      </form>
+  <div class="w-full animate-reveal">
+    <div class="flex items-center justify-between mb-6">
+      <h1 class="text-2xl font-serif italic text-white">{{ isEditing ? '编辑文章' : '新建文章' }}</h1>
+      <div class="flex gap-3">
+        <button type="button" class="admin-btn-secondary" @click="handleCancel">
+          取消
+        </button>
+        <button type="button" class="admin-btn-primary" @click="handleSubmit" :disabled="isSubmitting">
+          {{ isSubmitting ? '提交中...' : (isEditing ? '更新文章' : '发布文章') }}
+        </button>
+      </div>
     </div>
+
+    <form @submit.prevent="handleSubmit" class="grid grid-cols-1 lg:grid-cols-3 gap-8">
+      <!-- Left Column: Main Content -->
+      <div class="lg:col-span-2 space-y-6">
+        <div class="admin-card p-6 space-y-6">
+          <!-- Title Field -->
+          <div class="space-y-2">
+            <label for="title" class="block text-sm font-medium text-art-muted uppercase tracking-wider">文章标题</label>
+            <input
+                type="text"
+                id="title"
+                v-model="form.title"
+                class="admin-input text-lg font-medium placeholder-white/20"
+                placeholder="请输入文章标题"
+                required
+            />
+            <div class="text-art-error text-xs mt-1" v-if="errors.title">
+              {{ errors.title }}
+            </div>
+          </div>
+          
+          <!-- Content Field -->
+          <div class="space-y-2">
+            <label class="block text-sm font-medium text-art-muted uppercase tracking-wider">文章内容</label>
+            <div class="border border-white/10 rounded-lg overflow-hidden focus-within:border-art-accent focus-within:ring-1 focus-within:ring-art-accent transition-all duration-200">
+              <MdEditor
+                  v-model="form.content"
+                  theme="dark"
+                  :preview="false"
+                  placeholder="请输入 Markdown 内容..."
+                  class="custom-md-editor"
+              />
+            </div>
+            <div class="text-art-error text-xs mt-1" v-if="errors.content">
+              {{ errors.content }}
+            </div>
+          </div>
+          
+          <!-- Excerpt Field -->
+          <div class="space-y-2">
+            <label for="excerpt" class="block text-sm font-medium text-art-muted uppercase tracking-wider">文章摘要</label>
+            <textarea
+                id="excerpt"
+                v-model="form.excerpt"
+                rows="4"
+                class="admin-input resize-none"
+                placeholder="请输入文章摘要 (可选)"
+            ></textarea>
+            <div class="text-art-error text-xs mt-1" v-if="errors.excerpt">
+              {{ errors.excerpt }}
+            </div>
+          </div>
+        </div>
+      </div>
+      
+      <!-- Right Column: Meta & Settings -->
+      <div class="space-y-6">
+        <div class="admin-card p-6 space-y-6 sticky top-6">
+          <h3 class="text-sm font-medium text-white border-b border-white/5 pb-4 mb-4 flex items-center gap-2">
+            <span class="text-art-accent">⚙️</span> 发布设置
+          </h3>
+           
+          <!-- Category Field -->
+          <div class="space-y-2">
+            <label for="category" class="block text-xs font-medium text-art-muted uppercase tracking-wider">分类</label>
+            <input
+                type="text"
+                id="category"
+                v-model="form.category"
+                class="admin-input"
+                placeholder="文章分类"
+                required
+            />
+            <div class="text-art-error text-xs mt-1" v-if="errors.category">
+              {{ errors.category }}
+            </div>
+          </div>
+          
+          <!-- Date Field -->
+          <div class="space-y-2">
+            <label for="date" class="block text-xs font-medium text-art-muted uppercase tracking-wider">发布日期</label>
+            <input
+                type="date"
+                id="date"
+                v-model="form.date"
+                class="admin-input"
+                required
+            />
+            <div class="text-art-error text-xs mt-1" v-if="errors.date">
+              {{ errors.date }}
+            </div>
+          </div>
+          
+          <!-- Is Published Field -->
+          <div class="space-y-2">
+            <label for="isPublished" class="block text-xs font-medium text-art-muted uppercase tracking-wider">状态</label>
+            <CustomSelect
+                v-model="form.isPublished"
+                :options="publishStatusOptions"
+                placeholder="请选择发布状态"
+            />
+            <div class="text-art-error text-xs mt-1" v-if="errors.isPublished">
+              {{ errors.isPublished }}
+            </div>
+          </div>
+          
+          <!-- Action Buttons (Mobile only, hidden on large screens) -->
+          <div class="lg:hidden pt-4 border-t border-white/5 flex flex-col gap-3">
+             <button type="button" class="admin-btn-primary w-full" @click="handleSubmit" :disabled="isSubmitting">
+               {{ isSubmitting ? '提交中...' : (isEditing ? '更新文章' : '发布文章') }}
+             </button>
+             <button type="button" class="admin-btn-secondary w-full" @click="handleCancel">取消</button>
+          </div>
+        </div>
+      </div>
+    </form>
   </div>
 </template>
 
@@ -188,18 +212,18 @@ const handleSubmit = async () => {
     if (isEditing.value) {
       // Update existing post
       await updatePost(route.params.id as string, form)
-      toast.success('文章更新成功')
+      toast.showToast('文章更新成功', 'success')
     } else {
       // Create new post
       await createPost(form)
-      toast.success('文章创建成功')
+      toast.showToast('文章创建成功', 'success')
     }
 
     // Redirect to posts list
     router.push('/admin/posts')
   } catch (error: any) {
     console.error('Error submitting form:', error)
-    toast.error(error.message || (isEditing.value ? '更新文章失败' : '创建文章失败'))
+    toast.showToast(error.message || (isEditing.value ? '更新文章失败' : '创建文章失败'), 'error')
   } finally {
     isSubmitting.value = false
   }
@@ -227,159 +251,24 @@ onMounted(async () => {
       form.isPublished = post.isPublished === 1 ? 1 : 0
     } catch (error: any) {
       console.error('Failed to fetch post data:', error)
-      toast.error('加载文章数据失败: ' + (error.message || '未知错误'))
+      toast.showToast('加载文章数据失败: ' + (error.message || '未知错误'), 'error')
     }
   }
 })
 </script>
 
 <style scoped>
-.post-form-container {
-  width: 100%;
-}
-
-.page-title {
-  font-size: 1.75rem;
-  font-weight: 600;
-  color: #d4b383;
-  margin-bottom: 1.5rem;
-  font-family: 'Inter', sans-serif;
-}
-
-.form-container {
-  background: rgba(255, 255, 255, 0.05);
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
-  border-radius: 0.5rem;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  padding: 2rem;
-}
-
-.post-form {
-  max-width: 800px;
-}
-
-.form-group {
-  margin-bottom: 1.5rem;
-}
-
-.form-group label {
-  display: block;
-  font-size: 0.95rem;
-  font-weight: 500;
-  color: rgba(255, 255, 255, 0.8);
-  margin-bottom: 0.5rem;
-  font-family: 'Inter', sans-serif;
-}
-
-.form-group input,
-.form-group textarea,
-.form-group select {
-  width: 100%;
-  padding: 0.75rem;
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  border-radius: 0.5rem;
-  font-size: 0.95rem;
-  background: rgba(255, 255, 255, 0.05);
-  color: white;
-  font-family: 'Inter', sans-serif;
-  resize: vertical;
-}
-
-.form-group input::placeholder,
-.form-group textarea::placeholder,
-.form-group select::placeholder {
-  color: rgba(255, 255, 255, 0.5);
-}
-
-.form-group input:focus,
-.form-group textarea:focus,
-.form-group select:focus {
-  outline: none;
-  border-color: #d4b383;
-  box-shadow: 0 0 0 3px rgba(212, 179, 131, 0.2);
-}
-
-.error-message {
-  color: #ef4444;
-  font-size: 0.875rem;
-  margin-top: 0.25rem;
-  font-family: 'Inter', sans-serif;
-}
-
-.form-actions {
-  display: flex;
-  gap: 1rem;
-  margin-top: 2rem;
-}
-
-.cancel-btn {
-  padding: 0.75rem 1.5rem;
-  background: rgba(255, 255, 255, 0.1);
-  color: rgba(255, 255, 255, 0.8);
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  border-radius: 0.5rem;
-  cursor: pointer;
-  font-weight: 500;
-  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
-  font-family: 'Inter', sans-serif;
-}
-
-.cancel-btn:hover {
-  background: rgba(212, 179, 131, 0.1);
-  border-color: #d4b383;
-  color: #d4b383;
-}
-
-.submit-btn {
-  padding: 0.75rem 1.5rem;
-  background-color: #d4b383;
-  color: #050505;
-  border: 1px solid #d4b383;
-  border-radius: 0.5rem;
-  cursor: pointer;
-  font-weight: 500;
-  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
-  font-family: 'Inter', sans-serif;
-}
-
-.submit-btn:hover:not(:disabled) {
-  background-color: transparent;
-  color: #d4b383;
-  transform: translateY(-1px);
-  box-shadow: 0 0 15px rgba(212, 179, 131, 0.3);
-}
-
-.submit-btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-/* MdEditor Customization */
-.editor-wrapper {
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  border-radius: 0.5rem;
-  overflow: hidden;
-  transition: border-color 0.3s ease, box-shadow 0.3s ease;
-}
-
-.editor-wrapper:focus-within {
-  border-color: #d4b383;
-  box-shadow: 0 0 0 3px rgba(212, 179, 131, 0.2);
-}
-
 :deep(.custom-md-editor) {
-  background-color: rgba(255, 255, 255, 0.05) !important;
+  background-color: transparent !important;
   --md-bk-color: transparent !important;
   --md-color: white !important;
   --md-border-color: transparent !important;
-  height: 500px;
+  height: 600px;
 }
 
 :deep(.md-editor-toolbar-wrapper) {
-  background-color: rgba(0, 0, 0, 0.2) !important;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
+  background-color: rgba(255, 255, 255, 0.02) !important;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
 }
 
 :deep(.md-editor-content) {
@@ -387,23 +276,7 @@ onMounted(async () => {
 }
 
 :deep(.md-editor-footer) {
-  background-color: rgba(0, 0, 0, 0.2) !important;
-  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
+  background-color: rgba(255, 255, 255, 0.02) !important;
+  border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
 }
-
-/* Responsive Design */
-@media (max-width: 768px) {
-  .form-container {
-    padding: 1.5rem;
-  }
-
-  .form-actions {
-    flex-direction: column;
-  }
-
-  .cancel-btn,
-  .submit-btn {
-    width: 100%;
-  }
-}
-</style>
\ No newline at end of file
+</style>
diff --git a/client/src/pages/admin/Posts.vue b/client/src/pages/admin/Posts.vue
index 76f825e..d4b19d2 100644
--- a/client/src/pages/admin/Posts.vue
+++ b/client/src/pages/admin/Posts.vue
@@ -1,51 +1,60 @@
 <template>
-  <div class="admin-posts">
-    <h1 class="page-title">文章管理</h1>
-    
-    <div class="toolbar">
-      <router-link to="/admin/posts/create" class="btn btn-primary">
-        + 新增文章
+  <div class="w-full animate-reveal">
+    <div class="flex items-center justify-between mb-6">
+      <h1 class="text-2xl font-serif italic text-white">文章管理</h1>
+      <router-link to="/admin/posts/create" class="admin-btn-primary flex items-center gap-2">
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
+        新增文章
       </router-link>
     </div>
     
-    <div class="table-container">
-      <table class="admin-table">
-        <thead>
-          <tr>
-            <th>ID</th>
-            <th>标题</th>
-            <th>分类</th>
-            <th>发布日期</th>
-            <th>状态</th>
-            <th>操作</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-for="post in posts" :key="post.id">
-            <td>{{ post.id }}</td>
-            <td>{{ post.title }}</td>
-            <td>{{ post.category }}</td>
-            <td>{{ post.date }}</td>
-            <td>
-              <span :class="['status-badge', post.isPublished === 1 ? 'published' : 'draft']">
-                {{ post.isPublished === 1 ? '已发布' : '草稿' }}
-              </span>
-            </td>
-            <td class="actions">
-              <router-link :to="`/admin/posts/${post.id}/edit`" class="btn btn-sm btn-secondary">
-                编辑
-              </router-link>
-              <button @click="deletePost(post.id)" class="btn btn-sm btn-danger">
-                删除
-              </button>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-    
-    <div v-if="posts.length === 0" class="empty-state">
-      <p>暂无文章，请点击上方按钮新增</p>
+    <div class="admin-card overflow-hidden">
+      <div class="overflow-x-auto">
+        <table class="admin-table">
+          <thead>
+            <tr>
+              <th class="w-20">ID</th>
+              <th>标题</th>
+              <th>分类</th>
+              <th>发布日期</th>
+              <th>状态</th>
+              <th class="text-right">操作</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="post in posts" :key="post.id" class="group transition-colors duration-200">
+              <td class="font-mono text-xs text-white/40">#{{ post.id }}</td>
+              <td class="font-medium text-white group-hover:text-art-accent transition-colors">{{ post.title }}</td>
+              <td><span class="px-2 py-1 rounded bg-white/5 border border-white/5 text-xs text-art-muted">{{ post.category }}</span></td>
+              <td class="text-art-muted text-xs">{{ post.date }}</td>
+              <td>
+                <span :class="['px-2 py-1 rounded-full text-xs font-medium border', post.isPublished === 1 ? 'bg-green-500/10 text-green-400 border-green-500/20' : 'bg-yellow-500/10 text-yellow-400 border-yellow-500/20']">
+                  {{ post.isPublished === 1 ? '已发布' : '草稿' }}
+                </span>
+              </td>
+              <td class="text-right">
+                <div class="flex items-center justify-end gap-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
+                  <router-link :to="`/admin/posts/${post.id}/edit`" class="admin-btn-secondary py-1 px-3 text-xs">
+                    编辑
+                  </router-link>
+                  <button @click="deletePost(post.id)" class="admin-btn-danger py-1 px-3 text-xs">
+                    删除
+                  </button>
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      
+      <div v-if="posts.length === 0" class="p-16 text-center">
+        <div class="w-16 h-16 bg-white/5 rounded-full flex items-center justify-center mx-auto mb-4 text-2xl">📝</div>
+        <h3 class="text-white font-medium mb-2">暂无文章</h3>
+        <p class="text-art-muted text-sm mb-6">开始您的创作之旅吧</p>
+        <router-link to="/admin/posts/create" class="admin-btn-secondary inline-flex items-center gap-2">
+          + 新增文章
+        </router-link>
+      </div>
     </div>
   </div>
 </template>
@@ -65,7 +74,7 @@ const fetchPosts = async () => {
     posts.value = await getAdminPosts()
   } catch (error) {
     console.error('Error fetching posts:', error)
-    toast.error('获取文章列表失败')
+    toast.showToast('获取文章列表失败', 'error')
   }
 }
 
@@ -73,11 +82,11 @@ const deletePost = async (id: number) => {
   if (confirm('确定要删除这篇文章吗？')) {
     try {
       await deletePostApi(id)
-      toast.success('文章删除成功')
+      toast.showToast('文章删除成功', 'success')
       fetchPosts()
     } catch (error) {
       console.error('Error deleting post:', error)
-      toast.error('删除文章失败')
+      toast.showToast('删除文章失败', 'error')
     }
   }
 }
@@ -88,147 +97,5 @@ onMounted(() => {
 </script>
 
 <style scoped>
-.admin-posts {
-  max-width: 1200px;
-  margin: 0 auto;
-}
-
-.page-title {
-  font-size: 1.5rem;
-  font-weight: 600;
-  margin-bottom: 1.5rem;
-  color: #d4b383;
-  font-family: 'Inter', sans-serif;
-}
-
-.toolbar {
-  margin-bottom: 1rem;
-  display: flex;
-  justify-content: flex-end;
-}
-
-.table-container {
-  background: rgba(255, 255, 255, 0.05);
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
-  border-radius: 0.5rem;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  overflow: hidden;
-  border: 1px solid rgba(255, 255, 255, 0.1);
-}
-
-.admin-table {
-  width: 100%;
-  border-collapse: collapse;
-  color: white;
-}
-
-.admin-table th,
-.admin-table td {
-  padding: 0.75rem 1rem;
-  text-align: left;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-}
-
-.admin-table th {
-  background: rgba(255, 255, 255, 0.08);
-  font-weight: 600;
-  color: #d4b383;
-  font-family: 'Inter', sans-serif;
-}
-
-.admin-table tr:hover {
-  background: rgba(212, 179, 131, 0.05);
-}
-
-.status-badge {
-  display: inline-block;
-  padding: 0.25rem 0.5rem;
-  border-radius: 9999px;
-  font-size: 0.75rem;
-  font-weight: 500;
-}
-
-.status-badge.published {
-  background-color: rgba(16, 185, 129, 0.2);
-  color: #10b981;
-  border: 1px solid rgba(16, 185, 129, 0.3);
-}
-
-.status-badge.draft {
-  background-color: rgba(251, 191, 36, 0.2);
-  color: #f59e0b;
-  border: 1px solid rgba(251, 191, 36, 0.3);
-}
-
-.actions {
-  display: flex;
-  gap: 0.5rem;
-}
-
-.btn {
-  padding: 0.5rem 1rem;
-  border-radius: 0.375rem;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
-  text-decoration: none;
-  display: inline-flex;
-  align-items: center;
-  gap: 0.25rem;
-  font-family: 'Inter', sans-serif;
-  border: 1px solid transparent;
-}
-
-.btn-sm {
-  padding: 0.25rem 0.5rem;
-  font-size: 0.875rem;
-}
-
-.btn-primary {
-  background-color: #d4b383;
-  color: #050505;
-  border-color: #d4b383;
-}
-
-.btn-primary:hover {
-  background-color: transparent;
-  color: #d4b383;
-  box-shadow: 0 0 15px rgba(212, 179, 131, 0.3);
-}
-
-.btn-secondary {
-  background-color: rgba(255, 255, 255, 0.1);
-  color: rgba(255, 255, 255, 0.8);
-  border-color: rgba(255, 255, 255, 0.2);
-}
-
-.btn-secondary:hover {
-  background-color: rgba(212, 179, 131, 0.1);
-  border-color: #d4b383;
-  color: #d4b383;
-}
-
-.btn-danger {
-  background-color: rgba(239, 68, 68, 0.2);
-  color: #ef4444;
-  border-color: rgba(239, 68, 68, 0.3);
-}
-
-.btn-danger:hover {
-  background-color: rgba(239, 68, 68, 0.3);
-  border-color: #ef4444;
-  box-shadow: 0 0 15px rgba(239, 68, 68, 0.3);
-}
-
-.empty-state {
-  text-align: center;
-  padding: 2rem;
-  color: rgba(255, 255, 255, 0.6);
-  background: rgba(255, 255, 255, 0.05);
-  border-radius: 0.5rem;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  font-family: 'Inter', sans-serif;
-}
-</style>
\ No newline at end of file
+/* Scoped styles removed, using Tailwind classes */
+</style>
diff --git a/client/src/pages/admin/Settings.vue b/client/src/pages/admin/Settings.vue
index 7c1d8e6..ac42182 100644
--- a/client/src/pages/admin/Settings.vue
+++ b/client/src/pages/admin/Settings.vue
@@ -1,81 +1,101 @@
 <template>
-  <div class="admin-settings">
-    <h1 class="page-title">系统配置管理</h1>
-    
-    <div class="table-container">
-      <table class="admin-table">
-        <thead>
-          <tr>
-            <th>键名</th>
-            <th>值</th>
-            <th>描述</th>
-            <th>操作</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-for="setting in settings" :key="setting.id">
-            <td>{{ setting.keyName }}</td>
-            <td class="setting-value">{{ setting.value }}</td>
-            <td>{{ setting.description }}</td>
-            <td class="actions">
-              <button @click="editSetting(setting)" class="btn btn-sm btn-secondary">
-                编辑
-              </button>
-              <button @click="deleteSetting(setting.keyName)" class="btn btn-sm btn-danger">
-                删除
-              </button>
-            </td>
-          </tr>
-        </tbody>
-      </table>
+  <div class="w-full animate-reveal">
+    <div class="flex items-center justify-between mb-6">
+      <h1 class="text-2xl font-serif italic text-white">系统配置管理</h1>
+      <!-- Optional: Add Create Button if needed -->
+      <!-- <button @click="openCreateModal" class="admin-btn-primary">+ 新增配置</button> -->
     </div>
     
-    <div v-if="settings.length === 0" class="empty-state">
-      <p>暂无系统配置</p>
+    <div class="admin-card overflow-hidden">
+      <div class="overflow-x-auto">
+        <table class="admin-table">
+          <thead>
+            <tr>
+              <th class="w-1/4">键名</th>
+              <th class="w-1/3">值</th>
+              <th>描述</th>
+              <th class="text-right w-32">操作</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="setting in settings" :key="setting.id" class="group transition-colors duration-200">
+              <td class="font-mono text-xs text-art-accent">{{ setting.keyName }}</td>
+              <td class="max-w-xs truncate text-white/80" :title="setting.value">{{ setting.value }}</td>
+              <td class="text-art-muted text-sm">{{ setting.description }}</td>
+              <td class="text-right">
+                <div class="flex items-center justify-end gap-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
+                  <button @click="editSetting(setting)" class="admin-btn-secondary py-1 px-3 text-xs">
+                    编辑
+                  </button>
+                  <button @click="deleteSetting(setting.keyName)" class="admin-btn-danger py-1 px-3 text-xs">
+                    删除
+                  </button>
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      
+      <div v-if="settings.length === 0" class="p-16 text-center">
+        <div class="w-16 h-16 bg-white/5 rounded-full flex items-center justify-center mx-auto mb-4 text-2xl">⚙️</div>
+        <h3 class="text-white font-medium mb-2">暂无配置</h3>
+      </div>
     </div>
     
     <!-- Add/Edit Modal -->
-    <div v-if="showModal" class="modal-overlay">
-      <div class="modal-content">
-        <div class="modal-header">
-          <h2>{{ editingSetting ? '编辑配置' : '新增配置' }}</h2>
-          <button @click="closeModal" class="close-btn">&times;</button>
+    <div v-if="showModal" class="fixed inset-0 z-50 flex items-center justify-center p-4">
+      <div class="absolute inset-0 bg-black/80 backdrop-blur-sm transition-opacity" @click="closeModal"></div>
+      
+      <div class="admin-card w-full max-w-lg relative z-10 flex flex-col max-h-[90vh] shadow-2xl animate-reveal">
+        <div class="flex items-center justify-between p-6 border-b border-white/5">
+          <h2 class="text-lg font-medium text-white">{{ editingSetting ? '编辑配置' : '新增配置' }}</h2>
+          <button @click="closeModal" class="text-white/40 hover:text-white transition-colors">
+            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
+          </button>
         </div>
-        <div class="modal-body">
-          <form @submit.prevent="saveSetting">
-            <div class="form-group">
-              <label for="keyName">键名</label>
+        
+        <div class="p-6 overflow-y-auto">
+          <form @submit.prevent="saveSetting" class="space-y-4">
+            <div class="space-y-2">
+              <label for="keyName" class="block text-xs font-medium text-art-muted uppercase tracking-wider">键名</label>
               <input 
                 type="text" 
                 id="keyName" 
                 v-model="form.keyName" 
                 :disabled="editingSetting" 
                 required
-                class="form-control"
+                class="admin-input font-mono disabled:opacity-50 disabled:cursor-not-allowed"
+                placeholder="例如: site_title"
               >
             </div>
-            <div class="form-group">
-              <label for="value">值</label>
+            
+            <div class="space-y-2">
+              <label for="value" class="block text-xs font-medium text-art-muted uppercase tracking-wider">值</label>
               <input 
                 type="text" 
                 id="value" 
                 v-model="form.value" 
                 required
-                class="form-control"
+                class="admin-input"
+                placeholder="配置项的值"
               >
             </div>
-            <div class="form-group">
-              <label for="description">描述</label>
+            
+            <div class="space-y-2">
+              <label for="description" class="block text-xs font-medium text-art-muted uppercase tracking-wider">描述</label>
               <textarea 
                 id="description" 
                 v-model="form.description" 
                 rows="3"
-                class="form-control"
+                class="admin-input resize-none"
+                placeholder="该配置项的用途说明"
               ></textarea>
             </div>
-            <div class="form-actions">
-              <button type="button" @click="closeModal" class="btn btn-secondary">取消</button>
-              <button type="submit" class="btn btn-primary">保存</button>
+            
+            <div class="pt-4 flex justify-end gap-3">
+              <button type="button" @click="closeModal" class="admin-btn-secondary">取消</button>
+              <button type="submit" class="admin-btn-primary">保存</button>
             </div>
           </form>
         </div>
@@ -106,7 +126,7 @@ const fetchSettings = async () => {
     settings.value = await getSettings()
   } catch (error) {
     console.error('Error fetching settings:', error)
-    toast.error('获取系统配置失败')
+    toast.showToast('获取系统配置失败', 'error')
   }
 }
 
@@ -125,20 +145,20 @@ const saveSetting = async () => {
   try {
     if (editingSetting.value) {
       await updateSetting(form.value)
-      toast.success('配置更新成功')
+      toast.showToast('配置更新成功', 'success')
     } else {
       await createSetting({
         keyName: form.value.keyName,
         value: form.value.value,
         description: form.value.description
       })
-      toast.success('配置创建成功')
+      toast.showToast('配置创建成功', 'success')
     }
     closeModal()
     fetchSettings()
   } catch (error) {
     console.error('Error saving setting:', error)
-    toast.error(editingSetting.value ? '更新配置失败' : '创建配置失败')
+    toast.showToast(editingSetting.value ? '更新配置失败' : '创建配置失败', 'error')
   }
 }
 
@@ -146,11 +166,11 @@ const deleteSetting = async (keyName: string) => {
   if (confirm(`确定要删除配置项 "${keyName}" 吗？`)) {
     try {
       await deleteSettingApi(keyName)
-      toast.success('配置删除成功')
+      toast.showToast('配置删除成功', 'success')
       fetchSettings()
     } catch (error) {
       console.error('Error deleting setting:', error)
-      toast.error('删除配置失败')
+      toast.showToast('删除配置失败', 'error')
     }
   }
 }
@@ -172,241 +192,5 @@ onMounted(() => {
 </script>
 
 <style scoped>
-.admin-settings {
-  max-width: 1200px;
-  margin: 0 auto;
-}
-
-.page-title {
-  font-size: 1.5rem;
-  font-weight: 600;
-  margin-bottom: 1.5rem;
-  color: #d4b383;
-  font-family: 'Inter', sans-serif;
-}
-
-.table-container {
-  background: rgba(255, 255, 255, 0.05);
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
-  border-radius: 0.5rem;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  overflow: hidden;
-  margin-bottom: 1rem;
-  border: 1px solid rgba(255, 255, 255, 0.1);
-}
-
-.admin-table {
-  width: 100%;
-  border-collapse: collapse;
-  color: white;
-}
-
-.admin-table th,
-.admin-table td {
-  padding: 0.75rem 1rem;
-  text-align: left;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-  font-family: 'Inter', sans-serif;
-}
-
-.admin-table th {
-  background: rgba(255, 255, 255, 0.08);
-  font-weight: 600;
-  color: #d4b383;
-  white-space: nowrap;
-}
-
-.admin-table tr:hover {
-  background: rgba(212, 179, 131, 0.05);
-}
-
-.setting-value {
-  max-width: 300px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.actions {
-  display: flex;
-  gap: 0.5rem;
-}
-
-.btn {
-  padding: 0.5rem 1rem;
-  border-radius: 0.375rem;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
-  text-decoration: none;
-  display: inline-flex;
-  align-items: center;
-  gap: 0.25rem;
-  border: 1px solid transparent;
-  font-family: 'Inter', sans-serif;
-}
-
-.btn-sm {
-  padding: 0.25rem 0.5rem;
-  font-size: 0.875rem;
-}
-
-.btn-primary {
-  background-color: #d4b383;
-  color: #050505;
-  border-color: #d4b383;
-}
-
-.btn-primary:hover {
-  background-color: transparent;
-  color: #d4b383;
-  box-shadow: 0 0 15px rgba(212, 179, 131, 0.3);
-}
-
-.btn-secondary {
-  background-color: rgba(255, 255, 255, 0.1);
-  color: rgba(255, 255, 255, 0.8);
-  border-color: rgba(255, 255, 255, 0.2);
-}
-
-.btn-secondary:hover {
-  background-color: rgba(212, 179, 131, 0.1);
-  border-color: #d4b383;
-  color: #d4b383;
-}
-
-.btn-danger {
-  background-color: rgba(239, 68, 68, 0.2);
-  color: #ef4444;
-  border-color: rgba(239, 68, 68, 0.3);
-}
-
-.btn-danger:hover {
-  background-color: rgba(239, 68, 68, 0.3);
-  border-color: #ef4444;
-  box-shadow: 0 0 15px rgba(239, 68, 68, 0.3);
-}
-
-.empty-state {
-  text-align: center;
-  padding: 2rem;
-  color: rgba(255, 255, 255, 0.6);
-  background: rgba(255, 255, 255, 0.05);
-  border-radius: 0.5rem;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  font-family: 'Inter', sans-serif;
-}
-
-/* Modal Styles */
-.modal-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.8);
-  backdrop-filter: blur(4px);
-  -webkit-backdrop-filter: blur(4px);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 1000;
-}
-
-.modal-content {
-  background: rgba(255, 255, 255, 0.08);
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
-  border-radius: 0.5rem;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  width: 100%;
-  max-width: 500px;
-  max-height: 80vh;
-  overflow-y: auto;
-  border: 1px solid rgba(255, 255, 255, 0.1);
-}
-
-.modal-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 1rem;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-}
-
-.modal-header h2 {
-  margin: 0;
-  font-size: 1.25rem;
-  font-weight: 600;
-  color: #d4b383;
-  font-family: 'Inter', sans-serif;
-}
-
-.close-btn {
-  background: none;
-  border: none;
-  font-size: 1.5rem;
-  cursor: pointer;
-  color: rgba(255, 255, 255, 0.6);
-  padding: 0;
-  line-height: 1;
-  transition: all 0.3s ease;
-}
-
-.close-btn:hover {
-  color: #d4b383;
-  transform: rotate(90deg);
-}
-
-.modal-body {
-  padding: 1rem;
-}
-
-.form-group {
-  margin-bottom: 1rem;
-}
-
-.form-group label {
-  display: block;
-  margin-bottom: 0.5rem;
-  font-weight: 500;
-  color: rgba(255, 255, 255, 0.8);
-  font-family: 'Inter', sans-serif;
-}
-
-.form-control {
-  width: 100%;
-  padding: 0.5rem;
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  border-radius: 0.375rem;
-  font-size: 1rem;
-  background: rgba(255, 255, 255, 0.05);
-  color: white;
-  font-family: 'Inter', sans-serif;
-}
-
-.form-control::placeholder {
-  color: rgba(255, 255, 255, 0.5);
-}
-
-.form-control:focus {
-  outline: none;
-  border-color: #d4b383;
-  box-shadow: 0 0 0 3px rgba(212, 179, 131, 0.2);
-}
-
-.form-control:disabled {
-  background-color: rgba(255, 255, 255, 0.08);
-  cursor: not-allowed;
-  border-color: rgba(255, 255, 255, 0.1);
-}
-
-.form-actions {
-  display: flex;
-  justify-content: flex-end;
-  gap: 0.5rem;
-  margin-top: 1.5rem;
-}
-</style>
\ No newline at end of file
+/* Scoped styles removed */
+</style>
diff --git a/client/src/pages/admin/Works.vue b/client/src/pages/admin/Works.vue
index ca9dd7e..58f078d 100644
--- a/client/src/pages/admin/Works.vue
+++ b/client/src/pages/admin/Works.vue
@@ -1,45 +1,54 @@
 <template>
-  <div class="admin-works">
-    <h1 class="page-title">作品管理</h1>
-    
-    <div class="toolbar">
-      <router-link to="/admin/works/create" class="btn btn-primary">
-        + 新增作品
+  <div class="w-full animate-reveal">
+    <div class="flex items-center justify-between mb-6">
+      <h1 class="text-2xl font-serif italic text-white">作品管理</h1>
+      <router-link to="/admin/works/create" class="admin-btn-primary flex items-center gap-2">
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
+        新增作品
       </router-link>
     </div>
     
-    <div class="table-container">
-      <table class="admin-table">
-        <thead>
-          <tr>
-            <th>ID</th>
-            <th>标题</th>
-            <th>分类</th>
-            <th>年份</th>
-            <th>操作</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-for="work in works" :key="work.id">
-            <td>{{ work.id }}</td>
-            <td>{{ work.title }}</td>
-            <td>{{ work.category }}</td>
-            <td>{{ work.year }}</td>
-            <td class="actions">
-              <router-link :to="`/admin/works/${work.id}/edit`" class="btn btn-sm btn-secondary">
-                编辑
-              </router-link>
-              <button @click="deleteWork(work.id)" class="btn btn-sm btn-danger">
-                删除
-              </button>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-    
-    <div v-if="works.length === 0" class="empty-state">
-      <p>暂无作品，请点击上方按钮新增</p>
+    <div class="admin-card overflow-hidden">
+      <div class="overflow-x-auto">
+        <table class="admin-table">
+          <thead>
+            <tr>
+              <th class="w-20">ID</th>
+              <th>标题</th>
+              <th>分类</th>
+              <th>年份</th>
+              <th class="text-right">操作</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="work in works" :key="work.id" class="group transition-colors duration-200">
+              <td class="font-mono text-xs text-white/40">#{{ work.id }}</td>
+              <td class="font-medium text-white group-hover:text-art-accent transition-colors">{{ work.title }}</td>
+              <td><span class="px-2 py-1 rounded bg-white/5 border border-white/5 text-xs text-art-muted">{{ work.category }}</span></td>
+              <td class="text-art-muted text-xs">{{ work.year }}</td>
+              <td class="text-right">
+                <div class="flex items-center justify-end gap-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
+                  <router-link :to="`/admin/works/${work.id}/edit`" class="admin-btn-secondary py-1 px-3 text-xs">
+                    编辑
+                  </router-link>
+                  <button @click="deleteWork(work.id)" class="admin-btn-danger py-1 px-3 text-xs">
+                    删除
+                  </button>
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      
+      <div v-if="works.length === 0" class="p-16 text-center">
+        <div class="w-16 h-16 bg-white/5 rounded-full flex items-center justify-center mx-auto mb-4 text-2xl">🎨</div>
+        <h3 class="text-white font-medium mb-2">暂无作品</h3>
+        <p class="text-art-muted text-sm mb-6">展示您的精彩项目</p>
+        <router-link to="/admin/works/create" class="admin-btn-secondary inline-flex items-center gap-2">
+          + 新增作品
+        </router-link>
+      </div>
     </div>
   </div>
 </template>
@@ -57,7 +66,7 @@ const fetchWorks = async () => {
     works.value = await getAdminWorks()
   } catch (error) {
     console.error('Error fetching works:', error)
-    toast.error('获取作品列表失败')
+    toast.showToast('获取作品列表失败', 'error')
   }
 }
 
@@ -65,11 +74,11 @@ const deleteWork = async (id: string) => {
   if (confirm('确定要删除这个作品吗？')) {
     try {
       await deleteWorkApi(id)
-      toast.success('作品删除成功')
+      toast.showToast('作品删除成功', 'success')
       fetchWorks()
     } catch (error) {
       console.error('Error deleting work:', error)
-      toast.error('删除作品失败')
+      toast.showToast('删除作品失败', 'error')
     }
   }
 }
@@ -80,126 +89,5 @@ onMounted(() => {
 </script>
 
 <style scoped>
-.admin-works {
-  max-width: 1200px;
-  margin: 0 auto;
-}
-
-.page-title {
-  font-size: 1.5rem;
-  font-weight: 600;
-  margin-bottom: 1.5rem;
-  color: #d4b383;
-  font-family: 'Inter', sans-serif;
-}
-
-.toolbar {
-  margin-bottom: 1rem;
-  display: flex;
-  justify-content: flex-end;
-}
-
-.table-container {
-  background: rgba(255, 255, 255, 0.05);
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
-  border-radius: 0.5rem;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  overflow: hidden;
-  border: 1px solid rgba(255, 255, 255, 0.1);
-}
-
-.admin-table {
-  width: 100%;
-  border-collapse: collapse;
-  color: white;
-}
-
-.admin-table th,
-.admin-table td {
-  padding: 0.75rem 1rem;
-  text-align: left;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-  font-family: 'Inter', sans-serif;
-}
-
-.admin-table th {
-  background: rgba(255, 255, 255, 0.08);
-  font-weight: 600;
-  color: #d4b383;
-}
-
-.admin-table tr:hover {
-  background: rgba(212, 179, 131, 0.05);
-}
-
-.actions {
-  display: flex;
-  gap: 0.5rem;
-}
-
-.btn {
-  padding: 0.5rem 1rem;
-  border-radius: 0.375rem;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
-  text-decoration: none;
-  display: inline-flex;
-  align-items: center;
-  gap: 0.25rem;
-  font-family: 'Inter', sans-serif;
-  border: 1px solid transparent;
-}
-
-.btn-sm {
-  padding: 0.25rem 0.5rem;
-  font-size: 0.875rem;
-}
-
-.btn-primary {
-  background: rgba(212, 179, 131, 0.1);
-  color: #d4b383;
-  border-color: #d4b383;
-}
-
-.btn-primary:hover {
-  background-color: transparent;
-  box-shadow: 0 0 15px rgba(212, 179, 131, 0.3);
-}
-
-.btn-secondary {
-  background-color: rgba(255, 255, 255, 0.1);
-  color: rgba(255, 255, 255, 0.8);
-  border-color: rgba(255, 255, 255, 0.2);
-}
-
-.btn-secondary:hover {
-  background-color: rgba(212, 179, 131, 0.1);
-  border-color: #d4b383;
-  color: #d4b383;
-}
-
-.btn-danger {
-  background-color: rgba(239, 68, 68, 0.2);
-  color: #ef4444;
-  border-color: rgba(239, 68, 68, 0.3);
-}
-
-.btn-danger:hover {
-  background-color: rgba(239, 68, 68, 0.3);
-  border-color: #ef4444;
-  box-shadow: 0 0 15px rgba(239, 68, 68, 0.3);
-}
-
-.empty-state {
-  text-align: center;
-  padding: 2rem;
-  color: rgba(255, 255, 255, 0.6);
-  background: rgba(255, 255, 255, 0.05);
-  border-radius: 0.5rem;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  font-family: 'Inter', sans-serif;
-}
-</style>
\ No newline at end of file
+/* Scoped styles removed */
+</style>
diff --git a/client/src/pages/admin/dashboard/Overview.vue b/client/src/pages/admin/dashboard/Overview.vue
index 3349d95..1ae9c1f 100644
--- a/client/src/pages/admin/dashboard/Overview.vue
+++ b/client/src/pages/admin/dashboard/Overview.vue
@@ -1,44 +1,47 @@
 <template>
-  <div class="dashboard-overview">
+  <div class="w-full space-y-6">
     <!-- Top Stats Cards -->
-    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
-      <div class="stat-card">
-        <div class="stat-icon bg-blue-500/10 text-blue-400">📝</div>
-        <div class="stat-info">
-          <h3>总文章数</h3>
-          <p>{{ stats.posts || 0 }}</p>
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+      <div class="admin-card p-6 flex items-center gap-4 group">
+        <div class="w-12 h-12 rounded-lg bg-blue-500/10 text-blue-400 flex items-center justify-center text-xl group-hover:scale-110 transition-transform duration-300">📝</div>
+        <div>
+          <h3 class="text-sm font-medium text-art-muted">总文章数</h3>
+          <p class="text-2xl font-semibold text-white mt-1">{{ stats.posts || 0 }}</p>
         </div>
       </div>
-      <div class="stat-card">
-        <div class="stat-icon bg-green-500/10 text-green-400">👥</div>
-        <div class="stat-info">
-          <h3>今日访客 (UV)</h3>
-          <p>{{ todayUV }}</p>
+      <div class="admin-card p-6 flex items-center gap-4 group">
+        <div class="w-12 h-12 rounded-lg bg-green-500/10 text-green-400 flex items-center justify-center text-xl group-hover:scale-110 transition-transform duration-300">👥</div>
+        <div>
+          <h3 class="text-sm font-medium text-art-muted">今日访客 (UV)</h3>
+          <p class="text-2xl font-semibold text-white mt-1">{{ todayUV }}</p>
         </div>
       </div>
-      <div class="stat-card">
-        <div class="stat-icon bg-purple-500/10 text-purple-400">📩</div>
-        <div class="stat-info">
-          <h3>合作咨询</h3>
-          <p>{{ stats.inquiryCount || 0 }}</p>
+      <div class="admin-card p-6 flex items-center gap-4 group">
+        <div class="w-12 h-12 rounded-lg bg-purple-500/10 text-purple-400 flex items-center justify-center text-xl group-hover:scale-110 transition-transform duration-300">📩</div>
+        <div>
+          <h3 class="text-sm font-medium text-art-muted">合作咨询</h3>
+          <p class="text-2xl font-semibold text-white mt-1">{{ stats.inquiryCount || 0 }}</p>
         </div>
       </div>
-      <div class="stat-card">
-        <div class="stat-icon bg-yellow-500/10 text-yellow-400">🎨</div>
-        <div class="stat-info">
-          <h3>作品展示</h3>
-          <p>{{ stats.works || '-' }}</p>
+      <div class="admin-card p-6 flex items-center gap-4 group">
+        <div class="w-12 h-12 rounded-lg bg-yellow-500/10 text-yellow-400 flex items-center justify-center text-xl group-hover:scale-110 transition-transform duration-300">🎨</div>
+        <div>
+          <h3 class="text-sm font-medium text-art-muted">作品展示</h3>
+          <p class="text-2xl font-semibold text-white mt-1">{{ stats.works || '-' }}</p>
         </div>
       </div>
     </div>
 
     <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
       <!-- Recent Activities -->
-      <div class="bg-white/5 border border-white/10 rounded-xl p-6 backdrop-blur-sm">
-        <h3 class="text-lg font-medium text-[#d4b383] mb-4">最近日志</h3>
-        <div class="space-y-4">
-          <div v-for="log in operationLogs" :key="log.id" class="flex items-start gap-4 p-3 bg-white/5 rounded-lg border border-white/5">
-            <div class="w-8 h-8 rounded-full bg-[#d4b383]/10 flex items-center justify-center text-[#d4b383] text-sm shrink-0">
+      <div class="admin-card p-6">
+        <div class="flex items-center justify-between mb-6">
+          <h3 class="text-sm font-medium text-art-muted uppercase tracking-wider">最近日志</h3>
+          <router-link to="/admin/logs" class="text-xs text-art-accent hover:underline">查看全部</router-link>
+        </div>
+        <div class="space-y-3">
+          <div v-for="log in operationLogs" :key="log.id" class="flex items-start gap-4 p-3 rounded-lg hover:bg-white/5 transition-colors border border-transparent hover:border-white/5">
+            <div class="w-8 h-8 rounded-full bg-art-accent/10 flex items-center justify-center text-art-accent text-xs font-bold shrink-0">
               {{ log.method }}
             </div>
             <div class="flex-1 min-w-0">
@@ -46,33 +49,39 @@
                 <span class="text-sm font-medium text-white truncate">{{ log.username }}</span>
                 <span class="text-xs text-white/40 whitespace-nowrap">{{ formatDate(log.createdAt) }}</span>
               </div>
-              <p class="text-xs text-white/60 truncate font-mono">{{ log.path }}</p>
+              <p class="text-xs text-art-muted truncate font-mono bg-white/5 px-1.5 py-0.5 rounded inline-block">{{ log.path }}</p>
             </div>
           </div>
-          <div v-if="operationLogs.length === 0" class="text-center text-white/40 py-4">暂无日志</div>
+          <div v-if="operationLogs.length === 0" class="text-center text-art-muted text-sm py-8">暂无日志</div>
         </div>
       </div>
 
       <!-- Blog Updates -->
-      <div class="bg-white/5 border border-white/10 rounded-xl p-6 backdrop-blur-sm">
-        <h3 class="text-lg font-medium text-[#d4b383] mb-4">博文动态</h3>
-        <div class="space-y-4">
-          <div v-for="post in recentPosts" :key="post.id" class="flex items-start gap-4 p-3 bg-white/5 rounded-lg border border-white/5">
+      <div class="admin-card p-6">
+        <div class="flex items-center justify-between mb-6">
+          <h3 class="text-sm font-medium text-art-muted uppercase tracking-wider">博文动态</h3>
+          <router-link to="/admin/posts" class="text-xs text-art-accent hover:underline">管理文章</router-link>
+        </div>
+        <div class="space-y-3">
+          <div v-for="post in recentPosts" :key="post.id" class="flex items-start gap-4 p-3 rounded-lg hover:bg-white/5 transition-colors border border-transparent hover:border-white/5">
             <div class="w-8 h-8 rounded-full bg-blue-500/10 flex items-center justify-center text-blue-400 text-sm shrink-0">
               📝
             </div>
             <div class="flex-1 min-w-0">
               <div class="flex justify-between items-start mb-1">
-                <span class="text-sm font-medium text-white truncate">{{ post.title }}</span>
+                <span class="text-sm font-medium text-white truncate hover:text-art-accent transition-colors cursor-pointer">{{ post.title }}</span>
                 <span class="text-xs text-white/40 whitespace-nowrap">{{ formatDate(post.date) }}</span>
               </div>
-              <div class="flex items-center gap-2 mt-1">
-                <span class="px-2 py-0.5 rounded text-[10px] bg-white/10 text-white/60">{{ post.category }}</span>
-                <span class="text-[10px] text-white/40">👁️ {{ post.readCount || 0 }}</span>
+              <div class="flex items-center gap-2 mt-2">
+                <span class="px-2 py-0.5 rounded text-[10px] bg-white/5 text-white/60 border border-white/5">{{ post.category }}</span>
+                <span class="text-[10px] text-white/40 flex items-center gap-1">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>
+                  {{ post.readCount || 0 }}
+                </span>
               </div>
             </div>
           </div>
-          <div v-if="recentPosts.length === 0" class="text-center text-white/40 py-4">暂无动态</div>
+          <div v-if="recentPosts.length === 0" class="text-center text-art-muted text-sm py-8">暂无动态</div>
         </div>
       </div>
     </div>
@@ -88,9 +97,7 @@ const operationLogs = ref<any[]>([])
 const recentPosts = ref<any[]>([])
 
 const todayUV = computed(() => {
-  // Use dashboard stats for UV if available, otherwise 0
   if (!stats.value.uvTrend || stats.value.uvTrend.length === 0) return 0
-  // Note: uvTrend uses {date, value} now
   return stats.value.uvTrend[stats.value.uvTrend.length - 1].value
 })
 
@@ -102,11 +109,10 @@ const formatDate = (dateStr: string) => {
 
 const loadData = async () => {
   try {
-    // Parallel requests
     const [statsData, logsData, postsData] = await Promise.all([
-      getDashboardStats(), // Default 7 days
-      getOperationLogs(1, 5), // Get last 5 logs
-      fetchPosts() // Get posts, we'll slice top 5
+      getDashboardStats(),
+      getOperationLogs(1, 5),
+      fetchPosts()
     ])
     
     stats.value = statsData
@@ -124,41 +130,5 @@ onMounted(() => {
 </script>
 
 <style scoped>
-.dashboard-overview {
-  width: 100%;
-}
-
-.stat-card {
-  background: rgba(255, 255, 255, 0.05);
-  backdrop-filter: blur(10px);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  border-radius: 0.75rem;
-  padding: 1.5rem;
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-}
-
-.stat-icon {
-  width: 3rem;
-  height: 3rem;
-  border-radius: 0.5rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 1.5rem;
-}
-
-.stat-info h3 {
-  font-size: 0.875rem;
-  color: rgba(255, 255, 255, 0.6);
-  margin: 0 0 0.25rem 0;
-}
-
-.stat-info p {
-  font-size: 1.5rem;
-  font-weight: 600;
-  color: #fff;
-  margin: 0;
-}
+/* Styles handled by Tailwind utility classes */
 </style>
diff --git a/client/src/style.css b/client/src/style.css
index aa8a79a..e1fca44 100644
--- a/client/src/style.css
+++ b/client/src/style.css
@@ -13,7 +13,7 @@
 .custom-scrollbar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.05); }
 .custom-scrollbar:hover::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); }
 
-/* Glass & Utils */
+/* Glass & Utils - Keep for Frontend */
 .glass-nav { background: rgba(5, 5, 5, 0.7); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid rgba(255, 255, 255, 0.03); }
 .art-card { background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.03); transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1); position: relative; overflow: hidden; }
 .art-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.02) 100%); opacity: 0; transition: opacity 0.5s ease; }
@@ -35,10 +35,61 @@
 
 /* Form Error */
 .input-error { border-bottom-color: #ef4444 !important; }
-.error-msg { color: #ef4444; font-family: 'JetBrains Mono', monospace; font-size: 0.65rem; margin-top: 0.4rem; display: block; position: absolute; bottom: -1.2rem; left: 0; opacity: 0; letter-spacing: 0.05em; animation: fadeIn 0.3s forwards; background: rgba(239, 68, 68, 0.1); padding: 0.1rem 0.3rem; border-radius: 0.2rem; }
+.error-msg { color: #ef4444; font-family: 'Inter', sans-serif; font-size: 0.75rem; margin-top: 0.4rem; display: block; animation: fadeIn 0.3s forwards; }
 @keyframes fadeIn { to { opacity: 1; } }
 
-/* Code Block */
+/* Admin UI System - New */
+@layer components {
+  .admin-page-container {
+    @apply w-full h-full p-0;
+  }
+  
+  .admin-card {
+    @apply bg-art-admin-card border border-white/5 rounded-lg shadow-sm transition-all duration-300;
+  }
+  
+  .admin-card:hover {
+    @apply border-white/10;
+  }
+  
+  .admin-input {
+    @apply w-full bg-art-admin-bg border border-white/10 rounded-md px-4 py-3 text-white placeholder-white/30 transition-all duration-200 font-sans text-sm;
+  }
+  
+  .admin-input:focus {
+    @apply border-art-accent ring-1 ring-art-accent outline-none bg-art-surface;
+  }
+  
+  .admin-btn-primary {
+    @apply bg-art-accent text-black font-medium px-5 py-2.5 rounded-md hover:opacity-90 active:scale-95 transition-all text-sm tracking-wide;
+  }
+  
+  .admin-btn-secondary {
+    @apply bg-transparent text-white border border-white/10 px-5 py-2.5 rounded-md hover:bg-white/5 active:scale-95 transition-all text-sm;
+  }
+  
+  .admin-btn-danger {
+    @apply bg-art-error/10 text-art-error border border-art-error/20 px-5 py-2.5 rounded-md hover:bg-art-error/20 active:scale-95 transition-all text-sm;
+  }
+  
+  .admin-table {
+    @apply w-full border-collapse text-left;
+  }
+  
+  .admin-table th {
+    @apply font-medium text-art-muted text-xs uppercase tracking-wider p-4 border-b border-white/5;
+  }
+  
+  .admin-table td {
+    @apply p-4 border-b border-white/5 text-sm text-gray-300;
+  }
+  
+  .admin-table tr:hover td {
+    @apply bg-white/[0.02];
+  }
+}
+
+/* Code Block - Keep for Frontend, Admin Editor uses its own */
 .mac-code-block { background: #1e1e1e; padding: 3rem 1.5rem 1.5rem 1.5rem; border-radius: 0.75rem; overflow-x: auto; margin-bottom: 0; border: 1px solid rgba(255,255,255,0.1); position: relative; box-shadow: 0 10px 30px -10px rgba(0,0,0,0.5); }
 .mac-code-block::before { content: ''; position: absolute; top: 1rem; left: 1.5rem; width: 0.75rem; height: 0.75rem; border-radius: 50%; background: #ff5f56; box-shadow: 1.25rem 0 0 #ffbd2e, 2.5rem 0 0 #27c93f; }
 .code-keyword { color: #c678dd; } .code-func { color: #61afef; } .code-string { color: #98c379; } .code-comment { color: #5c6370; font-style: italic; }
diff --git a/client/tailwind.config.js b/client/tailwind.config.js
index 0a5d64c..2c476e3 100644
--- a/client/tailwind.config.js
+++ b/client/tailwind.config.js
@@ -20,7 +20,10 @@ export default {
           text: '#ececec',
           muted: '#888888',
           accent: '#d4b383',
-          error: '#ef4444'
+          error: '#ef4444',
+          'admin-bg': '#0a0a0a',
+          'admin-card': '#121214',
+          'admin-hover': '#1a1a1c',
         }
       },
       backgroundImage: {