diff --git a/src/NexusReader.UI.Shared/Components/Atoms/NexusSearchBox.razor.css b/src/NexusReader.UI.Shared/Components/Atoms/NexusSearchBox.razor.css
index f0ee42b..4ff84ea 100644
--- a/src/NexusReader.UI.Shared/Components/Atoms/NexusSearchBox.razor.css
+++ b/src/NexusReader.UI.Shared/Components/Atoms/NexusSearchBox.razor.css
@@ -3,7 +3,7 @@
     width: 100%;
     max-width: 600px;
     margin: 1.5rem auto;
-    font-family: 'Inter', sans-serif;
+    font-family: var(--nexus-font-sans), 'Inter', sans-serif;
     z-index: 1000;
 }
 
@@ -11,19 +11,21 @@
     position: relative;
     display: flex;
     align-items: center;
-    background-color: #121212;
-    border: 1px solid rgba(138, 43, 226, 0.4); /* Neon fiolet border on blur */
+    background: rgba(255, 255, 255, 0.03);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.08);
     border-radius: 14px;
     padding: 0.65rem 1.1rem;
     transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), 0 0 8px rgba(138, 43, 226, 0.1);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
 }
 
-/* Focused state: glowing neon green border */
+/* Focused state: glowing neon border matching other dashboard components */
 .nexus-search-container.focused .search-wrapper {
-    background-color: #181818;
-    border-color: #00ff7f; /* Neon green focus */
-    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), 0 0 18px rgba(0, 255, 127, 0.35);
+    background: rgba(255, 255, 255, 0.05);
+    border-color: var(--nexus-neon);
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 15px rgba(0, 255, 153, 0.25);
 }
 
 .search-icon-container {
@@ -42,7 +44,7 @@
 }
 
 .nexus-search-container.focused .nexus-icon {
-    color: #00ff7f;
+    color: var(--nexus-neon);
 }
 
 .nexus-search-input {
@@ -77,11 +79,11 @@
 .ai-pulse-dot {
     width: 8px;
     height: 8px;
-    background-color: #00ff7f;
+    background-color: var(--nexus-neon);
     border-radius: 50%;
     display: inline-block;
     position: relative;
-    box-shadow: 0 0 8px #00ff7f;
+    box-shadow: 0 0 8px var(--nexus-neon);
 }
 
 .ai-pulse-dot::after {
@@ -91,7 +93,7 @@
     height: 100%;
     top: 0;
     left: 0;
-    background-color: #00ff7f;
+    background-color: var(--nexus-neon);
     border-radius: 50%;
     z-index: -1;
     animation: pulse 2s infinite ease-in-out;
@@ -120,17 +122,17 @@
     top: calc(100% + 8px);
     left: 0;
     right: 0;
-    background: rgba(18, 18, 18, 0.82);
-    backdrop-filter: blur(18px) saturate(160%);
-    -webkit-backdrop-filter: blur(18px) saturate(160%);
-    border: 1px solid rgba(138, 43, 226, 0.35);
+    background: rgba(18, 18, 18, 0.9);
+    backdrop-filter: blur(20px) saturate(160%);
+    -webkit-backdrop-filter: blur(20px) saturate(160%);
+    border: 1px solid rgba(255, 255, 255, 0.08);
     border-radius: 14px;
-    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.7), 0 0 20px rgba(138, 43, 226, 0.15);
+    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6), 0 0 20px rgba(0, 255, 153, 0.05);
     max-height: 420px;
     overflow-y: auto;
     overflow-x: hidden;
     scrollbar-width: thin;
-    scrollbar-color: rgba(138, 43, 226, 0.4) transparent;
+    scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
     transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
     animation: slideDown 0.25s cubic-bezier(0.16, 1, 0.3, 1);
 }
@@ -140,21 +142,20 @@
 }
 
 .search-dropdown::-webkit-scrollbar-thumb {
-    background: rgba(138, 43, 226, 0.4);
+    background: rgba(255, 255, 255, 0.15);
     border-radius: 3px;
 }
 
 .search-dropdown::-webkit-scrollbar-thumb:hover {
-    background: rgba(0, 255, 127, 0.5);
+    background: var(--nexus-neon);
 }
 
 /* In-flight spinners */
 .neon-spinner {
     width: 16px;
     height: 16px;
-    border: 2px solid rgba(0, 255, 127, 0.15);
-    border-top: 2px solid #00ff7f;
-    border-right: 2px solid #8a2be2;
+    border: 2px solid rgba(0, 255, 153, 0.15);
+    border-top: 2px solid var(--nexus-neon);
     border-radius: 50%;
     animation: spin 0.75s linear infinite;
 }
@@ -162,9 +163,8 @@
 .neon-spinner-large {
     width: 32px;
     height: 32px;
-    border: 3px solid rgba(138, 43, 226, 0.15);
-    border-top: 3px solid #8a2be2;
-    border-right: 3px solid #00ff7f;
+    border: 3px solid rgba(255, 255, 255, 0.05);
+    border-top: 3px solid var(--nexus-neon);
     border-radius: 50%;
     animation: spin 0.8s cubic-bezier(0.5, 0.1, 0.5, 0.9) infinite;
     margin-bottom: 1rem;
@@ -217,8 +217,8 @@
 }
 
 .result-card:hover {
-    background: rgba(138, 43, 226, 0.08);
-    border-color: rgba(138, 43, 226, 0.35);
+    background: rgba(0, 255, 153, 0.05);
+    border-color: rgba(0, 255, 153, 0.2);
     transform: translateY(-1px);
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
 }
@@ -232,14 +232,14 @@
 }
 
 .relevance-badge {
-    background: rgba(0, 255, 127, 0.15);
-    color: #00ff7f;
-    border: 1px solid rgba(0, 255, 127, 0.3);
+    background: rgba(0, 255, 153, 0.1);
+    color: var(--nexus-neon);
+    border: 1px solid rgba(0, 255, 153, 0.25);
     border-radius: 6px;
     padding: 0.15rem 0.45rem;
     font-weight: 600;
     letter-spacing: 0.02em;
-    text-shadow: 0 0 4px rgba(0, 255, 127, 0.3);
+    text-shadow: 0 0 4px rgba(0, 255, 153, 0.25);
 }
 
 .source-title {
@@ -267,9 +267,9 @@
 
 /* Markup highlights */
 ::deep mark.search-highlight {
-    background: rgba(0, 255, 127, 0.22);
-    color: #00ff7f;
-    border-bottom: 1px solid rgba(0, 255, 127, 0.55);
+    background: rgba(0, 255, 153, 0.2);
+    color: var(--nexus-neon);
+    border-bottom: 1px solid var(--nexus-neon);
     padding: 0.05rem 0.15rem;
     border-radius: 3px;
     font-weight: 500;
@@ -279,15 +279,15 @@
 @keyframes pulse {
     0% {
         transform: scale(1);
-        box-shadow: 0 0 0 0 rgba(0, 255, 127, 0.7);
+        box-shadow: 0 0 0 0 rgba(0, 255, 153, 0.7);
     }
     70% {
         transform: scale(1.6);
-        box-shadow: 0 0 0 6px rgba(0, 255, 127, 0);
+        box-shadow: 0 0 0 6px rgba(0, 255, 153, 0);
     }
     100% {
         transform: scale(1);
-        box-shadow: 0 0 0 0 rgba(0, 255, 127, 0);
+        box-shadow: 0 0 0 0 rgba(0, 255, 153, 0);
     }
 }