diff --git a/static/src/components/personalization/PersonalizationDrawer.vue b/static/src/components/personalization/PersonalizationDrawer.vue
index 507f3a9..24af5c4 100644
--- a/static/src/components/personalization/PersonalizationDrawer.vue
+++ b/static/src/components/personalization/PersonalizationDrawer.vue
@@ -1273,16 +1273,16 @@ const applyThemeOption = (theme: ThemeKey) => {
   max-width: 640px;
   padding: 28px 32px;
   border-radius: 26px;
-  border: 1px solid var(--claude-border);
-  background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(247, 243, 234, 0.92));
-  box-shadow: var(--claude-shadow);
+  border: 1px solid var(--theme-control-border, var(--claude-border));
+  background: linear-gradient(145deg, var(--theme-surface-soft), var(--theme-surface-muted));
+  box-shadow: var(--theme-shadow-soft, var(--claude-shadow));
   display: flex;
   flex-direction: column;
   gap: 18px;
 }
 
 .admin-monitor-panel.secondary {
-  background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(247, 243, 234, 0.92));
+  background: linear-gradient(145deg, var(--theme-surface-muted), var(--theme-surface-soft));
 }
 
 .admin-monitor-heading {
@@ -1305,19 +1305,19 @@ const applyThemeOption = (theme: ThemeKey) => {
 
 .admin-monitor-desc {
   margin: 0;
-  color: rgba(70, 56, 40, 0.82);
+  color: var(--claude-text-secondary);
   max-width: 460px;
 }
 
 .admin-monitor-chip {
   padding: 4px 10px;
   border-radius: 999px;
-  border: 1px solid rgba(61, 57, 41, 0.15);
+  border: 1px solid var(--theme-chip-border, var(--claude-border));
   font-size: 12px;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   color: var(--claude-text-secondary);
-  background: rgba(255, 255, 255, 0.65);
+  background: var(--theme-chip-bg, var(--claude-panel));
 }
 
 .admin-monitor-eyebrow {
@@ -1336,8 +1336,8 @@ const applyThemeOption = (theme: ThemeKey) => {
 .admin-monitor-tag {
   padding: 6px 14px;
   border-radius: 999px;
-  border: 1px dashed rgba(61, 57, 41, 0.18);
-  background: rgba(255, 255, 255, 0.8);
+  border: 1px dashed var(--theme-chip-border, var(--claude-border));
+  background: var(--theme-chip-bg, var(--claude-panel));
   font-size: 13px;
   color: var(--claude-text-secondary);
 }
@@ -1364,7 +1364,7 @@ const applyThemeOption = (theme: ThemeKey) => {
   color: #fff;
   font-weight: 600;
   letter-spacing: 0.04em;
-  box-shadow: 0 14px 28px rgba(61, 57, 41, 0.18);
+  box-shadow: var(--theme-shadow-soft, var(--claude-shadow));
   cursor: pointer;
   transition: transform 0.18s ease, box-shadow 0.18s ease;
   display: inline-flex;
@@ -1375,18 +1375,18 @@ const applyThemeOption = (theme: ThemeKey) => {
 .admin-monitor-button.ghost {
   background: transparent;
   color: var(--claude-text);
-  border: 1px dashed rgba(61, 57, 41, 0.25);
+  border: 1px dashed var(--theme-chip-border, var(--claude-border));
   box-shadow: none;
 }
 
 .admin-monitor-button:hover {
   transform: translateY(-1px);
-  box-shadow: 0 18px 32px rgba(61, 57, 41, 0.24);
+  box-shadow: var(--theme-shadow-mid, var(--claude-shadow));
 }
 
 .admin-monitor-button:active {
   transform: translateY(0);
-  box-shadow: 0 12px 20px rgba(61, 57, 41, 0.2);
+  box-shadow: var(--theme-shadow-soft, var(--claude-shadow));
 }
 
 .admin-monitor-hint {