diff --git a/frontend/src/components/login/SidePanel.tsx b/frontend/src/components/login/SidePanel.tsx
index 69fca83..427594a 100644
--- a/frontend/src/components/login/SidePanel.tsx
+++ b/frontend/src/components/login/SidePanel.tsx
@@ -1,180 +1,69 @@
 import { useLogin } from '@/hooks/useLogin';
-
-const features = ['SQL审核', '变更审批', '实时监控', '权限管理'];
+import { useTheme } from '@/hooks/useTheme';
+import { Sun, Moon, Database } from 'lucide-react';
 
 export default function SidePanel() {
   const { username, password, loading, error, setUsername, setPassword, handleLogin } = useLogin();
+  const { toggleTheme, isDark } = useTheme();
 
   return (
-    <div className="flex min-h-screen" style={{ background: 'var(--dg-bg-primary)', color: 'var(--dg-text-primary)' }}>
-      {/* Left Panel — 38% Brand Area */}
-      <div
-        className="relative flex flex-col justify-between"
-        style={{
-          width: '38%',
-          background: 'linear-gradient(180deg, #111827 0%, #1f2937 100%)',
-          padding: '56px 44px',
-          overflow: 'hidden',
-        }}
+    <div style={{ display: 'flex', minHeight: '100vh', background: 'var(--dg-bg-primary)', color: 'var(--dg-text-primary)' }}>
+      <button
+        onClick={toggleTheme}
+        style={{ position: 'fixed', top: 20, right: 20, zIndex: 50, background: 'var(--dg-bg-tertiary)', border: 'none', borderRadius: 8, padding: 8, cursor: 'pointer', color: 'var(--dg-text-secondary)' }}
       >
-        {/* Subtle decorative gradient orb */}
-        <div
-          style={{
-            position: 'absolute',
-            top: '-80px',
-            right: '-80px',
-            width: 280,
-            height: 280,
-            borderRadius: '50%',
-            background: 'radial-gradient(circle, rgba(99,102,241,0.08), transparent 70%)',
-            filter: 'blur(30px)',
-          }}
-        />
+        {isDark ? <Sun size={18} /> : <Moon size={18} />}
+      </button>
 
-        {/* Top brand section */}
-        <div style={{ position: 'relative', zIndex: 2 }}>
-          {/* Logo mark */}
-          <div
-            style={{
-              width: 40,
-              height: 40,
-              borderRadius: 10,
-              background: 'linear-gradient(135deg, #6366f1, #8b5cf6)',
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-              marginBottom: 56,
-            }}
-          >
-            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-              <ellipse cx="12" cy="5" rx="9" ry="3" />
-              <path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3" />
-              <path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5" />
-            </svg>
-          </div>
+      {/* Left Panel — 40% */}
+      <div
+        className="dg-gradient-br"
+        style={{ width: '40%', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', padding: 48, position: 'relative', overflow: 'hidden' }}
+      >
+        {/* Decorative circles */}
+        <div style={{ position: 'absolute', top: '15%', left: '10%', width: 80, height: 80, borderRadius: '50%', background: 'rgba(255,255,255,0.06)' }} />
+        <div style={{ position: 'absolute', bottom: '20%', right: '15%', width: 120, height: 120, borderRadius: '50%', background: 'rgba(255,255,255,0.04)' }} />
+        <div style={{ position: 'absolute', top: '55%', left: '60%', width: 40, height: 40, borderRadius: '50%', background: 'rgba(255,255,255,0.07)' }} />
+        <div style={{ position: 'absolute', top: '30%', right: '30%', width: 12, height: 12, borderRadius: '50%', background: 'rgba(255,255,255,0.12)' }} />
+        <div style={{ position: 'absolute', bottom: '40%', left: '25%', width: 8, height: 8, borderRadius: '50%', background: 'rgba(255,255,255,0.10)' }} />
 
-          {/* Stacked large text — left aligned */}
-          <div style={{ marginBottom: 24 }}>
-            <div style={{ fontSize: 52, fontWeight: 700, color: '#fff', lineHeight: 1.1, letterSpacing: '-1px' }}>
-              SQL审核
-            </div>
-            <div style={{ fontSize: 52, fontWeight: 700, color: '#fff', lineHeight: 1.1, letterSpacing: '-1px', marginTop: 4 }}>
-              平台
-            </div>
-          </div>
-          <p style={{ color: 'rgba(255,255,255,0.4)', fontSize: 15, lineHeight: 1.6, maxWidth: 280 }}>
-            企业级数据库审核与合规管理解决方案，为团队提供安全可靠的数据管理体验。
+        <div style={{ position: 'relative', zIndex: 2, textAlign: 'center', maxWidth: 320 }}>
+          <Database size={40} style={{ color: '#fff', marginBottom: 20 }} />
+          <h1 style={{ fontSize: 26, fontWeight: 700, color: '#fff', marginBottom: 12 }}>SQL审核平台</h1>
+          <p style={{ color: 'rgba(255,255,255,0.7)', fontSize: 14, lineHeight: 1.6 }}>
+            为团队提供智能 SQL 审核、实时合规监控与数据库安全保障。
           </p>
         </div>
-
-        {/* Bottom feature pills */}
-        <div style={{ position: 'relative', zIndex: 2, display: 'flex', flexWrap: 'wrap', gap: 8 }}>
-          {features.map((tag) => (
-            <span
-              key={tag}
-              style={{
-                padding: '6px 14px',
-                borderRadius: 20,
-                background: 'rgba(255,255,255,0.06)',
-                color: 'rgba(255,255,255,0.6)',
-                fontSize: 12,
-                fontWeight: 500,
-                letterSpacing: '0.3px',
-              }}
-            >
-              {tag}
-            </span>
-          ))}
-        </div>
       </div>
 
-      {/* Right Panel — 62% Login Form */}
-      <div
-        className="flex items-center justify-center"
-        style={{ flex: 1, padding: 64 }}
-      >
-        <form
-          onSubmit={handleLogin}
-          style={{ width: '100%', maxWidth: 380, display: 'flex', flexDirection: 'column' }}
-        >
-          <h2 style={{ fontSize: 30, fontWeight: 600, marginBottom: 8, color: 'var(--dg-text-primary)' }}>
-            欢迎回来
-          </h2>
-          <p style={{ color: 'var(--dg-text-muted)', fontSize: 15, marginBottom: 44 }}>
-            登录以继续
-          </p>
+      {/* Right Panel — Login Form */}
+      <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 48 }}>
+        <form onSubmit={handleLogin} style={{ width: '100%', maxWidth: 360, display: 'flex', flexDirection: 'column', gap: 20 }}>
+          <h2 style={{ fontSize: 22, fontWeight: 600, marginBottom: 4 }}>欢迎回来</h2>
+          <p style={{ color: 'var(--dg-text-muted)', fontSize: 14, marginBottom: 8 }}>登录以访问控制台</p>
 
-          {error && (
-            <div style={{ color: '#f87171', fontSize: 13, marginBottom: 16, padding: '10px 14px', background: 'rgba(248,113,113,0.08)', borderRadius: 8 }}>
-              {error}
-            </div>
-          )}
+          {error && <div style={{ color: '#f87171', fontSize: 13 }}>{error}</div>}
 
-          <div style={{ marginBottom: 24 }}>
-            <label style={{ display: 'block', fontSize: 13, fontWeight: 500, color: 'var(--dg-text-secondary)', marginBottom: 8 }}>
-              用户名
-            </label>
-            <input
-              type="text"
-              placeholder="请输入用户名"
-              value={username}
-              onChange={(e) => setUsername(e.target.value)}
-              className="w-full"
-              style={{
-                padding: '13px 16px',
-                borderRadius: 10,
-                background: 'var(--dg-bg-secondary)',
-                border: 'none',
-                color: 'var(--dg-text-primary)',
-                fontSize: 14,
-                outline: 'none',
-                transition: 'background 0.2s',
-              }}
-              onFocus={(e) => { e.target.style.background = 'var(--dg-bg-tertiary)'; }}
-              onBlur={(e) => { e.target.style.background = 'var(--dg-bg-secondary)'; }}
-            />
-          </div>
-
-          <div style={{ marginBottom: 36 }}>
-            <label style={{ display: 'block', fontSize: 13, fontWeight: 500, color: 'var(--dg-text-secondary)', marginBottom: 8 }}>
-              密码
-            </label>
-            <input
-              type="password"
-              placeholder="请输入密码"
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
-              className="w-full"
-              style={{
-                padding: '13px 16px',
-                borderRadius: 10,
-                background: 'var(--dg-bg-secondary)',
-                border: 'none',
-                color: 'var(--dg-text-primary)',
-                fontSize: 14,
-                outline: 'none',
-                transition: 'background 0.2s',
-              }}
-              onFocus={(e) => { e.target.style.background = 'var(--dg-bg-tertiary)'; }}
-              onBlur={(e) => { e.target.style.background = 'var(--dg-bg-secondary)'; }}
-            />
-          </div>
+          <input
+            type="text"
+            placeholder="用户名"
+            value={username}
+            onChange={(e) => setUsername(e.target.value)}
+            style={{ padding: '10px 14px', borderRadius: 8, background: 'var(--dg-bg-tertiary)', border: '1px solid var(--dg-border)', color: 'var(--dg-text-primary)', fontSize: 14, outline: 'none' }}
+          />
+          <input
+            type="password"
+            placeholder="密码"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            style={{ padding: '10px 14px', borderRadius: 8, background: 'var(--dg-bg-tertiary)', border: '1px solid var(--dg-border)', color: 'var(--dg-text-primary)', fontSize: 14, outline: 'none' }}
+          />
 
           <button
             type="submit"
             disabled={loading || !username || !password}
-            className="dg-gradient-bg w-full"
-            style={{
-              padding: '13px 20px',
-              borderRadius: 10,
-              border: 'none',
-              color: '#fff',
-              fontWeight: 600,
-              fontSize: 15,
-              cursor: loading || !username || !password ? 'not-allowed' : 'pointer',
-              opacity: loading || !username || !password ? 0.5 : 1,
-              transition: 'opacity 0.2s, transform 0.1s',
-            }}
+            className="dg-gradient-bg"
+            style={{ padding: '10px 14px', borderRadius: 8, border: 'none', color: '#fff', fontWeight: 600, fontSize: 14, cursor: loading || !username || !password ? 'not-allowed' : 'pointer', opacity: loading || !username || !password ? 0.6 : 1 }}
           >
             {loading ? '登录中…' : '登录'}
           </button>
diff --git a/frontend/src/pages/AppearanceSettings.tsx b/frontend/src/pages/AppearanceSettings.tsx
index c760703..20a87f8 100644
--- a/frontend/src/pages/AppearanceSettings.tsx
+++ b/frontend/src/pages/AppearanceSettings.tsx
@@ -9,7 +9,7 @@ import { toast } from '@/hooks/useToast';
 const LOGIN_PREVIEW_COLORS: Record<LoginStyle, { bg: string; accent: string; label: string }> = {
   split: { bg: 'linear-gradient(135deg, #080c14 0%, #0c1420 100%)', accent: '#00d4aa', label: '晶格科技' },
   centered: { bg: 'linear-gradient(180deg, #0a0a1a 0%, #1a1035 50%, #2d1810 100%)', accent: '#fbbf24', label: '晨曦微光' },
-  sidepanel: { bg: 'linear-gradient(180deg, #111827 0%, #1f2937 100%)', accent: '#6366f1', label: '简洁专业' },
+  sidepanel: { bg: 'linear-gradient(180deg, #111827 0%, #1f2937 100%)', accent: '#6366f1', label: '经典侧边' },
   fullimage: { bg: '#0d1117', accent: '#6366f1', label: 'GitHub/AWS' },
   minimal: { bg: 'linear-gradient(160deg, #0a0a1a 0%, #0f0a2a 40%, #150825 70%, #0a0a1a 100%)', accent: '#ec4899', label: 'Premium Dark' },
   aurora: { bg: 'linear-gradient(180deg, #050810 0%, #0a0e1a 30%, #0d1425 60%, #080c14 100%)', accent: '#10b981', label: '极光之境' },
@@ -178,24 +178,19 @@ export default function AppearanceSettings() {
                   )}
                   {opt.id === 'sidepanel' && (
                     <div className="absolute inset-0 flex">
-                      <div className="w-[38%] relative overflow-hidden flex flex-col justify-between p-1.5" style={{ background: 'linear-gradient(180deg, #111827 0%, #1f2937 100%)' }}>
-                        {/* Brand area */}
-                        <div className="flex flex-col gap-0.5">
-                          <div className="w-2.5 h-2.5 rounded-sm" style={{ background: 'linear-gradient(135deg, #6366f1, #8b5cf6)' }} />
-                          <div className="w-6 h-1 rounded-sm" style={{ background: 'rgba(255,255,255,0.8)' }} />
-                          <div className="w-8 h-1 rounded-sm" style={{ background: 'rgba(255,255,255,0.8)' }} />
-                          <div className="w-10 h-0.5 rounded-sm" style={{ background: 'rgba(255,255,255,0.3)' }} />
-                        </div>
-                        {/* Feature pills */}
-                        <div className="flex flex-wrap gap-0.5">
-                          {['SQL审核', '变更审批', '监控'].map(t => (
-                            <span key={t} className="px-0.5 rounded text-[4px]" style={{ background: 'rgba(255,255,255,0.06)', color: 'rgba(255,255,255,0.5)' }}>{t}</span>
-                          ))}
-                        </div>
+                      <div className="w-[40%] relative overflow-hidden flex flex-col items-center justify-center" style={{ background: 'linear-gradient(135deg, #111827, #1f2937)' }}>
+                        {/* Decorative circles */}
+                        <div className="absolute" style={{ top: '15%', left: '10%', width: 16, height: 16, borderRadius: '50%', background: 'rgba(255,255,255,0.06)' }} />
+                        <div className="absolute" style={{ bottom: '20%', right: '10%', width: 24, height: 24, borderRadius: '50%', background: 'rgba(255,255,255,0.04)' }} />
+                        <div className="absolute" style={{ top: '55%', left: '55%', width: 8, height: 8, borderRadius: '50%', background: 'rgba(255,255,255,0.07)' }} />
+                        {/* Logo + text */}
+                        <div className="w-3 h-3 rounded-sm mb-1" style={{ background: '#6366f1' }} />
+                        <div className="w-8 h-0.5 rounded-sm" style={{ background: 'rgba(255,255,255,0.7)' }} />
+                        <div className="w-12 h-0.5 rounded-sm mt-0.5" style={{ background: 'rgba(255,255,255,0.3)' }} />
                       </div>
                       <div className="flex-1 p-2 flex flex-col justify-center gap-0.5" style={{ background: 'var(--dg-bg-primary, #0a0a1a)' }}>
                         <div className="w-4 h-0.5 rounded-sm" style={{ background: 'rgba(255,255,255,0.3)' }} />
-                        <div className="w-8 h-0.5 rounded-sm" style={{ background: 'rgba(255,255,255,0.08)' }} />
+                        <div className="w-8 h-0.5 rounded-sm" style={{ background: 'rgba(255,255,255,0.1)' }} />
                         <div className="w-full h-0.5 rounded-sm" style={{ background: 'rgba(255,255,255,0.08)' }} />
                         <div className="w-full h-0.5 rounded-sm" style={{ background: 'rgba(255,255,255,0.08)' }} />
                         <div className="w-full h-1 rounded-sm mt-0.5" style={{ background: '#6366f1', opacity: 0.5 }} />
diff --git a/frontend/src/pages/LoginPage.tsx b/frontend/src/pages/LoginPage.tsx
index 9945e13..64e3390 100644
--- a/frontend/src/pages/LoginPage.tsx
+++ b/frontend/src/pages/LoginPage.tsx
@@ -28,7 +28,7 @@ const LOGIN_STYLES: Record<LoginStyle, React.ComponentType> = {
 export const LOGIN_STYLE_OPTIONS: { id: LoginStyle; name: string; desc: string }[] = [
   { id: 'split', name: '经典分屏', desc: '左黑右白，晶格科技感' },
   { id: 'centered', name: '居中卡片', desc: '黎明光柱，金色晨曦氛围' },
-  { id: 'sidepanel', name: '侧边面板', desc: '左品牌右登录，简洁专业' },
+  { id: 'sidepanel', name: '侧边面板', desc: '左品牌右登录，渐变装饰圆圈' },
   { id: 'fullimage', name: '全屏背景', desc: '科技背景，毛玻璃卡片' },
   { id: 'minimal', name: '深蓝紫曲线', desc: '优雅暗黑，粉紫流动曲线' },
   { id: 'aurora', name: '极光之境', desc: '北极光动态渐变，紫绿流光' },