diff --git a/src/App.css b/src/App.css
index 26621c7..80ade9d 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,24 +1,38 @@
-/* Hell Divers 2 Themed App Styles */
+/* Helldivers 2 Themed App Styles - Super Earth Propaganda Aesthetic */
 
 :root {
-  /* HD2 Military Color Palette */
-  --primary-color: #0a0a0a;
-  --secondary-color: #1a1a1a;
-  --tertiary-color: #2d2d2d;
-  --accent-color: #ffb300;
-  --accent-yellow: #ffb300;
-  --accent-red: #d32f2f;
-  --success-color: #66ff00;
-  --success-green: #66ff00;
-  --warning-color: #ff4400;
-  --text-light: #e8e8e8;
-  --text-dim: #999999;
-  --text-dark: #1a1a2e;
-  --border-color: #444;
-  --gold-accent: #d4a574;
-  --tactical-green: #2d5a2d;
+  /* HD2 Official UI Palette (from game iconography) */
+  --super-earth-blue: #41639c;
+  --helldivers-yellow: #ffe710;
+  --diver-orange: #ff9d45;
+  --diver-blue: #81abff;
+  --diver-pink: #f88aff;
+  
+  /* HD2 Military / Space Backgrounds */
+  --primary-color: #0a1628;
+  --secondary-color: #132f4c;
+  --tertiary-color: #1a3a52;
+  
+  /* Accents - Helldivers iconic colors */
+  --accent-color: #ffe710;
+  --accent-yellow: #ffe710;
+  --accent-orange: #ff9d45;
+  --accent-red: #e55039;
+  
+  /* Status colors - military palette */
+  --success-color: #40916c;
+  --success-green: #40916c;
+  --warning-color: #ff9d45;
+  
+  /* Text & UI */
+  --text-light: #e8ecf0;
+  --text-dim: #8b9cb8;
+  --text-dark: #0a1628;
+  --border-color: #41639c;
+  --gold-accent: #ff9d45;
+  --tactical-green: #2d6a4f;
   --tactical-red: #5a2d2d;
-  --hover-color: #3a3a3a;
+  --hover-color: #1a3a52;
 }
 
 * {
@@ -31,7 +45,7 @@ body {
   font-family: 'Courier New', 'Courier', monospace;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
+  background: linear-gradient(135deg, #0a1628 0%, #132f4c 50%, #1a3a52 100%);
   color: var(--text-light);
   letter-spacing: 0.5px;
 }
@@ -45,12 +59,12 @@ body {
   display: flex;
   flex-direction: column;
   height: 100vh;
-  background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
+  background: linear-gradient(135deg, #0a1628 0%, #132f4c 50%, #1a3a52 100%);
   overflow: hidden;
   position: relative;
 }
 
-/* Tactical scanline effect */
+/* Tactical scanline effect - Helldivers yellow */
 .app::before {
   content: '';
   position: fixed;
@@ -60,8 +74,8 @@ body {
   height: 100%;
   background: repeating-linear-gradient(
     0deg,
-    rgba(255, 179, 0, 0.03) 0px,
-    rgba(255, 179, 0, 0.03) 1px,
+    rgba(255, 231, 16, 0.03) 0px,
+    rgba(255, 231, 16, 0.03) 1px,
     transparent 1px,
     transparent 2px
   );
@@ -70,11 +84,11 @@ body {
 }
 
 .header {
-  background: linear-gradient(135deg, #0a0a0a 0%, #2d2d2d 100%);
-  border-bottom: 3px solid var(--accent-color);
+  background: linear-gradient(135deg, #0a1628 0%, #132f4c 50%, #1a3a52 100%);
+  border-bottom: 3px solid var(--helldivers-yellow);
   border-top: 1px solid var(--accent-red);
   padding: 20px;
-  box-shadow: 0 8px 32px rgba(255, 179, 0, 0.15), inset 0 1px 0 rgba(255, 179, 0, 0.1);
+  box-shadow: 0 8px 32px rgba(255, 231, 16, 0.15), inset 0 1px 0 rgba(255, 231, 16, 0.1);
   position: relative;
   z-index: 10;
   display: flex;
@@ -93,8 +107,8 @@ body {
     90deg,
     transparent,
     transparent 2px,
-    rgba(255, 179, 0, 0.02) 2px,
-    rgba(255, 179, 0, 0.02) 4px
+    rgba(255, 231, 16, 0.02) 2px,
+    rgba(255, 231, 16, 0.02) 4px
   );
   pointer-events: none;
 }
@@ -110,8 +124,8 @@ body {
   display: flex;
   gap: 12px;
   padding: 12px 16px;
-  background: rgba(0, 0, 0, 0.4);
-  border: 1px solid rgba(255, 179, 0, 0.2);
+  background: rgba(10, 22, 40, 0.6);
+  border: 1px solid rgba(255, 231, 16, 0.3);
   border-radius: 0;
   flex-wrap: wrap;
   align-items: center;
@@ -125,7 +139,7 @@ body {
   align-items: center;
   gap: 4px;
   padding: 6px 12px;
-  border-right: 1px solid rgba(255, 179, 0, 0.2);
+  border-right: 1px solid rgba(65, 99, 156, 0.4);
 }
 
 .stat-item:last-child {
@@ -144,7 +158,7 @@ body {
   font-size: 16px;
   color: var(--success-color);
   font-weight: bold;
-  text-shadow: 0 0 8px rgba(102, 255, 0, 0.4);
+  text-shadow: 0 0 8px rgba(64, 145, 108, 0.4);
 }
 
 .stat-item.live-indicator {
@@ -157,7 +171,7 @@ body {
 }
 
 .stat-item.offline-notice {
-  color: #ffb300;
+  color: var(--helldivers-yellow);
   font-style: italic;
   flex-grow: 1;
   text-align: center;
@@ -168,41 +182,41 @@ body {
   height: 10px;
   border-radius: 50%;
   background: var(--success-color);
-  box-shadow: 0 0 8px var(--success-color), inset 0 0 4px rgba(102, 255, 0, 0.6);
+  box-shadow: 0 0 8px var(--success-color), inset 0 0 4px rgba(64, 145, 108, 0.6);
   animation: pulse-live 1.5s ease-in-out infinite;
 }
 
 .live-dot.degraded {
-  background: #ffb300;
-  box-shadow: 0 0 8px #ffb300, inset 0 0 4px rgba(255, 179, 0, 0.6);
+  background: var(--diver-orange);
+  box-shadow: 0 0 8px var(--diver-orange), inset 0 0 4px rgba(255, 157, 69, 0.6);
   animation: pulse-degraded 2s ease-in-out infinite;  /* Slower pulse for degraded */
 }
 
 .live-dot.offline {
-  background: #ff0000;
-  box-shadow: 0 0 8px #ff0000, inset 0 0 4px rgba(255, 0, 0, 0.6);
+  background: var(--accent-red);
+  box-shadow: 0 0 8px var(--accent-red), inset 0 0 4px rgba(229, 80, 57, 0.6);
   animation: none;  /* No blinking when offline */
 }
 
 @keyframes pulse-live {
   0%, 100% {
     opacity: 1;
-    box-shadow: 0 0 8px var(--success-color), inset 0 0 4px rgba(102, 255, 0, 0.6);
+    box-shadow: 0 0 8px var(--success-color), inset 0 0 4px rgba(64, 145, 108, 0.6);
   }
   50% {
     opacity: 0.6;
-    box-shadow: 0 0 12px var(--success-color), inset 0 0 6px rgba(102, 255, 0, 0.8);
+    box-shadow: 0 0 12px var(--success-color), inset 0 0 6px rgba(64, 145, 108, 0.8);
   }
 }
 
 @keyframes pulse-degraded {
   0%, 100% {
     opacity: 1;
-    box-shadow: 0 0 8px #ffb300, inset 0 0 4px rgba(255, 179, 0, 0.6);
+    box-shadow: 0 0 8px var(--diver-orange), inset 0 0 4px rgba(255, 157, 69, 0.6);
   }
   50% {
     opacity: 0.4;
-    box-shadow: 0 0 12px #ffb300, inset 0 0 6px rgba(255, 179, 0, 0.8);
+    box-shadow: 0 0 12px var(--diver-orange), inset 0 0 6px rgba(255, 157, 69, 0.8);
   }
 }
 
@@ -215,34 +229,34 @@ body {
 }
 
 .live-text.degraded {
-  color: #ffb300;
+  color: var(--diver-orange);
 }
 
 .live-text.offline {
-  color: #ff0000;
+  color: var(--accent-red);
 }
 
 .faction-stat {
-  background: rgba(102, 255, 0, 0.05);
-  border: 1px solid rgba(102, 255, 0, 0.2);
+  background: rgba(64, 145, 108, 0.1);
+  border: 1px solid rgba(64, 145, 108, 0.3);
   padding: 10px 14px;
   border-radius: 2px;
   transition: all 0.3s ease;
 }
 
 .faction-stat:hover {
-  background: rgba(102, 255, 0, 0.1);
-  box-shadow: 0 0 12px rgba(102, 255, 0, 0.3);
+  background: rgba(64, 145, 108, 0.2);
+  box-shadow: 0 0 12px rgba(64, 145, 108, 0.4);
 }
 
 .faction-item {
-  background: rgba(102, 179, 255, 0.08);
-  border: 1px solid rgba(102, 179, 255, 0.3);
+  background: rgba(129, 171, 255, 0.1);
+  border: 1px solid rgba(129, 171, 255, 0.4);
 }
 
 .faction-item:hover {
-  background: rgba(102, 179, 255, 0.15);
-  box-shadow: 0 0 12px rgba(102, 179, 255, 0.4);
+  background: rgba(129, 171, 255, 0.2);
+  box-shadow: 0 0 12px rgba(129, 171, 255, 0.5);
 }
 
 .stat-sublabel {
@@ -261,8 +275,8 @@ body {
   gap: 16px;
   padding: 12px 20px;
   margin-top: 8px;
-  background: linear-gradient(90deg, rgba(255, 179, 0, 0.1) 0%, rgba(255, 179, 0, 0.05) 50%, rgba(255, 179, 0, 0.1) 100%);
-  border: 1px solid rgba(255, 179, 0, 0.2);
+  background: linear-gradient(90deg, rgba(255, 231, 16, 0.1) 0%, rgba(255, 231, 16, 0.05) 50%, rgba(255, 231, 16, 0.1) 100%);
+  border: 1px solid rgba(255, 231, 16, 0.3);
   border-radius: 2px;
   font-style: italic;
 }
@@ -286,8 +300,8 @@ body {
   align-items: center;
   justify-content: center;
   padding: 10px 16px;
-  background: rgba(211, 47, 47, 0.1);
-  border-top: 1px solid rgba(211, 47, 47, 0.3);
+  background: rgba(229, 80, 57, 0.15);
+  border-top: 1px solid rgba(229, 80, 57, 0.4);
   color: var(--accent-red);
   font-size: 10px;
   letter-spacing: 1px;
@@ -310,11 +324,11 @@ body {
   font-weight: 900;
   letter-spacing: 2px;
   text-transform: uppercase;
-  color: var(--accent-color);
+  color: var(--helldivers-yellow);
   text-shadow: 
-    0 0 10px rgba(255, 179, 0, 0.5),
-    0 0 20px rgba(255, 179, 0, 0.3),
-    2px 2px 0 rgba(0, 0, 0, 0.8);
+    0 0 10px rgba(255, 231, 16, 0.5),
+    0 0 20px rgba(255, 231, 16, 0.3),
+    2px 2px 0 rgba(10, 22, 40, 0.9);
   font-family: 'Arial Black', sans-serif;
   text-align: center;
 }
@@ -340,11 +354,11 @@ body {
 
 .tabs {
   display: flex;
-  border-bottom: 2px solid var(--accent-color);
-  border-top: 1px solid var(--tertiary-color);
-  background: linear-gradient(90deg, #0a0a0a 0%, #1a1a1a 50%, #0a0a0a 100%);
+  border-bottom: 2px solid var(--helldivers-yellow);
+  border-top: 1px solid var(--super-earth-blue);
+  background: linear-gradient(90deg, #0a1628 0%, #132f4c 50%, #0a1628 100%);
   gap: 0;
-  box-shadow: inset 0 2px 4px rgba(255, 179, 0, 0.05);
+  box-shadow: inset 0 2px 4px rgba(255, 231, 16, 0.05);
 }
 
 .tab {
@@ -358,7 +372,7 @@ body {
   font-weight: 700;
   transition: all 0.2s ease;
   border-bottom: 2px solid transparent;
-  border-right: 1px solid rgba(255, 179, 0, 0.1);
+  border-right: 1px solid rgba(65, 99, 156, 0.3);
   text-transform: uppercase;
   letter-spacing: 1px;
   font-family: 'Courier New', monospace;
@@ -369,25 +383,25 @@ body {
 }
 
 .tab:hover {
-  color: var(--accent-color);
-  background: rgba(255, 179, 0, 0.05);
-  box-shadow: inset 0 0 20px rgba(255, 179, 0, 0.1);
+  color: var(--helldivers-yellow);
+  background: rgba(255, 231, 16, 0.08);
+  box-shadow: inset 0 0 20px rgba(255, 231, 16, 0.1);
 }
 
 .tab.active {
-  color: var(--accent-color);
-  border-bottom-color: var(--accent-color);
-  background: rgba(255, 179, 0, 0.08);
+  color: var(--helldivers-yellow);
+  border-bottom-color: var(--helldivers-yellow);
+  background: rgba(255, 231, 16, 0.1);
   box-shadow: 
-    inset 0 -2px 0 var(--accent-color),
-    0 0 15px rgba(255, 179, 0, 0.2);
-  text-shadow: 0 0 10px rgba(255, 179, 0, 0.5);
+    inset 0 -2px 0 var(--helldivers-yellow),
+    0 0 15px rgba(255, 231, 16, 0.2);
+  text-shadow: 0 0 10px rgba(255, 231, 16, 0.5);
 }
 
 .content {
   flex: 1;
   overflow: hidden;
-  background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
+  background: linear-gradient(135deg, #0a1628 0%, #132f4c 50%, #1a3a52 100%);
   position: relative;
 }
 
@@ -400,8 +414,8 @@ body {
 }
 
 .help-section {
-  background: rgba(0, 0, 0, 0.4);
-  border: 1px solid rgba(255, 179, 0, 0.3);
+  background: rgba(10, 22, 40, 0.6);
+  border: 1px solid rgba(65, 99, 156, 0.5);
   padding: 24px;
   border-radius: 2px;
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
@@ -409,10 +423,10 @@ body {
 
 .help-section h2 {
   font-size: 24px;
-  color: var(--accent-color);
+  color: var(--helldivers-yellow);
   margin-bottom: 12px;
   letter-spacing: 1px;
-  text-shadow: 0 0 10px rgba(255, 179, 0, 0.3);
+  text-shadow: 0 0 10px rgba(255, 231, 16, 0.4);
 }
 
 .help-section h3 {
@@ -443,7 +457,7 @@ body {
   color: var(--text-light);
   padding: 6px 12px;
   border-left: 2px solid var(--success-color);
-  background: rgba(102, 255, 0, 0.05);
+  background: rgba(64, 145, 108, 0.1);
   margin-bottom: 8px;
 }
 
diff --git a/src/components/ChatInterface.css b/src/components/ChatInterface.css
index 8a5aaf8..5a8bd7b 100644
--- a/src/components/ChatInterface.css
+++ b/src/components/ChatInterface.css
@@ -5,7 +5,7 @@
   flex-direction: column;
   height: 100%;
   padding: 0;
-  background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
+  background: linear-gradient(135deg, #0a1628 0%, #132f4c 100%);
   position: relative;
 }
 
@@ -16,8 +16,8 @@
   flex-direction: column;
   padding: 24px;
   gap: 14px;
-  background: linear-gradient(135deg, #0a0a0a 0%, #15151a 100%);
-  border: 1px solid rgba(255, 179, 0, 0.1);
+  background: linear-gradient(135deg, #0a1628 0%, #132f4c 100%);
+  border: 1px solid rgba(255, 231, 16, 0.15);
   position: relative;
   padding-top: 50px;
 }
@@ -39,7 +39,7 @@
   border-bottom: 1px dashed var(--success-color);
   text-transform: uppercase;
   z-index: 20;
-  background: linear-gradient(135deg, rgba(10, 10, 10, 0.98), rgba(21, 21, 26, 0.98));
+  background: linear-gradient(135deg, rgba(10, 22, 40, 0.98), rgba(19, 47, 76, 0.98));
   pointer-events: none;
 }
 
@@ -48,16 +48,16 @@
 }
 
 .messages-container::-webkit-scrollbar-track {
-  background: rgba(255, 179, 0, 0.02);
+  background: rgba(255, 231, 16, 0.05);
 }
 
 .messages-container::-webkit-scrollbar-thumb {
-  background: var(--accent-color);
+  background: var(--helldivers-yellow);
   border-radius: 0;
 }
 
 .messages-container::-webkit-scrollbar-thumb:hover {
-  background: #ffb300;
+  background: var(--diver-orange);
 }
 
 .welcome-message {
@@ -68,8 +68,8 @@
   text-align: center;
   padding: 40px 20px;
   gap: 24px;
-  background: rgba(45, 90, 45, 0.08);
-  border: 2px dashed rgba(102, 255, 0, 0.3);
+  background: rgba(45, 106, 79, 0.12);
+  border: 2px dashed rgba(64, 145, 108, 0.4);
   border-radius: 0;
 }
 
@@ -80,7 +80,7 @@
   font-weight: 900;
   letter-spacing: 2px;
   text-transform: uppercase;
-  text-shadow: 0 0 10px rgba(255, 179, 0, 0.5);
+  text-shadow: 0 0 10px rgba(255, 231, 16, 0.5);
   font-family: 'Arial Black', sans-serif;
 }
 
@@ -103,9 +103,9 @@
 
 .quick-action {
   padding: 12px 20px;
-  background: linear-gradient(135deg, #2d2d2d 0%, #1a1a1a 100%);
-  color: var(--accent-color);
-  border: 2px solid var(--accent-color);
+  background: linear-gradient(135deg, #1a3a52 0%, #132f4c 100%);
+  color: var(--helldivers-yellow);
+  border: 2px solid var(--helldivers-yellow);
   cursor: pointer;
   transition: all 0.2s ease;
   font-size: 12px;
@@ -116,9 +116,9 @@
 }
 
 .quick-action:hover {
-  background: var(--accent-color);
-  color: #0a0a0a;
-  box-shadow: 0 0 20px rgba(255, 179, 0, 0.6);
+  background: var(--helldivers-yellow);
+  color: #0a1628;
+  box-shadow: 0 0 20px rgba(255, 231, 16, 0.6);
   text-shadow: none;
 }
 
@@ -154,7 +154,7 @@
   flex-shrink: 0;
   font-size: 24px;
   margin-top: 2px;
-  filter: drop-shadow(0 0 4px rgba(102, 255, 0, 0.5));
+  filter: drop-shadow(0 0 4px rgba(64, 145, 108, 0.5));
 }
 
 .message-avatar-label {
@@ -185,9 +185,9 @@
 }
 
 .message-text {
-  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
+  background: linear-gradient(135deg, #132f4c 0%, #1a3a52 100%);
   padding: 16px 18px;
-  border: 1px solid rgba(255, 179, 0, 0.2);
+  border: 1px solid rgba(255, 231, 16, 0.2);
   border-left: 3px solid transparent;
   line-height: 1.6;
   max-width: 100%;
@@ -242,7 +242,7 @@
 
 .message-text pre {
   background: rgba(0, 0, 0, 0.7);
-  border: 1px solid rgba(102, 255, 0, 0.2);
+  border: 1px solid rgba(64, 145, 108, 0.2);
   padding: 12px;
   margin: 8px 0;
   overflow-x: auto;
@@ -253,7 +253,7 @@
   margin: 16px 0;
   width: 100%;
   max-width: 100%;
-  border: 1px solid rgba(255, 179, 0, 0.3);
+  border: 1px solid rgba(255, 231, 16, 0.3);
   font-size: 13px;
   table-layout: fixed;
   display: block;
@@ -264,17 +264,17 @@
 .message-text td {
   padding: 10px 12px;
   text-align: left;
-  border: 1px solid rgba(255, 179, 0, 0.2);
+  border: 1px solid rgba(255, 231, 16, 0.2);
   word-break: break-word;
   overflow-wrap: break-word;
   white-space: normal;
 }
 
 .message-text th {
-  background: rgba(255, 179, 0, 0.1);
+  background: rgba(255, 231, 16, 0.1);
   color: var(--accent-yellow);
   font-weight: bold;
-  border-bottom: 2px solid rgba(255, 179, 0, 0.4);
+  border-bottom: 2px solid rgba(255, 231, 16, 0.4);
 }
 
 .message-text td {
@@ -283,7 +283,7 @@
 }
 
 .message-text tr:hover td {
-  background: rgba(102, 255, 0, 0.05);
+  background: rgba(64, 145, 108, 0.05);
 }
 
 .message-text blockquote {
@@ -306,7 +306,7 @@
 
 .message-text h2 {
   font-size: 16px;
-  border-bottom: 1px solid rgba(255, 179, 0, 0.3);
+  border-bottom: 1px solid rgba(255, 231, 16, 0.3);
   padding-bottom: 6px;
 }
 
@@ -343,22 +343,22 @@
 .message.user .message-text {
   background: linear-gradient(135deg, #2d5a2d 0%, #1a3a1a 100%);
   border-left-color: var(--success-color);
-  border: 1px solid rgba(102, 255, 0, 0.3);
+  border: 1px solid rgba(64, 145, 108, 0.3);
   max-width: 65%;
   color: var(--success-color);
-  box-shadow: inset 0 0 10px rgba(102, 255, 0, 0.1);
+  box-shadow: inset 0 0 10px rgba(64, 145, 108, 0.1);
   margin-right: auto;
 }
 
 .message.assistant .message-text {
   background: linear-gradient(135deg, #5a2d2d 0%, #3a1a1a 100%);
   border-right-color: var(--accent-color);
-  border: 1px solid rgba(255, 179, 0, 0.3);
+  border: 1px solid rgba(255, 231, 16, 0.3);
   border-right: 3px solid var(--accent-color);
   color: var(--accent-color);
   max-width: 100%;
   margin-left: auto;
-  box-shadow: inset 0 0 10px rgba(255, 179, 0, 0.1);
+  box-shadow: inset 0 0 10px rgba(255, 231, 16, 0.1);
 }
 
 .message-time {
@@ -385,7 +385,7 @@
   height: 8px;
   background: var(--accent-color);
   animation: tacticBounce 1.4s infinite;
-  box-shadow: 0 0 6px rgba(255, 179, 0, 0.8);
+  box-shadow: 0 0 6px rgba(255, 231, 16, 0.8);
 }
 
 .loading-indicator span:nth-child(2) {
@@ -411,15 +411,15 @@
   display: flex;
   gap: 10px;
   padding: 18px 24px;
-  background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
+  background: linear-gradient(135deg, #0a0a0a 0%, #132f4c 100%);
   border-top: 2px solid var(--accent-color);
-  border-bottom: 1px solid rgba(255, 179, 0, 0.1);
+  border-bottom: 1px solid rgba(255, 231, 16, 0.1);
 }
 
 .message-input {
   flex: 1;
   padding: 14px 16px;
-  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
+  background: linear-gradient(135deg, #132f4c 0%, #1a3a52 100%);
   border: 1px solid var(--accent-color);
   color: var(--accent-color);
   font-size: 13px;
@@ -431,7 +431,7 @@
 .message-input:focus {
   outline: none;
   border-color: var(--success-color);
-  box-shadow: 0 0 15px rgba(102, 255, 0, 0.4), inset 0 0 10px rgba(102, 255, 0, 0.1);
+  box-shadow: 0 0 15px rgba(64, 145, 108, 0.4), inset 0 0 10px rgba(64, 145, 108, 0.1);
 }
 
 .message-input::placeholder {
@@ -446,7 +446,7 @@
 
 .send-button {
   padding: 14px 28px;
-  background: linear-gradient(135deg, var(--accent-color) 0%, #ffb300 100%);
+  background: linear-gradient(135deg, var(--accent-color) 0%, var(--helldivers-yellow) 100%);
   border: 2px solid var(--accent-color);
   color: #0a0a0a;
   font-size: 13px;
@@ -459,9 +459,9 @@
 }
 
 .send-button:hover:not(:disabled) {
-  background: linear-gradient(135deg, #ffb300 0%, var(--accent-color) 100%);
-  box-shadow: 0 0 25px rgba(255, 179, 0, 0.8), inset 0 0 10px rgba(255, 255, 255, 0.2);
-  text-shadow: 0 0 8px rgba(255, 179, 0, 0.5);
+  background: linear-gradient(135deg, var(--helldivers-yellow) 0%, var(--accent-color) 100%);
+  box-shadow: 0 0 25px rgba(255, 231, 16, 0.8), inset 0 0 10px rgba(255, 255, 255, 0.2);
+  text-shadow: 0 0 8px rgba(255, 231, 16, 0.5);
 }
 
 .send-button:disabled {
diff --git a/src/components/DataDisplay.css b/src/components/DataDisplay.css
index b337e33..17ca258 100644
--- a/src/components/DataDisplay.css
+++ b/src/components/DataDisplay.css
@@ -7,7 +7,7 @@
   overflow-y: auto;
   padding: 24px;
   gap: 20px;
-  background: linear-gradient(135deg, #0a0a0a 0%, #15151a 100%);
+  background: linear-gradient(135deg, #0a1628 0%, #132f4c 100%);
 }
 
 .data-display::-webkit-scrollbar {
@@ -15,7 +15,7 @@
 }
 
 .data-display::-webkit-scrollbar-track {
-  background: rgba(255, 179, 0, 0.02);
+  background: rgba(255, 231, 16, 0.02);
 }
 
 .data-display::-webkit-scrollbar-thumb {
@@ -24,11 +24,11 @@
 }
 
 .data-section {
-  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
+  background: linear-gradient(135deg, #132f4c 0%, #1a3a52 100%);
   border: 2px solid var(--accent-color);
   border-left: 4px solid var(--accent-color);
   padding: 20px;
-  box-shadow: 0 0 20px rgba(255, 179, 0, 0.15), inset 0 0 10px rgba(255, 179, 0, 0.05);
+  box-shadow: 0 0 20px rgba(255, 231, 16, 0.15), inset 0 0 10px rgba(255, 231, 16, 0.05);
   position: relative;
   overflow: hidden;
 }
@@ -42,8 +42,8 @@
   bottom: 0;
   background: repeating-linear-gradient(
     0deg,
-    rgba(255, 179, 0, 0.02) 0px,
-    rgba(255, 179, 0, 0.02) 1px,
+    rgba(255, 231, 16, 0.02) 0px,
+    rgba(255, 231, 16, 0.02) 1px,
     transparent 1px,
     transparent 2px
   );
@@ -59,7 +59,7 @@
   text-transform: uppercase;
   position: relative;
   z-index: 1;
-  text-shadow: 0 0 10px rgba(102, 255, 0, 0.5);
+  text-shadow: 0 0 10px rgba(64, 145, 108, 0.5);
 }
 
 .data-section h3 {
@@ -71,7 +71,7 @@
   text-transform: uppercase;
   position: relative;
   z-index: 1;
-  text-shadow: 0 0 8px rgba(255, 179, 0, 0.4);
+  text-shadow: 0 0 8px rgba(255, 231, 16, 0.4);
 }
 
 .data-section p {
@@ -92,7 +92,7 @@
   font-size: 11px;
   color: var(--success-color);
   line-height: 1.6;
-  border: 1px solid rgba(102, 255, 0, 0.3);
+  border: 1px solid rgba(64, 145, 108, 0.3);
   font-family: 'Courier New', monospace;
   letter-spacing: 0.5px;
   position: relative;
@@ -104,7 +104,7 @@
 }
 
 .data-section pre::-webkit-scrollbar-track {
-  background: rgba(255, 179, 0, 0.05);
+  background: rgba(255, 231, 16, 0.05);
 }
 
 .data-section pre::-webkit-scrollbar-thumb {
@@ -123,9 +123,9 @@
 
 .command-list li {
   padding: 12px 14px;
-  background: linear-gradient(90deg, rgba(45, 90, 45, 0.1), rgba(102, 255, 0, 0.05));
+  background: linear-gradient(90deg, rgba(45, 90, 45, 0.1), rgba(64, 145, 108, 0.05));
   border-left: 3px solid var(--success-green);
-  border-right: 1px solid rgba(102, 255, 0, 0.2);
+  border-right: 1px solid rgba(64, 145, 108, 0.2);
   color: var(--text-light);
   font-size: 12px;
   letter-spacing: 0.5px;
@@ -134,15 +134,15 @@
 }
 
 .command-list li:hover {
-  background: linear-gradient(90deg, rgba(45, 90, 45, 0.2), rgba(102, 255, 0, 0.1));
+  background: linear-gradient(90deg, rgba(45, 90, 45, 0.2), rgba(64, 145, 108, 0.1));
   border-left-color: var(--accent-color);
-  box-shadow: inset 0 0 10px rgba(102, 255, 0, 0.1);
+  box-shadow: inset 0 0 10px rgba(64, 145, 108, 0.1);
 }
 
 .command-list code {
   background: linear-gradient(135deg, rgba(10, 10, 10, 0.8), rgba(21, 21, 26, 0.8));
   padding: 3px 8px;
-  border: 1px solid rgba(102, 255, 0, 0.3);
+  border: 1px solid rgba(64, 145, 108, 0.3);
   border-radius: 0;
   font-family: 'Courier New', monospace;
   color: var(--success-green);
diff --git a/src/components/GalacticMap.css b/src/components/GalacticMap.css
index 2673fc0..06a6fef 100644
--- a/src/components/GalacticMap.css
+++ b/src/components/GalacticMap.css
@@ -5,12 +5,12 @@
   padding: 24px;
   height: 100%;
   overflow-y: auto;
-  background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
+  background: linear-gradient(135deg, #0a1628 0%, #132f4c 100%);
 }
 
 .map-header {
   text-align: center;
-  border-bottom: 2px solid rgba(255, 179, 0, 0.3);
+  border-bottom: 2px solid rgba(255, 231, 16, 0.3);
   padding-bottom: 16px;
 }
 
@@ -19,13 +19,13 @@
   color: var(--accent-color);
   margin-bottom: 12px;
   letter-spacing: 1px;
-  text-shadow: 0 0 10px rgba(255, 179, 0, 0.3);
+  text-shadow: 0 0 10px rgba(255, 231, 16, 0.3);
 }
 
 .campaign-info {
-  background: rgba(102, 255, 0, 0.05);
+  background: rgba(64, 145, 108, 0.05);
   padding: 12px;
-  border: 1px solid rgba(102, 255, 0, 0.2);
+  border: 1px solid rgba(64, 145, 108, 0.2);
   border-radius: 2px;
 }
 
@@ -45,7 +45,7 @@
 
 .planet-card {
   background: rgba(0, 0, 0, 0.4);
-  border: 2px solid rgba(255, 179, 0, 0.2);
+  border: 2px solid rgba(255, 231, 16, 0.2);
   padding: 16px;
   border-radius: 2px;
   transition: all 0.3s ease;
@@ -55,8 +55,8 @@
 }
 
 .planet-card:hover {
-  border-color: rgba(255, 179, 0, 0.5);
-  box-shadow: 0 0 20px rgba(255, 179, 0, 0.2);
+  border-color: rgba(255, 231, 16, 0.5);
+  box-shadow: 0 0 20px rgba(255, 231, 16, 0.2);
   transform: translateY(-2px);
 }
 
@@ -78,7 +78,7 @@
 .planet-index {
   font-size: 11px;
   color: var(--text-dim);
-  background: rgba(255, 179, 0, 0.1);
+  background: rgba(255, 231, 16, 0.1);
   padding: 4px 8px;
   border-radius: 2px;
   font-weight: bold;
@@ -128,7 +128,7 @@
   width: 100%;
   height: 8px;
   background: rgba(0, 0, 0, 0.6);
-  border: 1px solid rgba(102, 255, 0, 0.2);
+  border: 1px solid rgba(64, 145, 108, 0.2);
   border-radius: 2px;
   overflow: hidden;
 }
@@ -163,7 +163,7 @@
   text-align: center;
   padding: 40px;
   background: rgba(0, 0, 0, 0.3);
-  border: 2px dashed rgba(255, 179, 0, 0.2);
+  border: 2px dashed rgba(255, 231, 16, 0.2);
   border-radius: 2px;
 }
 
@@ -180,7 +180,7 @@
 }
 
 .map-legend {
-  border-top: 2px solid rgba(255, 179, 0, 0.3);
+  border-top: 2px solid rgba(255, 231, 16, 0.3);
   padding-top: 16px;
 }
 
diff --git a/src/components/LiveStats.css b/src/components/LiveStats.css
index 51f5f96..fbad996 100644
--- a/src/components/LiveStats.css
+++ b/src/components/LiveStats.css
@@ -3,9 +3,9 @@
   flex-direction: column;
   gap: 2rem;
   padding: 2rem;
-  background: linear-gradient(135deg, rgba(20, 20, 40, 0.95) 0%, rgba(40, 20, 60, 0.95) 100%);
+  background: linear-gradient(135deg, rgba(10, 22, 40, 0.95) 0%, rgba(19, 47, 76, 0.95) 100%);
   border-radius: 8px;
-  color: #00ff00;
+  color: var(--success-color);
   font-family: 'Courier New', monospace;
 }
 
@@ -13,14 +13,14 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  border-bottom: 2px solid #00ff00;
+  border-bottom: 2px solid var(--success-color);
   padding-bottom: 1rem;
 }
 
 .stats-header h2 {
   margin: 0;
   font-size: 1.8rem;
-  text-shadow: 0 0 10px #00ff00;
+  text-shadow: 0 0 10px rgba(64, 145, 108, 0.6);
   letter-spacing: 2px;
 }
 
@@ -32,9 +32,9 @@
 
 .refresh-button {
   padding: 0.5rem 1rem;
-  background: rgba(0, 255, 0, 0.1);
-  border: 1px solid #00ff00;
-  color: #00ff00;
+  background: rgba(64, 145, 108, 0.15);
+  border: 1px solid var(--success-color);
+  color: var(--success-color);
   cursor: pointer;
   border-radius: 4px;
   font-family: 'Courier New', monospace;
@@ -43,8 +43,8 @@
 }
 
 .refresh-button:hover:not(:disabled) {
-  background: rgba(0, 255, 0, 0.2);
-  box-shadow: 0 0 10px #00ff00;
+  background: rgba(64, 145, 108, 0.25);
+  box-shadow: 0 0 10px rgba(64, 145, 108, 0.5);
 }
 
 .refresh-button:disabled {
@@ -54,7 +54,7 @@
 
 .last-refresh {
   font-size: 0.9rem;
-  color: #00aa00;
+  color: var(--success-color);
   opacity: 0.8;
 }
 
@@ -65,8 +65,8 @@
 }
 
 .stats-section {
-  background: rgba(0, 0, 0, 0.3);
-  border: 1px solid rgba(0, 255, 0, 0.3);
+  background: rgba(10, 22, 40, 0.5);
+  border: 1px solid rgba(64, 145, 108, 0.4);
   border-radius: 6px;
   padding: 1.5rem;
   backdrop-filter: blur(10px);
@@ -75,10 +75,10 @@
 .stats-section h3 {
   margin: 0 0 1.5rem 0;
   font-size: 1.2rem;
-  color: #00ff00;
-  text-shadow: 0 0 5px #00ff00;
+  color: var(--success-color);
+  text-shadow: 0 0 5px rgba(64, 145, 108, 0.5);
   letter-spacing: 1px;
-  border-bottom: 1px dashed rgba(0, 255, 0, 0.5);
+  border-bottom: 1px dashed rgba(64, 145, 108, 0.5);
   padding-bottom: 0.75rem;
 }
 
@@ -87,7 +87,7 @@
   justify-content: space-between;
   align-items: center;
   padding: 0.75rem 0;
-  border-bottom: 1px solid rgba(0, 255, 0, 0.1);
+  border-bottom: 1px solid rgba(64, 145, 108, 0.15);
   font-size: 1rem;
 }
 
@@ -96,29 +96,30 @@
 }
 
 .stat-label {
-  color: #00dd00;
+  color: var(--success-color);
   font-weight: 500;
   text-align: left;
   flex: 1;
+  opacity: 0.9;
 }
 
 .stat-value {
-  color: #00ff00;
+  color: var(--success-color);
   font-weight: bold;
   text-align: right;
-  text-shadow: 0 0 5px rgba(0, 255, 0, 0.5);
+  text-shadow: 0 0 5px rgba(64, 145, 108, 0.5);
   font-size: 1.1rem;
 }
 
 .raw-stat .stat-value {
   font-family: 'Courier New', monospace;
   letter-spacing: 0.5px;
-  color: #ffff00;
-  text-shadow: 0 0 8px rgba(255, 255, 0, 0.6);
+  color: var(--helldivers-yellow);
+  text-shadow: 0 0 8px rgba(255, 231, 16, 0.5);
 }
 
 .raw-stat .stat-label {
-  color: #ffdd00;
+  color: var(--diver-orange);
 }
 
 .raw-value {
@@ -126,21 +127,21 @@
 }
 
 .total-stat {
-  background: rgba(255, 255, 0, 0.05);
+  background: rgba(255, 231, 16, 0.08);
   padding: 1rem 0.75rem;
-  border: 1px solid rgba(255, 255, 0, 0.3);
+  border: 1px solid rgba(255, 231, 16, 0.4);
   border-radius: 4px;
   margin-top: 0.5rem;
 }
 
 .total-stat .stat-label {
-  color: #ffff00;
+  color: var(--helldivers-yellow);
   font-weight: bold;
 }
 
 .total-value {
   font-size: 1.3rem;
-  color: #ffff00 !important;
+  color: var(--helldivers-yellow) !important;
 }
 
 .loading-state {
@@ -149,8 +150,8 @@
   align-items: center;
   min-height: 300px;
   font-size: 1.2rem;
-  color: #00ff00;
-  text-shadow: 0 0 10px #00ff00;
+  color: var(--success-color);
+  text-shadow: 0 0 10px rgba(64, 145, 108, 0.6);
   animation: pulse 1.5s ease-in-out infinite;
 }
 
diff --git a/src/components/MapView.css b/src/components/MapView.css
index 3ad0e39..7e129f3 100644
--- a/src/components/MapView.css
+++ b/src/components/MapView.css
@@ -4,8 +4,8 @@
   gap: 0;
   padding: 24px;
   height: 100%;
-  background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
-  color: #e0e0e0;
+  background: linear-gradient(135deg, #0a1628 0%, #132f4c 100%);
+  color: var(--text-light);
   font-family: 'Courier New', monospace;
 }
 
@@ -16,15 +16,15 @@
   gap: 16px;
   margin-bottom: 16px;
   padding-bottom: 12px;
-  border-bottom: 2px solid rgba(255, 179, 0, 0.2);
+  border-bottom: 2px solid rgba(255, 231, 16, 0.3);
 }
 
 .map-header h2 {
   font-size: 20px;
-  color: #ffb300;
+  color: var(--helldivers-yellow);
   margin: 0;
   letter-spacing: 2px;
-  text-shadow: 0 0 10px rgba(255, 179, 0, 0.5);
+  text-shadow: 0 0 10px rgba(255, 231, 16, 0.5);
 }
 
 .map-header-right {
@@ -36,9 +36,9 @@
 .refresh-button {
   padding: 6px 12px;
   font-size: 12px;
-  background: rgba(255, 179, 0, 0.1);
-  border: 1px solid rgba(255, 179, 0, 0.4);
-  color: #ffb300;
+  background: rgba(255, 231, 16, 0.1);
+  border: 1px solid rgba(255, 231, 16, 0.4);
+  color: var(--helldivers-yellow);
   font-family: 'Courier New', monospace;
   cursor: pointer;
   border-radius: 4px;
@@ -47,9 +47,9 @@
 }
 
 .refresh-button:hover:not(:disabled) {
-  background: rgba(255, 179, 0, 0.2);
-  border-color: rgba(255, 179, 0, 0.8);
-  text-shadow: 0 0 10px rgba(255, 179, 0, 0.5);
+  background: rgba(255, 231, 16, 0.2);
+  border-color: rgba(255, 231, 16, 0.8);
+  text-shadow: 0 0 10px rgba(255, 231, 16, 0.5);
   transform: scale(1.05);
 }
 
@@ -60,7 +60,7 @@
 
 .last-refresh {
   font-size: 10px;
-  color: rgba(255, 179, 0, 0.5);
+  color: rgba(255, 231, 16, 0.6);
   margin: 0;
   font-style: italic;
   white-space: nowrap;
@@ -69,14 +69,14 @@
 .map-container {
   flex: 1;
   position: relative;
-  background: radial-gradient(ellipse at center, #1a2a3a 0%, #0a0a0a 100%);
-  border: 2px solid rgba(255, 179, 0, 0.2);
+  background: radial-gradient(ellipse at center, #1a3a52 0%, #0a1628 100%);
+  border: 2px solid rgba(65, 99, 156, 0.4);
   border-radius: 0;
   overflow: hidden;
   display: flex;
   align-items: center;
   justify-content: center;
-  box-shadow: inset 0 0 20px rgba(102, 255, 0, 0.1);
+  box-shadow: inset 0 0 20px rgba(64, 145, 108, 0.08);
 }
 
 .loading-overlay {
@@ -88,7 +88,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background: rgba(10, 10, 10, 0.9);
+  background: rgba(10, 22, 40, 0.92);
   z-index: 100;
   backdrop-filter: blur(2px);
 }
@@ -103,8 +103,8 @@
 .spinner {
   width: 50px;
   height: 50px;
-  border: 3px solid rgba(255, 179, 0, 0.2);
-  border-top: 3px solid #ffb300;
+  border: 3px solid rgba(255, 231, 16, 0.2);
+  border-top: 3px solid var(--helldivers-yellow);
   border-radius: 50%;
   animation: spin 3s linear infinite;
 }
@@ -116,7 +116,7 @@
 
 .loading-spinner p {
   font-size: 14px;
-  color: #ffb300;
+  color: var(--helldivers-yellow);
   letter-spacing: 2px;
   text-transform: uppercase;
   font-weight: bold;
@@ -283,14 +283,14 @@
 
 .map-details {
   position: fixed;
-  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
-  border: 2px solid rgba(255, 179, 0, 0.4);
+  background: linear-gradient(135deg, #132f4c 0%, #1a3a52 100%);
+  border: 2px solid rgba(255, 231, 16, 0.4);
   border-radius: 4px;
   padding: 24px;
   max-width: 500px;
   max-height: 600px;
   overflow-y: auto;
-  box-shadow: 0 0 20px rgba(255, 179, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.8);
+  box-shadow: 0 0 20px rgba(255, 231, 16, 0.3), 0 0 40px rgba(0, 0, 0, 0.8);
   z-index: 50;
   display: none;
 }
@@ -309,7 +309,7 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  border-bottom: 1px solid rgba(255, 179, 0, 0.2);
+  border-bottom: 1px solid rgba(255, 231, 16, 0.2);
   padding-bottom: 10px;
   margin-bottom: 10px;
 }
@@ -324,7 +324,7 @@
 
 .close-btn {
   background: none;
-  border: 1px solid rgba(255, 179, 0, 0.3);
+  border: 1px solid rgba(255, 231, 16, 0.3);
   color: var(--accent-yellow);
   width: 24px;
   height: 24px;
@@ -337,7 +337,7 @@
 }
 
 .close-btn:hover {
-  background: rgba(255, 179, 0, 0.1);
+  background: rgba(255, 231, 16, 0.1);
   color: var(--accent-color);
   border-color: var(--accent-color);
 }
@@ -354,7 +354,7 @@
   align-items: center;
   padding: 6px 0;
   font-size: 12px;
-  border-bottom: 1px solid rgba(255, 179, 0, 0.1);
+  border-bottom: 1px solid rgba(255, 231, 16, 0.1);
 }
 
 .detail-row:last-child {
@@ -362,9 +362,9 @@
 }
 
 .detail-row.related-planets {
-  background: rgba(102, 255, 0, 0.05);
+  background: rgba(64, 145, 108, 0.05);
   padding: 8px 6px;
-  border: 1px solid rgba(102, 255, 0, 0.2);
+  border: 1px solid rgba(64, 145, 108, 0.2);
   margin-top: 4px;
 }
 
@@ -408,7 +408,7 @@
 }
 
 .event-label {
-  color: rgba(255, 179, 0, 0.8);
+  color: rgba(255, 231, 16, 0.8);
   min-width: 70px;
   font-weight: bold;
   text-transform: uppercase;
@@ -416,7 +416,7 @@
 }
 
 .event-value {
-  color: #ffb300;
+  color: var(--helldivers-yellow);
   flex: 1;
 }
 
@@ -450,7 +450,7 @@
 }
 
 .campaign-label {
-  color: rgba(255, 179, 0, 0.8);
+  color: rgba(255, 231, 16, 0.8);
   min-width: 90px;
   font-weight: bold;
   text-transform: uppercase;
@@ -458,7 +458,7 @@
 }
 
 .campaign-value {
-  color: #ffb300;
+  color: var(--helldivers-yellow);
   flex: 1;
 }
 
@@ -499,7 +499,7 @@
   flex: 1;
   height: 8px;
   background: rgba(0, 0, 0, 0.3);
-  border: 1px solid rgba(255, 179, 0, 0.2);
+  border: 1px solid rgba(255, 231, 16, 0.2);
   position: relative;
   min-width: 100px;
 }
@@ -580,7 +580,7 @@
 }
 
 .map-details::-webkit-scrollbar-track {
-  background: rgba(255, 179, 0, 0.02);
+  background: rgba(255, 231, 16, 0.02);
 }
 
 .map-details::-webkit-scrollbar-thumb {
@@ -589,7 +589,7 @@
 }
 
 .map-details::-webkit-scrollbar-thumb:hover {
-  background: #ffb300;
+  background: var(--helldivers-yellow);
 }
 
 /* Responsive adjustments */
diff --git a/src/components/MapView.tsx b/src/components/MapView.tsx
index c4c5fda..5813676 100644
--- a/src/components/MapView.tsx
+++ b/src/components/MapView.tsx
@@ -521,9 +521,9 @@ const MapView: React.FC<MapViewProps> = ({ warStatus }) => {
         {/* SVG orbital paths */}
   <svg ref={svgRef} className="orbital-map" viewBox={`${viewBox.x} ${viewBox.y} ${viewBox.w} ${viewBox.h}`}>
           {/* Orbital rings - visual guides for the galactic map */}
-          <circle cx="400" cy="400" r="160" fill="none" stroke="rgba(255, 179, 0, 0.04)" strokeWidth="1" strokeDasharray="4,4" />
-          <circle cx="400" cy="400" r="280" fill="none" stroke="rgba(255, 179, 0, 0.05)" strokeWidth="1" strokeDasharray="4,4" />
-          <circle cx="400" cy="400" r="750" fill="none" stroke="rgba(255, 179, 0, 0.1)" strokeWidth="1.5" />
+          <circle cx="400" cy="400" r="160" fill="none" stroke="rgba(255, 231, 16, 0.04)" strokeWidth="1" strokeDasharray="4,4" />
+          <circle cx="400" cy="400" r="280" fill="none" stroke="rgba(255, 231, 16, 0.05)" strokeWidth="1" strokeDasharray="4,4" />
+          <circle cx="400" cy="400" r="750" fill="none" stroke="rgba(255, 231, 16, 0.1)" strokeWidth="1.5" />
 
           {/* Sector connecting lines - draw lines between planets in same sector - HIDDEN */}
           {false && planets && planets.length > 1 && (
@@ -541,7 +541,7 @@ const MapView: React.FC<MapViewProps> = ({ warStatus }) => {
                         y1={400 + pos1.y}
                         x2={400 + pos2.x}
                         y2={400 + pos2.y}
-                        stroke="rgba(102, 255, 0, 0.3)"
+                        stroke="rgba(64, 145, 108, 0.3)"
                         strokeWidth="0.5"
                         strokeDasharray="5,5"
                       />
@@ -554,11 +554,11 @@ const MapView: React.FC<MapViewProps> = ({ warStatus }) => {
 
           {/* Debug: Coordinate crosshairs at Super Earth center - HIDDEN */}
           {false && (
-          <g opacity="0.3" stroke="rgba(255, 179, 0, 0.5)" strokeWidth="1">
+          <g opacity="0.3" stroke="rgba(255, 231, 16, 0.5)" strokeWidth="1">
             <line x1="350" y1="400" x2="450" y2="400" />
             <line x1="400" y1="350" x2="400" y2="450" />
-            <circle cx="400" cy="400" r="2" fill="rgba(255, 179, 0, 1)" />
-            <text x="410" y="395" fill="rgba(255, 179, 0, 0.7)" fontSize="10">(400, 400)</text>
+            <circle cx="400" cy="400" r="2" fill="rgba(255, 231, 16, 1)" />
+            <text x="410" y="395" fill="rgba(255, 231, 16, 0.7)" fontSize="10">(400, 400)</text>
           </g>
           )}
 
@@ -577,7 +577,7 @@ const MapView: React.FC<MapViewProps> = ({ warStatus }) => {
                       y1="400"
                       x2={400 + pos.x}
                       y2={400 + pos.y}
-                      stroke="rgba(255, 179, 0, 0.2)"
+                      stroke="rgba(255, 231, 16, 0.2)"
                       strokeWidth="0.8"
                     />
                   )
diff --git a/src/components/MissionOrders.css b/src/components/MissionOrders.css
index 74a9b55..2ad5ac5 100644
--- a/src/components/MissionOrders.css
+++ b/src/components/MissionOrders.css
@@ -5,10 +5,10 @@
   padding: 20px;
   gap: 16px;
   background: linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(20, 20, 20, 0.6) 100%);
-  color: #ffb300;
+  color: var(--helldivers-yellow);
   font-family: 'Courier New', monospace;
   overflow-y: auto;
-  border-left: 3px solid rgba(255, 179, 0, 0.3);
+  border-left: 3px solid rgba(255, 231, 16, 0.3);
 }
 
 .mission-orders-container::-webkit-scrollbar {
@@ -20,32 +20,32 @@
 }
 
 .mission-orders-container::-webkit-scrollbar-thumb {
-  background: rgba(255, 179, 0, 0.4);
+  background: rgba(255, 231, 16, 0.4);
   border-radius: 4px;
 }
 
 .mission-orders-container::-webkit-scrollbar-thumb:hover {
-  background: rgba(255, 179, 0, 0.6);
+  background: rgba(255, 231, 16, 0.6);
 }
 
 .mission-header {
   text-align: center;
   padding-bottom: 16px;
-  border-bottom: 2px solid rgba(255, 179, 0, 0.2);
+  border-bottom: 2px solid rgba(255, 231, 16, 0.2);
 }
 
 .mission-header h2 {
   font-size: 24px;
   font-weight: bold;
-  color: #ffb300;
-  text-shadow: 0 0 10px rgba(255, 179, 0, 0.5);
+  color: var(--helldivers-yellow);
+  text-shadow: 0 0 10px rgba(255, 231, 16, 0.5);
   margin: 0 0 8px 0;
   letter-spacing: 2px;
 }
 
 .mission-subheader {
   font-size: 11px;
-  color: rgba(255, 179, 0, 0.6);
+  color: rgba(255, 231, 16, 0.6);
   letter-spacing: 3px;
   margin: 0;
   font-weight: bold;
@@ -63,7 +63,7 @@
   align-items: center;
   gap: 8px;
   font-size: 11px;
-  color: rgba(255, 179, 0, 0.7);
+  color: rgba(255, 231, 16, 0.7);
   cursor: pointer;
   user-select: none;
   letter-spacing: 1px;
@@ -73,7 +73,7 @@
   width: 16px;
   height: 16px;
   cursor: pointer;
-  accent-color: #ffb300;
+  accent-color: var(--helldivers-yellow);
 }
 
 .toggle-checkbox:hover {
@@ -88,10 +88,10 @@
 
 .mission-briefing {
   background: rgba(0, 0, 0, 0.4);
-  border: 1px solid rgba(255, 179, 0, 0.2);
+  border: 1px solid rgba(255, 231, 16, 0.2);
   border-radius: 2px;
   padding: 16px;
-  box-shadow: inset 0 0 10px rgba(255, 179, 0, 0.05);
+  box-shadow: inset 0 0 10px rgba(255, 231, 16, 0.05);
 }
 
 .mission-briefing h3 {
@@ -100,8 +100,8 @@
   text-transform: uppercase;
   letter-spacing: 2px;
   margin: 0 0 12px 0;
-  text-shadow: 0 0 5px rgba(102, 255, 0, 0.5);
-  border-bottom: 1px solid rgba(102, 255, 0, 0.2);
+  text-shadow: 0 0 5px rgba(64, 145, 108, 0.5);
+  border-bottom: 1px solid rgba(64, 145, 108, 0.2);
   padding-bottom: 8px;
 }
 
@@ -113,10 +113,10 @@
 
 .mission-card {
   background: linear-gradient(135deg, rgba(0, 0, 0, 0.5) 0%, rgba(20, 10, 0, 0.4) 100%);
-  border-left: 4px solid #ffb300;
-  border-top: 1px solid rgba(255, 179, 0, 0.2);
-  border-right: 1px solid rgba(255, 179, 0, 0.1);
-  border-bottom: 1px solid rgba(255, 179, 0, 0.1);
+  border-left: 4px solid var(--helldivers-yellow);
+  border-top: 1px solid rgba(255, 231, 16, 0.2);
+  border-right: 1px solid rgba(255, 231, 16, 0.1);
+  border-bottom: 1px solid rgba(255, 231, 16, 0.1);
   padding: 12px;
   border-radius: 2px;
   transition: all 0.3s ease;
@@ -131,18 +131,18 @@
   left: 0;
   right: 0;
   bottom: 0;
-  background: linear-gradient(90deg, rgba(255, 179, 0, 0.1) 0%, transparent 50%, rgba(255, 179, 0, 0.05) 100%);
+  background: linear-gradient(90deg, rgba(255, 231, 16, 0.1) 0%, transparent 50%, rgba(255, 231, 16, 0.05) 100%);
   pointer-events: none;
 }
 
 .mission-card:hover {
   border-left-color: #66ff00;
-  box-shadow: 0 0 15px rgba(255, 179, 0, 0.3), inset 0 0 10px rgba(102, 255, 0, 0.1);
+  box-shadow: 0 0 15px rgba(255, 231, 16, 0.3), inset 0 0 10px rgba(64, 145, 108, 0.1);
   transform: translateX(4px);
 }
 
 .mission-card.status-active {
-  border-left-color: #ffb300;
+  border-left-color: var(--helldivers-yellow);
 }
 
 .mission-card.status-active:hover {
@@ -298,7 +298,7 @@
 
 .planet-card {
   background: linear-gradient(135deg, rgba(0, 50, 100, 0.3) 0%, rgba(0, 30, 60, 0.2) 100%);
-  border: 1px solid rgba(102, 255, 0, 0.3);
+  border: 1px solid rgba(64, 145, 108, 0.3);
   border-radius: 2px;
   padding: 12px;
   text-align: center;
@@ -314,13 +314,13 @@
   left: 0;
   right: 0;
   bottom: 0;
-  background: radial-gradient(circle, rgba(102, 255, 0, 0.1) 0%, transparent 70%);
+  background: radial-gradient(circle, rgba(64, 145, 108, 0.1) 0%, transparent 70%);
   pointer-events: none;
 }
 
 .planet-card:hover {
-  border-color: rgba(255, 179, 0, 0.6);
-  box-shadow: 0 0 15px rgba(102, 255, 0, 0.3), inset 0 0 10px rgba(102, 255, 0, 0.1);
+  border-color: rgba(255, 231, 16, 0.6);
+  box-shadow: 0 0 15px rgba(64, 145, 108, 0.3), inset 0 0 10px rgba(64, 145, 108, 0.1);
   transform: scale(1.05);
 }
 
@@ -328,14 +328,14 @@
   font-size: 12px;
   font-weight: bold;
   color: #66ff00;
-  text-shadow: 0 0 5px rgba(102, 255, 0, 0.5);
+  text-shadow: 0 0 5px rgba(64, 145, 108, 0.5);
   margin-bottom: 6px;
   letter-spacing: 1px;
 }
 
 .planet-biome {
   font-size: 10px;
-  color: rgba(255, 179, 0, 0.7);
+  color: rgba(255, 231, 16, 0.7);
   font-style: italic;
 }
 
@@ -383,14 +383,14 @@
   background: rgba(0, 0, 0, 0.4);
   text-align: center;
   min-width: 60px;
-  color: #ffb300;
+  color: var(--helldivers-yellow);
 }
 
 .mission-expand-icon {
   margin-left: auto;
   transition: transform 0.3s ease;
   font-size: 12px;
-  color: rgba(255, 179, 0, 0.6);
+  color: rgba(255, 231, 16, 0.6);
 }
 
 .mission-card.expanded .mission-expand-icon {
@@ -400,7 +400,7 @@
 .mission-details {
   margin-top: 12px;
   padding-top: 12px;
-  border-top: 1px solid rgba(255, 179, 0, 0.2);
+  border-top: 1px solid rgba(255, 231, 16, 0.2);
   display: flex;
   flex-direction: column;
   gap: 8px;
@@ -420,12 +420,12 @@
 
 .detail-item {
   font-size: 12px;
-  color: rgba(255, 179, 0, 0.8);
+  color: rgba(255, 231, 16, 0.8);
   line-height: 1.4;
 }
 
 .detail-item strong {
-  color: #ffb300;
+  color: var(--helldivers-yellow);
   font-weight: bold;
 }
 
@@ -445,12 +445,12 @@
   flex-direction: column;
   gap: 4px;
   padding-left: 12px;
-  border-left: 2px solid rgba(255, 179, 0, 0.3);
+  border-left: 2px solid rgba(255, 231, 16, 0.3);
 }
 
 .objective-item {
   font-size: 11px;
-  color: rgba(255, 179, 0, 0.7);
+  color: rgba(255, 231, 16, 0.7);
 }
 
 .failed-badge {
@@ -476,9 +476,9 @@
 .refresh-button {
   padding: 6px 12px;
   font-size: 12px;
-  background: rgba(255, 179, 0, 0.1);
-  border: 1px solid rgba(255, 179, 0, 0.4);
-  color: #ffb300;
+  background: rgba(255, 231, 16, 0.1);
+  border: 1px solid rgba(255, 231, 16, 0.4);
+  color: var(--helldivers-yellow);
   font-family: 'Courier New', monospace;
   cursor: pointer;
   border-radius: 4px;
@@ -487,9 +487,9 @@
 }
 
 .refresh-button:hover:not(:disabled) {
-  background: rgba(255, 179, 0, 0.2);
-  border-color: rgba(255, 179, 0, 0.8);
-  text-shadow: 0 0 10px rgba(255, 179, 0, 0.5);
+  background: rgba(255, 231, 16, 0.2);
+  border-color: rgba(255, 231, 16, 0.8);
+  text-shadow: 0 0 10px rgba(255, 231, 16, 0.5);
   transform: scale(1.05);
 }
 
@@ -500,7 +500,7 @@
 
 .last-refresh {
   font-size: 10px;
-  color: rgba(255, 179, 0, 0.5);
+  color: rgba(255, 231, 16, 0.5);
   margin: 0;
   font-style: italic;
   white-space: nowrap;
diff --git a/src/components/News.css b/src/components/News.css
index 28b5813..20ecc0d 100644
--- a/src/components/News.css
+++ b/src/components/News.css
@@ -5,8 +5,8 @@
   flex-direction: column;
   height: 100%;
   padding: 24px;
-  background: linear-gradient(135deg, #0a0a0a 0%, #15151a 100%);
-  border: 1px solid rgba(255, 179, 0, 0.1);
+  background: linear-gradient(135deg, #0a1628 0%, #132f4c 100%);
+  border: 1px solid rgba(255, 231, 16, 0.1);
   overflow-y: auto;
   gap: 20px;
 }
@@ -14,7 +14,7 @@
 .news-header {
   text-align: center;
   padding-bottom: 16px;
-  border-bottom: 2px dashed rgba(255, 179, 0, 0.3);
+  border-bottom: 2px dashed rgba(255, 231, 16, 0.3);
 }
 
 .news-header h2 {
@@ -24,7 +24,7 @@
   font-weight: bold;
   letter-spacing: 2px;
   text-transform: uppercase;
-  text-shadow: 0 0 10px rgba(255, 179, 0, 0.4);
+  text-shadow: 0 0 10px rgba(255, 231, 16, 0.4);
 }
 
 .news-subheader {
@@ -55,9 +55,9 @@
   display: flex;
   gap: 12px;
   padding: 14px 16px;
-  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
-  border: 1px solid rgba(255, 179, 0, 0.2);
-  border-left: 4px solid rgba(255, 179, 0, 0.4);
+  background: linear-gradient(135deg, #132f4c 0%, #1a3a52 100%);
+  border: 1px solid rgba(255, 231, 16, 0.2);
+  border-left: 4px solid rgba(255, 231, 16, 0.4);
   transition: all 0.3s ease;
   animation: newsSlideIn 0.5s ease;
 }
@@ -74,8 +74,8 @@
 }
 
 .news-item:hover {
-  border-color: rgba(255, 179, 0, 0.5);
-  box-shadow: 0 0 15px rgba(255, 179, 0, 0.15);
+  border-color: rgba(255, 231, 16, 0.5);
+  box-shadow: 0 0 15px rgba(255, 231, 16, 0.15);
   transform: translateX(4px);
 }
 
@@ -90,7 +90,7 @@
 }
 
 .news-item.priority-normal {
-  border-left-color: rgba(255, 179, 0, 0.4);
+  border-left-color: rgba(255, 231, 16, 0.4);
 }
 
 .news-priority-indicator {
@@ -153,7 +153,7 @@
 }
 
 .news-container::-webkit-scrollbar-track {
-  background: rgba(255, 179, 0, 0.02);
+  background: rgba(255, 231, 16, 0.02);
 }
 
 .news-container::-webkit-scrollbar-thumb {
@@ -162,7 +162,7 @@
 }
 
 .news-container::-webkit-scrollbar-thumb:hover {
-  background: #ffb300;
+  background: var(--helldivers-yellow);
 }
 
 .news-header-top {
@@ -182,9 +182,9 @@
 .refresh-button {
   padding: 6px 12px;
   font-size: 12px;
-  background: rgba(255, 179, 0, 0.1);
-  border: 1px solid rgba(255, 179, 0, 0.4);
-  color: #ffb300;
+  background: rgba(255, 231, 16, 0.1);
+  border: 1px solid rgba(255, 231, 16, 0.4);
+  color: var(--helldivers-yellow);
   font-family: 'Courier New', monospace;
   cursor: pointer;
   border-radius: 4px;
@@ -193,9 +193,9 @@
 }
 
 .refresh-button:hover:not(:disabled) {
-  background: rgba(255, 179, 0, 0.2);
-  border-color: rgba(255, 179, 0, 0.8);
-  text-shadow: 0 0 10px rgba(255, 179, 0, 0.5);
+  background: rgba(255, 231, 16, 0.2);
+  border-color: rgba(255, 231, 16, 0.8);
+  text-shadow: 0 0 10px rgba(255, 231, 16, 0.5);
   transform: scale(1.05);
 }
 
@@ -206,7 +206,7 @@
 
 .last-refresh {
   font-size: 10px;
-  color: rgba(255, 179, 0, 0.5);
+  color: rgba(255, 231, 16, 0.5);
   margin: 0;
   font-style: italic;
   white-space: nowrap;
@@ -215,9 +215,9 @@
 .display-limit-select {
   padding: 6px 12px;
   font-size: 12px;
-  background: rgba(255, 179, 0, 0.1);
-  border: 1px solid rgba(255, 179, 0, 0.4);
-  color: #ffb300;
+  background: rgba(255, 231, 16, 0.1);
+  border: 1px solid rgba(255, 231, 16, 0.4);
+  color: var(--helldivers-yellow);
   font-family: 'Courier New', monospace;
   cursor: pointer;
   border-radius: 4px;
@@ -226,18 +226,18 @@
 }
 
 .display-limit-select:hover {
-  background: rgba(255, 179, 0, 0.2);
-  border-color: rgba(255, 179, 0, 0.8);
-  text-shadow: 0 0 10px rgba(255, 179, 0, 0.5);
+  background: rgba(255, 231, 16, 0.2);
+  border-color: rgba(255, 231, 16, 0.8);
+  text-shadow: 0 0 10px rgba(255, 231, 16, 0.5);
 }
 
 .display-limit-select:focus {
   outline: none;
-  background: rgba(255, 179, 0, 0.2);
-  border-color: rgba(255, 179, 0, 0.8);
+  background: rgba(255, 231, 16, 0.2);
+  border-color: rgba(255, 231, 16, 0.8);
 }
 
 .display-limit-select option {
-  background: #1a1a1a;
-  color: #ffb300;
+  background: #132f4c;
+  color: var(--helldivers-yellow);
 }
diff --git a/src/index.css b/src/index.css
index 8413d76..95aa6ca 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,15 +1,15 @@
 body {
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
+  color: rgba(232, 236, 240, 0.95);
+  background-color: #0a1628;
 }
 
 a {
-  color: #646cff;
+  color: #81abff;
   text-decoration: inherit;
 }
 
 a:hover {
-  color: #535bf2;
+  color: #ffe710;
 }
 
 button {
@@ -19,13 +19,13 @@ button {
   font-size: 1em;
   font-weight: 500;
   font-family: inherit;
-  background-color: #1a1a1a;
+  background-color: #132f4c;
   cursor: pointer;
   transition: border-color 0.25s;
 }
 
 button:hover {
-  border-color: #646cff;
+  border-color: #ffe710;
 }
 
 button:focus,
@@ -35,9 +35,9 @@ button:focus-visible {
 
 @media (prefers-color-scheme: light) {
   a:hover {
-    color: #747bff;
+    color: #ff9d45;
   }
   button {
-    background-color: #f9f9f9;
+    background-color: #1a3a52;
   }
 }