diff --git a/frontend/src/components/Sidebar.jsx b/frontend/src/components/Sidebar.jsx
index 3333dd9..68af502 100644
--- a/frontend/src/components/Sidebar.jsx
+++ b/frontend/src/components/Sidebar.jsx
@@ -322,8 +322,8 @@ const Sidebar = ({ isMobile = false }) => {
 
     const themeOptions = [
       { value: 'system', label: '시스템', icon: <Monitor size={16} /> },
-      { value: 'dark', label: '다크', icon: <Moon size={16} /> },
       { value: 'light', label: '라이트', icon: <Sun size={16} /> },
+      { value: 'dark', label: '다크', icon: <Moon size={16} /> },
     ];
     
     return (
diff --git a/frontend/src/index.css b/frontend/src/index.css
index f72c753..4e9e632 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -39,6 +39,17 @@
   --border-subtle: rgba(0, 0, 0, 0.05);
 
   --shadow-color: rgba(0, 0, 0, 0.1);
+
+  /* 글래스 및 카드 */
+  --glass-bg: rgba(255, 255, 255, 0.9);
+  --glass-border: rgba(0, 0, 0, 0.1);
+  --glass-dark-bg: rgba(248, 250, 252, 0.95);
+  --card-bg: linear-gradient(
+    135deg,
+    rgba(255, 255, 255, 0.98) 0%,
+    rgba(248, 250, 252, 0.98) 100%
+  );
+  --card-border: rgba(0, 0, 0, 0.1);
 }
 
 /* 기본 html, body 스타일 */
@@ -86,30 +97,33 @@ body.mobile-layout {
     background-clip: text;
   }
 
-  /* 글래스모피즘 (다크 테마) */
+  /* 글래스모피즘 */
   .glass {
-    background: rgba(28, 28, 28, 0.8);
+    background: var(--glass-bg, rgba(28, 28, 28, 0.8));
     backdrop-filter: blur(12px);
     -webkit-backdrop-filter: blur(12px);
-    border: 1px solid rgba(74, 222, 128, 0.1);
+    border: 1px solid var(--glass-border, rgba(74, 222, 128, 0.1));
   }
 
   .glass-dark {
-    background: rgba(20, 20, 20, 0.9);
+    background: var(--glass-dark-bg, rgba(20, 20, 20, 0.9));
     backdrop-filter: blur(16px);
     -webkit-backdrop-filter: blur(16px);
-    border: 1px solid rgba(255, 255, 255, 0.05);
+    border: 1px solid var(--border-subtle);
   }
 
   /* 글로우 카드 효과 */
   .glow-card {
     position: relative;
-    background: linear-gradient(
-      135deg,
-      rgba(28, 28, 28, 0.95) 0%,
-      rgba(24, 24, 24, 0.95) 100%
+    background: var(
+      --card-bg,
+      linear-gradient(
+        135deg,
+        rgba(28, 28, 28, 0.95) 0%,
+        rgba(24, 24, 24, 0.95) 100%
+      )
     );
-    border: 1px solid rgba(74, 222, 128, 0.15);
+    border: 1px solid var(--card-border, rgba(74, 222, 128, 0.15));
     transition: all 0.3s ease;
   }