diff --git a/apps/frontend/index.html b/apps/frontend/index.html
index d1716dd..1e7b54d 100644
--- a/apps/frontend/index.html
+++ b/apps/frontend/index.html
@@ -4,6 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>OpenDevOps Agent</title>
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
diff --git a/apps/frontend/public/Emblem -White Logo.svg b/apps/frontend/public/Emblem -White Logo.svg
new file mode 100644
index 0000000..5a2be5a
--- /dev/null
+++ b/apps/frontend/public/Emblem -White Logo.svg	
@@ -0,0 +1,14 @@
+<svg width="1000" height="1000" viewBox="0 0 1000 1000" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="1000" height="1000" fill="black"/>
+<path d="M605.905 255.279C759.723 255.279 865.999 360.855 866 499.99C866 637.728 759.724 744.704 605.905 744.704H378.122V638.526C425.81 610.387 457.818 558.507 457.886 499.144C457.987 588.496 530.454 660.9 619.83 660.9C709.269 660.9 781.774 588.395 781.774 498.956C781.774 409.517 709.269 337.012 619.83 337.012C530.455 337.012 457.988 409.414 457.886 498.766C457.817 439.403 425.81 387.521 378.122 359.383V255.279H605.905Z" fill="white"/>
+<path d="M295.944 337.012C325.941 337.012 354.032 345.168 378.122 359.383V638.526C354.032 652.741 325.941 660.9 295.944 660.9C206.505 660.9 134 588.395 134 498.956C134 409.517 206.505 337.012 295.944 337.012Z" fill="white"/>
+<path d="M295.944 337.012C325.941 337.012 354.032 345.168 378.122 359.383V638.526C354.032 652.741 325.941 660.9 295.944 660.9C206.505 660.9 134 588.395 134 498.956C134 409.517 206.505 337.012 295.944 337.012Z" fill="url(#paint0_radial_29_141)"/>
+<defs>
+<radialGradient id="paint0_radial_29_141" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(176 393.279) rotate(49.0973) scale(371.119 371.119)">
+<stop offset="0.130208"/>
+<stop offset="0.34951" stop-color="#010978"/>
+<stop offset="0.768295" stop-color="#00A3FF"/>
+<stop offset="1" stop-color="white"/>
+</radialGradient>
+</defs>
+</svg>
diff --git a/apps/frontend/public/Emblem.svg b/apps/frontend/public/Emblem.svg
new file mode 100644
index 0000000..8b23f11
--- /dev/null
+++ b/apps/frontend/public/Emblem.svg
@@ -0,0 +1,14 @@
+<svg width="1000" height="1000" viewBox="0 0 1000 1000" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="1000" height="1000" fill="white"/>
+<path d="M605.905 255.279C759.723 255.279 865.999 360.855 866 499.99C866 637.728 759.724 744.704 605.905 744.704H378.122V638.526C425.81 610.387 457.818 558.507 457.886 499.144C457.987 588.496 530.454 660.9 619.83 660.9C709.269 660.9 781.774 588.395 781.774 498.956C781.774 409.517 709.269 337.012 619.83 337.012C530.455 337.012 457.988 409.414 457.886 498.766C457.817 439.403 425.81 387.521 378.122 359.383V255.279H605.905Z" fill="black"/>
+<path d="M295.944 337.012C325.941 337.012 354.032 345.168 378.122 359.383V638.526C354.032 652.741 325.941 660.9 295.944 660.9C206.505 660.9 134 588.395 134 498.956C134 409.517 206.505 337.012 295.944 337.012Z" fill="white"/>
+<path d="M295.944 337.012C325.941 337.012 354.032 345.168 378.122 359.383V638.526C354.032 652.741 325.941 660.9 295.944 660.9C206.505 660.9 134 588.395 134 498.956C134 409.517 206.505 337.012 295.944 337.012Z" fill="url(#paint0_radial_29_162)"/>
+<defs>
+<radialGradient id="paint0_radial_29_162" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(176 393.279) rotate(49.0973) scale(371.119 371.119)">
+<stop offset="0.130208"/>
+<stop offset="0.34951" stop-color="#010978"/>
+<stop offset="0.768295" stop-color="#00A3FF"/>
+<stop offset="1" stop-color="white"/>
+</radialGradient>
+</defs>
+</svg>
diff --git a/apps/frontend/public/Horisontal logo 2.svg b/apps/frontend/public/Horisontal logo 2.svg
new file mode 100644
index 0000000..7c6fa14
--- /dev/null
+++ b/apps/frontend/public/Horisontal logo 2.svg	
@@ -0,0 +1,30 @@
+<svg width="1000" height="420" viewBox="0 0 1000 420" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="1000" height="420" fill="white"/>
+<path d="M416.424 239.011C399.349 239.011 387.436 226.065 387.436 210.261C387.436 194.615 399.508 181.511 416.583 181.511C433.658 181.511 445.571 194.456 445.571 210.261C445.571 225.906 433.5 239.011 416.424 239.011ZM416.583 230.036C427.623 230.036 435.326 221.221 435.326 210.261C435.326 199.46 427.464 190.485 416.424 190.485C405.385 190.485 397.681 199.301 397.681 210.261C397.681 221.062 405.544 230.036 416.583 230.036Z" fill="black"/>
+<path d="M449.909 250.765V196.124H459.518V203.113C462.616 198.745 466.984 195.25 473.734 195.25C483.662 195.25 493.272 203.113 493.272 217.17C493.272 231.069 483.741 238.931 473.734 238.931C466.825 238.931 462.457 235.437 459.518 231.545V250.765H449.909ZM471.511 230.592C478.103 230.592 483.503 225.43 483.503 217.011C483.503 208.911 478.023 203.589 471.511 203.589C464.998 203.589 459.28 208.99 459.28 217.17C459.28 225.271 464.998 230.592 471.511 230.592Z" fill="black"/>
+<path d="M517.568 239.011C505.417 239.011 496.045 230.195 496.045 217.091C496.045 205.098 504.543 195.25 516.536 195.25C529.878 195.25 536.629 205.734 536.629 217.806C536.629 218.441 536.549 220.029 536.47 220.506H505.655C506.688 227.336 511.532 231.148 517.727 231.148C522.413 231.148 525.748 229.401 529.084 226.145L534.723 231.148C530.752 235.913 525.272 239.011 517.568 239.011ZM505.576 214.152H527.098C526.463 207.957 522.81 203.113 516.456 203.113C510.579 203.113 506.449 207.64 505.576 214.152Z" fill="black"/>
+<path d="M539.926 238.058V196.124H549.536V202.636C552.236 198.665 556.128 195.25 562.64 195.25C572.091 195.25 577.571 201.604 577.571 211.373V238.058H567.961V214.232C567.961 207.719 564.705 203.986 558.987 203.986C553.427 203.986 549.536 207.878 549.536 214.39V238.058H539.926Z" fill="black"/>
+<path d="M583.934 238.058V182.464H604.663C622.135 182.464 634.207 194.456 634.207 210.261C634.207 225.906 622.135 238.058 604.663 238.058H583.934ZM593.703 229.163H604.663C616.337 229.163 623.962 221.3 623.962 210.261C623.962 199.38 616.337 191.359 604.663 191.359H593.703V229.163Z" fill="black"/>
+<path d="M657.812 239.011C645.661 239.011 636.29 230.195 636.29 217.091C636.29 205.098 644.788 195.25 656.78 195.25C670.123 195.25 676.873 205.734 676.873 217.806C676.873 218.441 676.794 220.029 676.714 220.506H645.899C646.932 227.336 651.777 231.148 657.971 231.148C662.657 231.148 665.993 229.401 669.328 226.145L674.967 231.148C670.996 235.913 665.516 239.011 657.812 239.011ZM645.82 214.152H667.343C666.707 207.957 663.054 203.113 656.701 203.113C650.824 203.113 646.694 207.64 645.82 214.152Z" fill="black"/>
+<path d="M691.417 238.375L674.183 196.124H684.507L695.785 226.939L707.142 196.124H717.228L700.074 238.375H691.417Z" fill="black"/>
+<path d="M746.672 239.011C729.596 239.011 717.683 226.065 717.683 210.261C717.683 194.615 729.755 181.511 746.83 181.511C763.906 181.511 775.819 194.456 775.819 210.261C775.819 225.906 763.747 239.011 746.672 239.011ZM746.83 230.036C757.87 230.036 765.573 221.221 765.573 210.261C765.573 199.46 757.711 190.485 746.672 190.485C735.632 190.485 727.928 199.301 727.928 210.261C727.928 221.062 735.791 230.036 746.83 230.036Z" fill="black"/>
+<path d="M779.361 250.765V196.124H788.971V203.113C792.069 198.745 796.437 195.25 803.188 195.25C813.115 195.25 822.725 203.113 822.725 217.17C822.725 231.069 813.194 238.931 803.188 238.931C796.278 238.931 791.91 235.437 788.971 231.545V250.765H779.361ZM800.964 230.592C807.556 230.592 812.956 225.43 812.956 217.011C812.956 208.911 807.476 203.589 800.964 203.589C794.451 203.589 788.733 208.99 788.733 217.17C788.733 225.271 794.451 230.592 800.964 230.592Z" fill="black"/>
+<path d="M840.588 238.852C834.632 238.852 828.04 236.707 822.798 232.578L827.087 226.065C831.614 229.48 836.538 231.228 840.826 231.228C844.956 231.228 847.339 229.48 847.339 226.542C847.339 223.444 843.288 222.332 838.682 220.982C838.444 220.903 838.205 220.823 837.967 220.744C831.772 218.917 824.863 216.376 824.863 208.196C824.863 200.254 831.455 195.409 839.794 195.409C845.036 195.409 850.754 197.236 855.201 200.174L851.389 207.004C847.339 204.542 843.05 203.033 839.556 203.033C835.823 203.033 833.678 204.781 833.678 207.402C833.678 210.261 837.729 211.531 842.335 213.04C842.573 213.12 842.891 213.199 843.129 213.279C849.245 215.185 856.154 217.964 856.154 225.668C856.154 234.484 849.324 238.852 840.588 238.852Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M277.947 139C322.586 139 353.427 169.638 353.427 210.015C353.427 249.987 322.586 281.032 277.947 281.032H211.844V250.215C225.697 242.041 234.992 226.965 234.992 209.715C234.992 192.466 225.697 177.389 211.844 169.214V139H277.947ZM281.989 162.719C256.033 162.719 234.992 183.76 234.992 209.715C234.992 235.671 256.033 256.712 281.989 256.712C307.944 256.712 328.984 235.671 328.984 209.715C328.984 183.76 307.944 162.719 281.989 162.719Z" fill="black"/>
+<path d="M187.997 162.719C196.702 162.719 204.853 165.089 211.844 169.214V250.215C204.853 254.341 196.702 256.712 187.997 256.712C162.041 256.712 141 235.671 141 209.715C141 183.76 162.041 162.719 187.997 162.719Z" fill="url(#paint0_radial_29_171)"/>
+<path d="M187.997 162.719C196.702 162.719 204.853 165.089 211.844 169.214V250.215C204.853 254.341 196.702 256.712 187.997 256.712C162.041 256.712 141 235.671 141 209.715C141 183.76 162.041 162.719 187.997 162.719Z" fill="url(#paint1_radial_29_171)"/>
+<defs>
+<radialGradient id="paint0_radial_29_171" cx="0" cy="0" r="1" gradientTransform="matrix(70.5188 81.4019 -81.4013 70.5193 153.188 179.048)" gradientUnits="userSpaceOnUse">
+<stop offset="0.130208"/>
+<stop offset="0.34951" stop-color="#010978"/>
+<stop offset="0.768295" stop-color="#00A3FF"/>
+<stop offset="1" stop-color="white"/>
+</radialGradient>
+<radialGradient id="paint1_radial_29_171" cx="0" cy="0" r="1" gradientTransform="matrix(70.5188 81.4019 -81.4013 70.5193 153.188 179.048)" gradientUnits="userSpaceOnUse">
+<stop offset="0.130208"/>
+<stop offset="0.34951" stop-color="#010978"/>
+<stop offset="0.768295" stop-color="#00A3FF"/>
+<stop offset="1" stop-color="white"/>
+</radialGradient>
+</defs>
+</svg>
diff --git a/apps/frontend/public/brand-mark.svg b/apps/frontend/public/brand-mark.svg
new file mode 100644
index 0000000..4207ee2
--- /dev/null
+++ b/apps/frontend/public/brand-mark.svg
@@ -0,0 +1,12 @@
+<svg viewBox="135 133 224 154" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M277.947 139C322.586 139 353.427 169.638 353.427 210.015C353.427 249.987 322.586 281.032 277.947 281.032H211.844V250.215C225.697 242.041 234.992 226.965 234.992 209.715C234.992 192.466 225.697 177.389 211.844 169.214V139H277.947ZM281.989 162.719C256.033 162.719 234.992 183.76 234.992 209.715C234.992 235.671 256.033 256.712 281.989 256.712C307.944 256.712 328.984 235.671 328.984 209.715C328.984 183.76 307.944 162.719 281.989 162.719Z" fill="white"/>
+<path d="M187.997 162.719C196.702 162.719 204.853 165.089 211.844 169.214V250.215C204.853 254.341 196.702 256.712 187.997 256.712C162.041 256.712 141 235.671 141 209.715C141 183.76 162.041 162.719 187.997 162.719Z" fill="url(#bm_radial)"/>
+<defs>
+<radialGradient id="bm_radial" cx="0" cy="0" r="1" gradientTransform="matrix(70.5188 81.4019 -81.4013 70.5193 153.188 179.048)" gradientUnits="userSpaceOnUse">
+<stop offset="0.130208"/>
+<stop offset="0.34951" stop-color="#010978"/>
+<stop offset="0.768295" stop-color="#00A3FF"/>
+<stop offset="1" stop-color="white"/>
+</radialGradient>
+</defs>
+</svg>
diff --git a/apps/frontend/public/favicon.svg b/apps/frontend/public/favicon.svg
new file mode 100644
index 0000000..5a2be5a
--- /dev/null
+++ b/apps/frontend/public/favicon.svg
@@ -0,0 +1,14 @@
+<svg width="1000" height="1000" viewBox="0 0 1000 1000" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="1000" height="1000" fill="black"/>
+<path d="M605.905 255.279C759.723 255.279 865.999 360.855 866 499.99C866 637.728 759.724 744.704 605.905 744.704H378.122V638.526C425.81 610.387 457.818 558.507 457.886 499.144C457.987 588.496 530.454 660.9 619.83 660.9C709.269 660.9 781.774 588.395 781.774 498.956C781.774 409.517 709.269 337.012 619.83 337.012C530.455 337.012 457.988 409.414 457.886 498.766C457.817 439.403 425.81 387.521 378.122 359.383V255.279H605.905Z" fill="white"/>
+<path d="M295.944 337.012C325.941 337.012 354.032 345.168 378.122 359.383V638.526C354.032 652.741 325.941 660.9 295.944 660.9C206.505 660.9 134 588.395 134 498.956C134 409.517 206.505 337.012 295.944 337.012Z" fill="white"/>
+<path d="M295.944 337.012C325.941 337.012 354.032 345.168 378.122 359.383V638.526C354.032 652.741 325.941 660.9 295.944 660.9C206.505 660.9 134 588.395 134 498.956C134 409.517 206.505 337.012 295.944 337.012Z" fill="url(#paint0_radial_29_141)"/>
+<defs>
+<radialGradient id="paint0_radial_29_141" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(176 393.279) rotate(49.0973) scale(371.119 371.119)">
+<stop offset="0.130208"/>
+<stop offset="0.34951" stop-color="#010978"/>
+<stop offset="0.768295" stop-color="#00A3FF"/>
+<stop offset="1" stop-color="white"/>
+</radialGradient>
+</defs>
+</svg>
diff --git a/apps/frontend/src/App.tsx b/apps/frontend/src/App.tsx
index c83bf6a..0b5a2e6 100644
--- a/apps/frontend/src/App.tsx
+++ b/apps/frontend/src/App.tsx
@@ -119,7 +119,7 @@ function AppLayout() {
   };
 
   return (
-    <div className="flex w-full h-screen overflow-hidden bg-gray-50 dark:bg-[#0F0F12]">
+    <div className="flex w-full h-screen overflow-hidden bg-gray-50 dark:bg-[#000000]">
       <Sidebar
         sessions={sessions}
         hasMore={hasMore}
diff --git a/apps/frontend/src/components/AgentMessage.tsx b/apps/frontend/src/components/AgentMessage.tsx
index 4c07c13..fbcadc5 100644
--- a/apps/frontend/src/components/AgentMessage.tsx
+++ b/apps/frontend/src/components/AgentMessage.tsx
@@ -19,10 +19,10 @@ export default function AgentMessage({ message }: Props) {
       )}
 
       <div className="flex flex-row gap-2.5 items-start max-w-[720px]">
-        <div className="w-[30px] h-[30px] bg-indigo-50 dark:bg-[#1E1B4B] rounded-lg flex items-center justify-center text-sm shrink-0 mt-0.5 select-none">
+        <div className="w-[30px] h-[30px] bg-indigo-50 dark:bg-[#04103A] rounded-lg flex items-center justify-center text-sm shrink-0 mt-0.5 select-none">
           ⚡
         </div>
-        <div className="px-3.5 py-2.5 rounded-[2px_10px_10px_10px] text-[16px] leading-relaxed break-words max-w-[660px] bg-gray-50 dark:bg-[#18181C] border border-gray-200 dark:border-[#27272F] text-gray-900 dark:text-[#CBD5E1]">
+        <div className="px-3.5 py-2.5 rounded-[2px_10px_10px_10px] text-[16px] leading-relaxed break-words max-w-[660px] bg-gray-50 dark:bg-[#0A0C10] border border-gray-200 dark:border-[#1E222B] text-gray-900 dark:text-[#CBD5E1]">
           {message.error ? (
             <span className="text-red-500 flex items-center gap-1.5">
               <span>⚠</span> {message.error}
diff --git a/apps/frontend/src/components/EmptyState.tsx b/apps/frontend/src/components/EmptyState.tsx
index 5e67a2a..9992a1c 100644
--- a/apps/frontend/src/components/EmptyState.tsx
+++ b/apps/frontend/src/components/EmptyState.tsx
@@ -17,11 +17,11 @@ interface Props {
 export default function EmptyState({ onChip }: Props) {
   return (
     <div className="flex-1 flex flex-col items-center justify-center gap-4 px-6 py-8">
-      <div className="w-[52px] h-[52px] bg-indigo-50 dark:bg-[#1E1B4B] rounded-2xl flex items-center justify-center text-2xl select-none">
+      <div className="w-[52px] h-[52px] bg-indigo-50 dark:bg-[#04103A] rounded-2xl flex items-center justify-center text-2xl select-none">
         ⚡
       </div>
       <div className="text-center">
-        <h2 className="text-[18px] font-semibold text-gray-900 dark:text-[#F1F5F9] mb-1.5">OpenDevOps Agent</h2>
+        <h2 className="text-[18px] font-semibold text-gray-900 dark:text-[#E4E1EA] mb-1.5">OpenDevOps Agent</h2>
         <p className="text-[13px] text-gray-500 dark:text-[#94A3B8] max-w-[360px] leading-relaxed">
           Ask about your AWS infrastructure or describe an incident.
         </p>
@@ -31,7 +31,7 @@ export default function EmptyState({ onChip }: Props) {
           <button
             key={chip}
             onClick={() => onChip(chip)}
-            className="text-[14px] px-4 py-2 bg-white dark:bg-[#18181C] border border-gray-200 dark:border-[#27272F] rounded-full text-gray-500 dark:text-[#94A3B8] hover:text-indigo-500 dark:hover:text-[#818CF8] hover:border-indigo-200 dark:hover:border-[#3730A3] hover:bg-indigo-50 dark:hover:bg-[#1E1B4B] transition-all cursor-pointer"
+            className="text-[14px] px-4 py-2 bg-white dark:bg-[#0A0C10] border border-gray-200 dark:border-[#1E222B] rounded-full text-gray-500 dark:text-[#94A3B8] hover:text-indigo-500 dark:hover:text-[#00A3FF] hover:border-indigo-200 dark:hover:border-[#0E4FA6] hover:bg-indigo-50 dark:hover:bg-[#04103A] transition-all cursor-pointer"
           >
             {chip}
           </button>
diff --git a/apps/frontend/src/components/InputArea.tsx b/apps/frontend/src/components/InputArea.tsx
index 302bd1a..38cfd65 100644
--- a/apps/frontend/src/components/InputArea.tsx
+++ b/apps/frontend/src/components/InputArea.tsx
@@ -33,10 +33,10 @@ export default function InputArea({ busy, onSend, onStop }: Props) {
   };
 
   return (
-    <div className="px-5 py-3 border-t border-gray-200 dark:border-[#27272F] bg-white dark:bg-[#18181C] shrink-0">
+    <div className="px-5 py-3 border-t border-gray-200 dark:border-[#1E222B] bg-white dark:bg-[#0A0C10] shrink-0">
       <div
         ref={wrapRef}
-        className="flex gap-2 items-end border border-gray-300 dark:border-[#3F3F47] rounded-[10px] px-2.5 py-2 shadow-sm transition-all duration-150 focus-within:border-indigo-500 dark:focus-within:border-[#818CF8] focus-within:shadow-[0_0_0_3px_rgba(99,102,241,0.12)] dark:focus-within:shadow-[0_0_0_3px_rgba(129,140,248,0.12)]"
+        className="flex gap-2 items-end border border-gray-300 dark:border-[#2A2F3A] rounded-[10px] px-2.5 py-2 shadow-sm transition-all duration-150 focus-within:border-indigo-500 dark:focus-within:border-[#00A3FF] focus-within:shadow-[0_0_0_3px_rgba(99,102,241,0.12)] dark:focus-within:shadow-[0_0_0_3px_rgba(129,140,248,0.12)]"
       >
         <textarea
           ref={ref}
@@ -45,7 +45,7 @@ export default function InputArea({ busy, onSend, onStop }: Props) {
           onKeyDown={handleKey}
           placeholder="Describe an incident or ask about your AWS environment…"
           rows={1}
-          className="flex-1 border-none outline-none resize-none font-sans text-[13px] text-gray-900 dark:text-[#F1F5F9] bg-transparent leading-[1.55] max-h-[140px] overflow-y-auto placeholder:text-gray-400 dark:placeholder:text-[#64748B]"
+          className="flex-1 border-none outline-none resize-none font-sans text-[13px] text-gray-900 dark:text-[#E4E1EA] bg-transparent leading-[1.55] max-h-[140px] overflow-y-auto placeholder:text-gray-400 dark:placeholder:text-[#64748B]"
         />
         <button
           onClick={busy ? onStop : submit}
@@ -53,10 +53,10 @@ export default function InputArea({ busy, onSend, onStop }: Props) {
           className={cn(
             'w-8 h-8 rounded-[7px] shrink-0 flex items-center justify-center transition-colors',
             busy
-              ? 'bg-gray-200 dark:bg-[#27272F] hover:bg-gray-300 dark:hover:bg-[#3F3F47]'
+              ? 'bg-gray-200 dark:bg-[#1E222B] hover:bg-gray-300 dark:hover:bg-[#2A2F3A]'
               : value.trim()
-                ? 'bg-indigo-500 dark:bg-[#818CF8] hover:bg-indigo-600 dark:hover:bg-[#6366F1]'
-                : 'bg-gray-200 dark:bg-[#27272F] cursor-default',
+                ? 'bg-indigo-500 dark:bg-[#00A3FF] hover:bg-indigo-600 dark:hover:bg-[#0086D6]'
+                : 'bg-gray-200 dark:bg-[#1E222B] cursor-default',
           )}
         >
           {busy
diff --git a/apps/frontend/src/components/LlmBackendCard.tsx b/apps/frontend/src/components/LlmBackendCard.tsx
index bd3fa7c..a438222 100644
--- a/apps/frontend/src/components/LlmBackendCard.tsx
+++ b/apps/frontend/src/components/LlmBackendCard.tsx
@@ -15,7 +15,7 @@ const SOURCE_STYLE: Record<string, { color: string; bg: string; border: string }
   groq:                { color: 'text-blue-700 dark:text-blue-300',     bg: 'bg-blue-50 dark:bg-blue-500/10',     border: 'border-blue-200 dark:border-blue-500/20' },
   custom:              { color: 'text-indigo-700 dark:text-indigo-300', bg: 'bg-indigo-50 dark:bg-indigo-500/10', border: 'border-indigo-200 dark:border-indigo-500/20' },
   claude_code_no_auth: { color: 'text-amber-700 dark:text-amber-300',  bg: 'bg-amber-50 dark:bg-amber-500/10',  border: 'border-amber-200 dark:border-amber-500/20' },
-  default:             { color: 'text-gray-500 dark:text-[#71717A]',   bg: 'bg-gray-50 dark:bg-[#18181B]',      border: 'border-gray-200 dark:border-[#27272A]' },
+  default:             { color: 'text-gray-500 dark:text-[#71717A]',   bg: 'bg-gray-50 dark:bg-[#0A0C10]',      border: 'border-gray-200 dark:border-[#1E222B]' },
 };
 
 function StatusIcon({ configured, source }: { configured: boolean; source: string }) {
diff --git a/apps/frontend/src/components/Sidebar.tsx b/apps/frontend/src/components/Sidebar.tsx
index bcd01ae..e719dd8 100644
--- a/apps/frontend/src/components/Sidebar.tsx
+++ b/apps/frontend/src/components/Sidebar.tsx
@@ -33,7 +33,7 @@ function NavItem({ to, matchPrefix, icon, label, badge, badgeRed, disabled }: Na
 
   if (disabled) {
     return (
-      <div className="w-full flex items-center gap-2 px-3.5 py-[7px] text-[14px] font-medium text-gray-300 dark:text-[#3F3F47] cursor-not-allowed select-none relative">
+      <div className="w-full flex items-center gap-2 px-3.5 py-[7px] text-[14px] font-medium text-gray-300 dark:text-[#2A2F3A] cursor-not-allowed select-none relative">
         <span className="shrink-0">{icon}</span>
         <span className="flex-1">{label}</span>
       </div>
@@ -46,12 +46,12 @@ function NavItem({ to, matchPrefix, icon, label, badge, badgeRed, disabled }: Na
       className={cn(
         'relative w-full flex items-center gap-2 px-3.5 py-[7px] text-[14px] font-medium transition-all duration-100',
         active
-          ? 'text-indigo-500 dark:text-[#818CF8] bg-indigo-50 dark:bg-[#1E1B4B]'
-          : 'text-gray-500 dark:text-[#94A3B8] hover:bg-gray-100 dark:hover:bg-[#27272F] hover:text-gray-700 dark:hover:text-[#F1F5F9]',
+          ? 'text-indigo-500 dark:text-[#00A3FF] bg-indigo-50 dark:bg-[#04103A]'
+          : 'text-gray-500 dark:text-[#94A3B8] hover:bg-gray-100 dark:hover:bg-[#1E222B] hover:text-gray-700 dark:hover:text-[#E4E1EA]',
       )}
     >
       {active && (
-        <span className="absolute left-0 inset-y-1 w-[3px] bg-indigo-500 dark:bg-[#818CF8] rounded-r" />
+        <span className="absolute left-0 inset-y-1 w-[3px] bg-indigo-500 dark:bg-[#00A3FF] rounded-r" />
       )}
       <span className="shrink-0">{icon}</span>
       <span className="flex-1">{label}</span>
@@ -60,7 +60,7 @@ function NavItem({ to, matchPrefix, icon, label, badge, badgeRed, disabled }: Na
           'text-[10px] font-semibold px-1.5 py-px rounded-full font-mono',
           badgeRed
             ? 'bg-red-50 dark:bg-[#2D1515] text-red-600 dark:text-[#F87171]'
-            : 'bg-indigo-50 dark:bg-[#1E1B4B] text-indigo-500 dark:text-[#818CF8]',
+            : 'bg-indigo-50 dark:bg-[#04103A] text-indigo-500 dark:text-[#00A3FF]',
         )}>
           {badge}
         </span>
@@ -149,17 +149,15 @@ export default function Sidebar({ sessions, hasMore, currentSessionId, onNew, on
   const cancelRename = () => setRenamingId(null);
 
   return (
-    <aside className="w-[240px] shrink-0 bg-white dark:bg-[#18181C] border-r border-gray-200 dark:border-[#27272F] flex flex-col h-full overflow-hidden">
+    <aside className="w-[240px] shrink-0 bg-white dark:bg-[#0A0C10] border-r border-gray-200 dark:border-[#1E222B] flex flex-col h-full overflow-hidden">
 
       {/* Logo */}
-      <div className="px-3.5 py-[14px] border-b border-gray-200 dark:border-[#27272F] flex items-center gap-[9px] shrink-0">
-        <div className="w-7 h-7 bg-indigo-500 rounded-[7px] flex items-center justify-center shrink-0">
-          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round">
-            <polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/>
-          </svg>
-        </div>
-        <span className="text-[16px] font-bold text-gray-900 dark:text-[#F1F5F9] tracking-[-0.02em]">OpenDevOps</span>
-        <span className="text-[10px] text-indigo-500 dark:text-[#818CF8] bg-indigo-50 dark:bg-[#1E1B4B] border border-indigo-200 dark:border-[#3730A3] rounded px-1.5 py-px font-semibold tracking-[0.04em]">
+      <div className="px-3.5 py-[14px] border-b border-gray-200 dark:border-[#1E222B] flex items-center gap-[9px] shrink-0">
+        {/* Emblem swaps by theme; wordmark shown in both. */}
+        <img src="/Emblem.svg" alt="" className="w-7 h-7 shrink-0 dark:hidden" />
+        <img src="/brand-mark.svg" alt="" className="w-7 h-7 shrink-0 hidden dark:block" />
+        <span className="text-[16px] font-bold text-gray-900 dark:text-[#E4E1EA] tracking-[-0.02em]">OpenDevOps</span>
+        <span className="text-[10px] text-indigo-500 dark:text-[#00A3FF] bg-indigo-50 dark:bg-[#04103A] border border-indigo-200 dark:border-[#0E4FA6] rounded px-1.5 py-px font-semibold tracking-[0.04em]">
           BETA
         </span>
       </div>
@@ -180,7 +178,7 @@ export default function Sidebar({ sessions, hasMore, currentSessionId, onNew, on
         </span>
         <button
           onClick={onNew}
-          className="text-gray-400 dark:text-[#64748B] hover:text-indigo-500 dark:hover:text-[#818CF8] transition-colors p-0.5 rounded"
+          className="text-gray-400 dark:text-[#64748B] hover:text-indigo-500 dark:hover:text-[#00A3FF] transition-colors p-0.5 rounded"
           title="New chat"
         >
           <Plus size={13} />
@@ -201,8 +199,8 @@ export default function Sidebar({ sessions, hasMore, currentSessionId, onNew, on
                 className={cn(
                   'group relative transition-all duration-100 border-l-2 select-none',
                   s.id === currentSessionId
-                    ? 'border-indigo-500 dark:border-[#818CF8] bg-indigo-50 dark:bg-[#1E1B4B]'
-                    : 'border-transparent hover:bg-gray-100 dark:hover:bg-[#27272F]',
+                    ? 'border-indigo-500 dark:border-[#00A3FF] bg-indigo-50 dark:bg-[#04103A]'
+                    : 'border-transparent hover:bg-gray-100 dark:hover:bg-[#1E222B]',
                 )}
               >
                 {renamingId === s.id ? (
@@ -217,7 +215,7 @@ export default function Sidebar({ sessions, hasMore, currentSessionId, onNew, on
                         if (e.key === 'Escape') cancelRename();
                       }}
                       onBlur={commitRename}
-                      className="w-full text-[14px] bg-white dark:bg-[#27272F] border border-indigo-400 dark:border-[#818CF8] rounded px-2 py-0.5 text-gray-900 dark:text-[#F1F5F9] outline-none"
+                      className="w-full text-[14px] bg-white dark:bg-[#1E222B] border border-indigo-400 dark:border-[#00A3FF] rounded px-2 py-0.5 text-gray-900 dark:text-[#E4E1EA] outline-none"
                     />
                   </div>
                 ) : (
@@ -229,7 +227,7 @@ export default function Sidebar({ sessions, hasMore, currentSessionId, onNew, on
                   >
                     <span className={cn(
                       'text-[14px] truncate',
-                      s.id === currentSessionId ? 'font-medium text-gray-900 dark:text-[#F1F5F9]' : 'text-gray-700 dark:text-[#CBD5E1]',
+                      s.id === currentSessionId ? 'font-medium text-gray-900 dark:text-[#E4E1EA]' : 'text-gray-700 dark:text-[#CBD5E1]',
                     )}>
                       {s.title ?? 'Untitled session'}
                     </span>
@@ -246,7 +244,7 @@ export default function Sidebar({ sessions, hasMore, currentSessionId, onNew, on
                       onClick={e => openMenu(e, s.id)}
                       className={cn(
                         'p-1 rounded transition-colors text-gray-400 dark:text-[#64748B]',
-                        'hover:text-gray-600 dark:hover:text-[#94A3B8] hover:bg-gray-200 dark:hover:bg-[#3F3F47]',
+                        'hover:text-gray-600 dark:hover:text-[#94A3B8] hover:bg-gray-200 dark:hover:bg-[#2A2F3A]',
                         'opacity-0 group-hover:opacity-100',
                         openMenuId === s.id && 'opacity-100',
                       )}
@@ -262,7 +260,7 @@ export default function Sidebar({ sessions, hasMore, currentSessionId, onNew, on
             {hasMore && (
               <button
                 onClick={onLoadMore}
-                className="w-full flex items-center justify-center gap-1.5 px-3.5 py-2 text-[12px] text-gray-400 dark:text-[#64748B] hover:text-indigo-500 dark:hover:text-[#818CF8] transition-colors"
+                className="w-full flex items-center justify-center gap-1.5 px-3.5 py-2 text-[12px] text-gray-400 dark:text-[#64748B] hover:text-indigo-500 dark:hover:text-[#00A3FF] transition-colors"
               >
                 <ChevronDown size={13} />
                 Load more
@@ -273,22 +271,22 @@ export default function Sidebar({ sessions, hasMore, currentSessionId, onNew, on
       </div>
 
       {/* Bottom nav */}
-      <div className="border-t border-gray-200 dark:border-[#27272F] pt-1 shrink-0">
+      <div className="border-t border-gray-200 dark:border-[#1E222B] pt-1 shrink-0">
         {isAdmin && <NavItem to="/users" icon={<Users size={14} />} label="Team" />}
         <NavItem to="/settings" icon={<Settings size={14} />} label="Settings" />
       </div>
 
       {/* User footer */}
-      <div className="flex items-center gap-2 px-3.5 py-2.5 border-t border-gray-200 dark:border-[#27272F] shrink-0">
+      <div className="flex items-center gap-2 px-3.5 py-2.5 border-t border-gray-200 dark:border-[#1E222B] shrink-0">
         <div
-          className="flex items-center gap-2 flex-1 min-w-0 cursor-pointer hover:bg-gray-50 dark:hover:bg-[#27272F] rounded-md px-1 py-0.5 transition-colors"
+          className="flex items-center gap-2 flex-1 min-w-0 cursor-pointer hover:bg-gray-50 dark:hover:bg-[#1E222B] rounded-md px-1 py-0.5 transition-colors"
           onClick={() => navigate('/settings')}
         >
           <div className="w-[26px] h-[26px] rounded-full bg-indigo-500 flex items-center justify-center text-white text-[10px] font-semibold shrink-0">
             {displayName.slice(0, 2).toUpperCase()}
           </div>
           <div className="flex-1 min-w-0">
-            <div className="text-[13px] font-medium text-gray-900 dark:text-[#F1F5F9] truncate">{displayName}</div>
+            <div className="text-[13px] font-medium text-gray-900 dark:text-[#E4E1EA] truncate">{displayName}</div>
             <div className="text-[12px] text-gray-400 dark:text-[#64748B]">{displayRole}</div>
           </div>
         </div>
@@ -306,14 +304,14 @@ export default function Sidebar({ sessions, hasMore, currentSessionId, onNew, on
         <div
           ref={menuRef}
           style={{ position: 'fixed', top: menuPos.top, left: menuPos.left - 140 }}
-          className="z-[9999] bg-white dark:bg-[#1E1E24] border border-gray-200 dark:border-[#27272F] rounded-lg shadow-lg py-1 min-w-[140px]"
+          className="z-[9999] bg-white dark:bg-[#15181F] border border-gray-200 dark:border-[#1E222B] rounded-lg shadow-lg py-1 min-w-[140px]"
         >
           <button
             onClick={() => {
               const session = sessions.find(s => s.id === openMenuId);
               if (session) startRename(session);
             }}
-            className="w-full flex items-center gap-2 px-3 py-[7px] text-[14px] text-gray-700 dark:text-[#CBD5E1] hover:bg-gray-100 dark:hover:bg-[#27272F] transition-colors"
+            className="w-full flex items-center gap-2 px-3 py-[7px] text-[14px] text-gray-700 dark:text-[#CBD5E1] hover:bg-gray-100 dark:hover:bg-[#1E222B] transition-colors"
           >
             <Pencil size={13} />
             Rename
diff --git a/apps/frontend/src/components/ToolCallsBox.tsx b/apps/frontend/src/components/ToolCallsBox.tsx
index 5c501f5..57d2984 100644
--- a/apps/frontend/src/components/ToolCallsBox.tsx
+++ b/apps/frontend/src/components/ToolCallsBox.tsx
@@ -12,13 +12,13 @@ export default function ToolCallsBox({ calls, streaming }: Props) {
   const [open, setOpen] = useState(false);
 
   return (
-    <div className="shrink-0 border border-gray-200 dark:border-[#27272F] rounded-[7px] overflow-hidden text-xs">
+    <div className="shrink-0 border border-gray-200 dark:border-[#1E222B] rounded-[7px] overflow-hidden text-xs">
       <div
-        className="flex items-center gap-2 px-2.5 py-[5px] bg-gray-100 dark:bg-[#1E1E24] cursor-pointer hover:bg-gray-200/60 dark:hover:bg-[#27272F] transition-colors select-none"
+        className="flex items-center gap-2 px-2.5 py-[5px] bg-gray-100 dark:bg-[#15181F] cursor-pointer hover:bg-gray-200/60 dark:hover:bg-[#1E222B] transition-colors select-none"
         onClick={() => setOpen(o => !o)}
       >
-        <Wrench size={11} className="text-indigo-500 dark:text-[#818CF8] shrink-0" />
-        <span className="text-indigo-500 dark:text-[#818CF8] font-semibold font-mono">{calls.length}</span>
+        <Wrench size={11} className="text-indigo-500 dark:text-[#00A3FF] shrink-0" />
+        <span className="text-indigo-500 dark:text-[#00A3FF] font-semibold font-mono">{calls.length}</span>
         <span className="text-gray-500 dark:text-[#94A3B8]">tool calls</span>
         <ChevronDown
           size={10}
@@ -29,21 +29,21 @@ export default function ToolCallsBox({ calls, streaming }: Props) {
       {open && (
         <div className="flex flex-col">
           {calls.map((tc, i) => (
-            <div key={i} className="border-t border-gray-200 dark:border-[#27272F] p-2.5 flex flex-col gap-2">
+            <div key={i} className="border-t border-gray-200 dark:border-[#1E222B] p-2.5 flex flex-col gap-2">
               <div className="font-mono font-semibold flex items-center gap-1.5 text-[11px]" style={{ color: '#FBBF24' }}>
-                <span className="w-[5px] h-[5px] rounded-full bg-indigo-500 dark:bg-[#818CF8] shrink-0" />
+                <span className="w-[5px] h-[5px] rounded-full bg-indigo-500 dark:bg-[#00A3FF] shrink-0" />
                 {tc.tool}
               </div>
               <div className="flex flex-col gap-1.5">
                 <span className="text-[10px] uppercase tracking-[0.07em] font-semibold text-gray-400 dark:text-[#64748B]">Input</span>
-                <pre className="font-mono text-[11px] bg-gray-50 dark:bg-[#18181C] border border-gray-200 dark:border-[#27272F] rounded-[5px] px-2.5 py-1.5 text-gray-500 dark:text-[#94A3B8] overflow-auto max-h-24 leading-snug whitespace-pre">
+                <pre className="font-mono text-[11px] bg-gray-50 dark:bg-[#0A0C10] border border-gray-200 dark:border-[#1E222B] rounded-[5px] px-2.5 py-1.5 text-gray-500 dark:text-[#94A3B8] overflow-auto max-h-24 leading-snug whitespace-pre">
                   {fmtJson(tc.args)}
                 </pre>
               </div>
               {tc.result != null && (
                 <div className="flex flex-col gap-1.5">
                   <span className="text-[10px] uppercase tracking-[0.07em] font-semibold text-gray-400 dark:text-[#64748B]">Output</span>
-                  <pre className="font-mono text-[11px] bg-gray-50 dark:bg-[#18181C] border border-gray-200 dark:border-[#27272F] rounded-[5px] px-2.5 py-1.5 text-gray-500 dark:text-[#94A3B8] overflow-auto max-h-32 leading-snug whitespace-pre">
+                  <pre className="font-mono text-[11px] bg-gray-50 dark:bg-[#0A0C10] border border-gray-200 dark:border-[#1E222B] rounded-[5px] px-2.5 py-1.5 text-gray-500 dark:text-[#94A3B8] overflow-auto max-h-32 leading-snug whitespace-pre">
                     {fmtJson(tc.result)}
                   </pre>
                 </div>
@@ -52,7 +52,7 @@ export default function ToolCallsBox({ calls, streaming }: Props) {
           ))}
 
           {streaming && (
-            <div className="border-t border-gray-200 dark:border-[#27272F] px-2.5 py-2 flex items-center gap-2 text-gray-400 dark:text-[#64748B]">
+            <div className="border-t border-gray-200 dark:border-[#1E222B] px-2.5 py-2 flex items-center gap-2 text-gray-400 dark:text-[#64748B]">
               <div className="spinner-dots"><span /><span /><span /></div>
               <span>Running tools…</span>
             </div>
diff --git a/apps/frontend/src/components/UsageBox.tsx b/apps/frontend/src/components/UsageBox.tsx
index 8cb8505..ee0f9dd 100644
--- a/apps/frontend/src/components/UsageBox.tsx
+++ b/apps/frontend/src/components/UsageBox.tsx
@@ -13,16 +13,16 @@ export default function UsageBox({ usage }: Props) {
   const cost = calcCost(usage.cost_usd);
 
   return (
-    <div className="shrink-0 border border-gray-200 dark:border-[#27272F] rounded-[7px] overflow-hidden text-xs min-w-[140px]">
+    <div className="shrink-0 border border-gray-200 dark:border-[#1E222B] rounded-[7px] overflow-hidden text-xs min-w-[140px]">
       <div
-        className="flex items-center gap-1.5 px-2.5 py-[5px] bg-gray-100 dark:bg-[#1E1E24] cursor-pointer hover:bg-gray-200/60 dark:hover:bg-[#27272F] transition-colors select-none whitespace-nowrap"
+        className="flex items-center gap-1.5 px-2.5 py-[5px] bg-gray-100 dark:bg-[#15181F] cursor-pointer hover:bg-gray-200/60 dark:hover:bg-[#1E222B] transition-colors select-none whitespace-nowrap"
         onClick={() => setOpen(o => !o)}
       >
         <Zap size={11} className="text-gray-400 dark:text-[#64748B] shrink-0" />
         <span className="text-gray-700 dark:text-[#CBD5E1] font-mono text-[11px]">
-          <strong className="text-gray-900 dark:text-[#F1F5F9] font-semibold">{secs}</strong>
+          <strong className="text-gray-900 dark:text-[#E4E1EA] font-semibold">{secs}</strong>
           {cost && (
-            <> · <strong className="text-indigo-500 dark:text-[#818CF8] font-semibold">${cost.total.toFixed(4)}</strong></>
+            <> · <strong className="text-indigo-500 dark:text-[#00A3FF] font-semibold">${cost.total.toFixed(4)}</strong></>
           )}
         </span>
         <ChevronDown
@@ -32,7 +32,7 @@ export default function UsageBox({ usage }: Props) {
       </div>
 
       {open && (
-        <div className="flex flex-col gap-1.5 p-2.5 border-t border-gray-200 dark:border-[#27272F] bg-white dark:bg-[#18181C]">
+        <div className="flex flex-col gap-1.5 p-2.5 border-t border-gray-200 dark:border-[#1E222B] bg-white dark:bg-[#0A0C10]">
           {[
             { label: 'Latency',       value: secs },
             { label: 'In tokens',     value: fmtTok(usage.input_tokens) },
@@ -40,18 +40,18 @@ export default function UsageBox({ usage }: Props) {
           ].map(row => (
             <div key={row.label} className="flex justify-between items-center gap-4">
               <span className="text-[10px] uppercase tracking-[0.08em] text-gray-400 dark:text-[#64748B]">{row.label}</span>
-              <span className="font-mono text-[11px] text-gray-900 dark:text-[#F1F5F9] font-medium">{row.value}</span>
+              <span className="font-mono text-[11px] text-gray-900 dark:text-[#E4E1EA] font-medium">{row.value}</span>
             </div>
           ))}
 
           {cost && (
-            <div className="flex justify-between items-center gap-4 pt-1.5 border-t border-gray-200 dark:border-[#27272F]">
+            <div className="flex justify-between items-center gap-4 pt-1.5 border-t border-gray-200 dark:border-[#1E222B]">
               <span className="text-[10px] uppercase tracking-[0.08em] text-gray-400 dark:text-[#64748B]">Cost</span>
-              <span className="font-mono text-[11px] text-indigo-500 dark:text-[#818CF8] font-semibold">{fmtCost(cost.total)}</span>
+              <span className="font-mono text-[11px] text-indigo-500 dark:text-[#00A3FF] font-semibold">{fmtCost(cost.total)}</span>
             </div>
           )}
 
-          <div className="text-[10px] text-gray-400 dark:text-[#64748B] font-mono mt-0.5 break-all border-t border-gray-200 dark:border-[#27272F] pt-1.5">
+          <div className="text-[10px] text-gray-400 dark:text-[#64748B] font-mono mt-0.5 break-all border-t border-gray-200 dark:border-[#1E222B] pt-1.5">
             {usage.model}
           </div>
         </div>
diff --git a/apps/frontend/src/components/UserMessage.tsx b/apps/frontend/src/components/UserMessage.tsx
index d337a9b..ace4044 100644
--- a/apps/frontend/src/components/UserMessage.tsx
+++ b/apps/frontend/src/components/UserMessage.tsx
@@ -5,7 +5,7 @@ interface Props {
 export default function UserMessage({ content }: Props) {
   return (
     <div className="flex justify-end" style={{ animation: 'fadeIn 200ms ease' }}>
-      <div className="max-w-[580px] bg-indigo-500 dark:bg-[#4F46E5] rounded-[10px] rounded-tr-[2px] px-3.5 py-2.5 text-[16px] text-white leading-relaxed break-words">
+      <div className="max-w-[580px] bg-indigo-500 dark:bg-[#010978] rounded-[10px] rounded-tr-[2px] px-3.5 py-2.5 text-[16px] text-white leading-relaxed break-words">
         {content}
       </div>
     </div>
diff --git a/apps/frontend/src/context/ThemeContext.tsx b/apps/frontend/src/context/ThemeContext.tsx
index add6f68..d0b01d2 100644
--- a/apps/frontend/src/context/ThemeContext.tsx
+++ b/apps/frontend/src/context/ThemeContext.tsx
@@ -3,11 +3,11 @@ import { createContext, useContext, useEffect, useState } from 'react';
 type Theme = 'light' | 'dark';
 interface ThemeCtx { theme: Theme; toggle: () => void; }
 
-const Ctx = createContext<ThemeCtx>({ theme: 'light', toggle: () => {} });
+const Ctx = createContext<ThemeCtx>({ theme: 'dark', toggle: () => {} });
 
 export function ThemeProvider({ children }: { children: React.ReactNode }) {
   const [theme, setTheme] = useState<Theme>(() =>
-    localStorage.getItem('theme') === 'dark' ? 'dark' : 'light'
+    localStorage.getItem('theme') === 'light' ? 'light' : 'dark'
   );
 
   useEffect(() => {
diff --git a/apps/frontend/src/index.css b/apps/frontend/src/index.css
index e85a04c..794cd62 100644
--- a/apps/frontend/src/index.css
+++ b/apps/frontend/src/index.css
@@ -5,6 +5,7 @@
 @layer base {
   html { height: 100%; }
   body { @apply bg-gray-50 text-gray-900 h-full overflow-hidden; -webkit-font-smoothing: antialiased; }
+  .dark body { @apply bg-black text-[#E4E1EA]; }
   #root { @apply h-full overflow-hidden; }
 }
 
@@ -32,7 +33,7 @@
 ::-webkit-scrollbar { width: 4px; height: 4px; }
 ::-webkit-scrollbar-track { background: transparent; }
 ::-webkit-scrollbar-thumb { @apply bg-gray-300 rounded-full; }
-.dark ::-webkit-scrollbar-thumb { background: #3F3F47; border-radius: 9999px; }
+.dark ::-webkit-scrollbar-thumb { background: #2A2F3A; border-radius: 9999px; }
 
 /* Prose for agent messages — light theme */
 .prose-chat {
@@ -48,11 +49,11 @@
 
 /* Dark prose overrides */
 .dark .prose-chat {
-  @apply prose-headings:text-[#F1F5F9] prose-strong:text-[#F1F5F9];
-  @apply prose-code:text-[#818CF8] prose-code:bg-[#1E1B4B] prose-code:border-[#3730A3];
-  @apply prose-pre:bg-[#18181C] prose-pre:border-[#27272F];
+  @apply prose-headings:text-[#E4E1EA] prose-strong:text-[#E4E1EA];
+  @apply prose-code:text-[#00A3FF] prose-code:bg-[#04103A] prose-code:border-[#0E4FA6];
+  @apply prose-pre:bg-[#0A0C10] prose-pre:border-[#1E222B];
   @apply prose-blockquote:text-[#94A3B8];
-  @apply prose-a:text-[#818CF8];
-  @apply prose-th:bg-[#1E1E24];
+  @apply prose-a:text-[#00A3FF];
+  @apply prose-th:bg-[#15181F];
   color: #CBD5E1;
 }
diff --git a/apps/frontend/src/main.tsx b/apps/frontend/src/main.tsx
index caab1db..afdf191 100644
--- a/apps/frontend/src/main.tsx
+++ b/apps/frontend/src/main.tsx
@@ -17,9 +17,9 @@ createRoot(document.getElementById('root')!).render(
             position="bottom-right"
             toastOptions={{
               style: {
-                background: '#ffffff',
-                border: '1px solid #E5E7EB',
-                color: '#111827',
+                background: '#15181F',
+                border: '1px solid #1E222B',
+                color: '#E4E1EA',
               },
             }}
           />
diff --git a/apps/frontend/src/pages/AlertDetailPage.tsx b/apps/frontend/src/pages/AlertDetailPage.tsx
index 80cc3f3..184e312 100644
--- a/apps/frontend/src/pages/AlertDetailPage.tsx
+++ b/apps/frontend/src/pages/AlertDetailPage.tsx
@@ -76,7 +76,7 @@ export default function AlertDetailPage() {
   if (!alert) return null;
 
   return (
-    <div className="flex-1 overflow-y-auto bg-white dark:bg-[#09090B]">
+    <div className="flex-1 overflow-y-auto bg-white dark:bg-[#000000]">
       <div className="max-w-3xl mx-auto px-6 py-8">
 
         <button onClick={() => navigate('/monitoring')}
@@ -103,14 +103,14 @@ export default function AlertDetailPage() {
                   'text-xs font-bold px-2 py-0.5 rounded',
                   alert.confidence === 'HIGH' ? 'bg-red-100 dark:bg-red-500/10 text-red-600 dark:text-red-400' :
                   alert.confidence === 'MEDIUM' ? 'bg-amber-100 dark:bg-amber-500/10 text-amber-600 dark:text-amber-400' :
-                  'bg-gray-100 dark:bg-[#27272A] text-gray-500 dark:text-[#71717A]'
+                  'bg-gray-100 dark:bg-[#1E222B] text-gray-500 dark:text-[#71717A]'
                 )}>{alert.confidence}</span>
               )}
             </div>
             <div className="flex items-center gap-4 text-sm text-gray-500 dark:text-[#71717A]">
               <span className="flex items-center gap-1"><Clock size={12} /> {new Date(alert.timestamp.includes('Z') || alert.timestamp.includes('+') ? alert.timestamp : alert.timestamp + 'Z').toLocaleString()}</span>
               {alert.trigger_source && (
-                <span className="flex items-center gap-1.5 text-[12px] font-medium px-2 py-0.5 rounded-full bg-gray-100 dark:bg-[#27272A] text-gray-600 dark:text-[#94A3B8]">
+                <span className="flex items-center gap-1.5 text-[12px] font-medium px-2 py-0.5 rounded-full bg-gray-100 dark:bg-[#1E222B] text-gray-600 dark:text-[#94A3B8]">
                   {alert.trigger_source === 'poller' ? '⏱ Poller' : '⚡ Event consumer'}
                 </span>
               )}
@@ -162,7 +162,7 @@ export default function AlertDetailPage() {
         {alert.notifications && alert.notifications.length > 0 && (
           <section className="mb-6">
             <h2 className="text-xs font-semibold text-gray-500 dark:text-[#71717A] uppercase tracking-wider mb-3">Notified via</h2>
-            <div className="bg-gray-50 dark:bg-[#18181B] border border-gray-200 dark:border-[#27272A] rounded-xl px-4 py-3 space-y-2.5">
+            <div className="bg-gray-50 dark:bg-[#0A0C10] border border-gray-200 dark:border-[#1E222B] rounded-xl px-4 py-3 space-y-2.5">
               {alert.notifications.map((n, i) => (
                 <NotificationRow key={i} n={n} />
               ))}
diff --git a/apps/frontend/src/pages/ChatPage.tsx b/apps/frontend/src/pages/ChatPage.tsx
index cdb4e8b..2589d39 100644
--- a/apps/frontend/src/pages/ChatPage.tsx
+++ b/apps/frontend/src/pages/ChatPage.tsx
@@ -176,16 +176,16 @@ export default function ChatPage({ onSessionsChange, onNew }: Props) {
   if (!sessionId) return <Navigate to="/" replace />;
 
   return (
-    <div className="flex-1 flex flex-col overflow-hidden min-h-0 bg-white dark:bg-[#0F0F12]">
+    <div className="flex-1 flex flex-col overflow-hidden min-h-0 bg-white dark:bg-[#000000]">
       {/* Chat sub-header */}
-      <div className="px-5 py-2.5 border-b border-gray-200 dark:border-[#27272F] bg-white dark:bg-[#18181C] flex items-center gap-2.5 shrink-0">
-        <div className="w-[30px] h-[30px] bg-indigo-50 dark:bg-[#1E1B4B] rounded-lg flex items-center justify-center text-sm shrink-0 select-none">
+      <div className="px-5 py-2.5 border-b border-gray-200 dark:border-[#1E222B] bg-white dark:bg-[#0A0C10] flex items-center gap-2.5 shrink-0">
+        <div className="w-[30px] h-[30px] bg-indigo-50 dark:bg-[#04103A] rounded-lg flex items-center justify-center text-sm shrink-0 select-none">
           ⚡
         </div>
         <div>
-          <div className="text-[13px] font-semibold text-gray-900 dark:text-[#F1F5F9]">DevOps Agent</div>
-          <div className="text-[11px] text-emerald-500 dark:text-[#34D399] flex items-center gap-1">
-            <span className="w-[5px] h-[5px] rounded-full bg-emerald-500 dark:bg-[#34D399] inline-block" />
+          <div className="text-[13px] font-semibold text-gray-900 dark:text-[#E4E1EA]">DevOps Agent</div>
+          <div className="text-[11px] text-emerald-500 dark:text-[#00A3FF] flex items-center gap-1">
+            <span className="w-[5px] h-[5px] rounded-full bg-emerald-500 dark:bg-[#00A3FF] inline-block" />
             Active
           </div>
         </div>
@@ -218,7 +218,7 @@ export default function ChatPage({ onSessionsChange, onNew }: Props) {
             <button
               key={i}
               onClick={() => send(q)}
-              className="text-[13px] px-3 py-1.5 rounded-full border border-indigo-200 dark:border-[#3730A3] bg-indigo-50 dark:bg-[#1E1B4B] text-indigo-600 dark:text-[#818CF8] hover:bg-indigo-100 dark:hover:bg-[#2D2B5C] transition-colors"
+              className="text-[13px] px-3 py-1.5 rounded-full border border-indigo-200 dark:border-[#0E4FA6] bg-indigo-50 dark:bg-[#04103A] text-indigo-600 dark:text-[#00A3FF] hover:bg-indigo-100 dark:hover:bg-[#071A57] transition-colors"
             >
               {q}
             </button>
diff --git a/apps/frontend/src/pages/DashboardPage.tsx b/apps/frontend/src/pages/DashboardPage.tsx
index 5e23bc5..3370228 100644
--- a/apps/frontend/src/pages/DashboardPage.tsx
+++ b/apps/frontend/src/pages/DashboardPage.tsx
@@ -51,12 +51,12 @@ function StatCard({
   label, value, sub, icon, accent = false,
 }: { label: string; value: string | number; sub?: string; icon: React.ReactNode; accent?: boolean }) {
   return (
-    <div className="bg-white dark:bg-[#18181C] border border-gray-200 dark:border-[#27272F] rounded-lg p-[18px] shadow-[0_1px_2px_rgba(0,0,0,0.04)]">
+    <div className="bg-white dark:bg-[#0A0C10] border border-gray-200 dark:border-[#1E222B] rounded-lg p-[18px] shadow-[0_1px_2px_rgba(0,0,0,0.04)]">
       <div className="flex items-center justify-between mb-1">
         <span className="text-xs text-gray-500 dark:text-[#94A3B8] uppercase tracking-[0.07em] font-semibold">{label}</span>
-        <span className={cn('text-gray-400 dark:text-[#64748B]', accent && 'text-emerald-500 dark:text-[#34D399]')}>{icon}</span>
+        <span className={cn('text-gray-400 dark:text-[#64748B]', accent && 'text-emerald-500 dark:text-[#00A3FF]')}>{icon}</span>
       </div>
-      <div className={cn('text-[28px] font-bold leading-none tracking-[-0.03em] mt-1', accent ? 'text-emerald-500 dark:text-[#34D399]' : 'text-gray-900 dark:text-[#F1F5F9]')}>
+      <div className={cn('text-[28px] font-bold leading-none tracking-[-0.03em] mt-1', accent ? 'text-emerald-500 dark:text-[#00A3FF]' : 'text-gray-900 dark:text-[#E4E1EA]')}>
         {value}
       </div>
       {sub && <div className="text-[12px] text-gray-500 dark:text-[#94A3B8] mt-1.5">{sub}</div>}
@@ -115,11 +115,11 @@ export default function DashboardPage() {
   const totalRc = root_causes.reduce((s, r) => s + r.count, 0) || 1;
 
   return (
-    <div className="flex-1 overflow-y-auto bg-gray-50 dark:bg-[#0F0F12] min-h-0">
+    <div className="flex-1 overflow-y-auto bg-gray-50 dark:bg-[#000000] min-h-0">
       {/* Page header */}
-      <div className="bg-white dark:bg-[#18181C] border-b border-gray-200 dark:border-[#27272F] px-7 py-[14px] flex items-center justify-between shrink-0">
+      <div className="bg-white dark:bg-[#0A0C10] border-b border-gray-200 dark:border-[#1E222B] px-7 py-[14px] flex items-center justify-between shrink-0">
         <div>
-          <div className="text-[16px] font-bold text-gray-900 dark:text-[#F1F5F9] tracking-[-0.02em]">Dashboard</div>
+          <div className="text-[16px] font-bold text-gray-900 dark:text-[#E4E1EA] tracking-[-0.02em]">Dashboard</div>
           <div className="text-[13px] text-gray-500 dark:text-[#94A3B8] mt-0.5">Usage analytics and investigation history.</div>
         </div>
       </div>
@@ -169,7 +169,7 @@ export default function DashboardPage() {
         )}
 
         {/* Activity chart */}
-        <div className="bg-white dark:bg-[#18181C] border border-gray-200 dark:border-[#27272F] rounded-lg p-4 shadow-[0_1px_2px_rgba(0,0,0,0.04)]">
+        <div className="bg-white dark:bg-[#0A0C10] border border-gray-200 dark:border-[#1E222B] rounded-lg p-4 shadow-[0_1px_2px_rgba(0,0,0,0.04)]">
           <h2 className="text-[11px] font-semibold text-gray-400 dark:text-[#64748B] uppercase tracking-[0.07em] mb-4">
             Activity — last 14 days
           </h2>
@@ -179,12 +179,12 @@ export default function DashboardPage() {
                 <div
                   className={cn(
                     'w-full rounded-sm transition-colors',
-                    d.sessions > 0 ? 'bg-indigo-400 dark:bg-[#818CF8] hover:bg-indigo-500 dark:hover:bg-[#6366F1]' : 'bg-gray-100 dark:bg-[#27272F]',
+                    d.sessions > 0 ? 'bg-indigo-400 dark:bg-[#00A3FF] hover:bg-indigo-500 dark:hover:bg-[#0086D6]' : 'bg-gray-100 dark:bg-[#1E222B]',
                   )}
                   style={{ height: `${Math.max((d.sessions / maxActivity) * 100, d.sessions > 0 ? 12 : 4)}%` }}
                 />
                 {d.sessions > 0 && (
-                  <div className="absolute bottom-full mb-1 left-1/2 -translate-x-1/2 hidden group-hover:block bg-white dark:bg-[#1E1E24] border border-gray-200 dark:border-[#27272F] shadow-sm text-xs text-gray-700 dark:text-[#CBD5E1] px-1.5 py-0.5 rounded whitespace-nowrap z-10">
+                  <div className="absolute bottom-full mb-1 left-1/2 -translate-x-1/2 hidden group-hover:block bg-white dark:bg-[#15181F] border border-gray-200 dark:border-[#1E222B] shadow-sm text-xs text-gray-700 dark:text-[#CBD5E1] px-1.5 py-0.5 rounded whitespace-nowrap z-10">
                     {d.date.slice(5)} · {d.sessions} session{d.sessions !== 1 ? 's' : ''}
                   </div>
                 )}
@@ -201,7 +201,7 @@ export default function DashboardPage() {
         <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
 
           {/* Service breakdown */}
-          <div className="bg-white dark:bg-[#18181C] border border-gray-200 dark:border-[#27272F] rounded-lg p-4 shadow-[0_1px_2px_rgba(0,0,0,0.04)]">
+          <div className="bg-white dark:bg-[#0A0C10] border border-gray-200 dark:border-[#1E222B] rounded-lg p-4 shadow-[0_1px_2px_rgba(0,0,0,0.04)]">
             <h2 className="text-[11px] font-semibold text-gray-400 dark:text-[#64748B] uppercase tracking-[0.07em] mb-4">Calls by service</h2>
             {service_breakdown.length === 0 ? (
               <p className="text-sm text-gray-400 dark:text-[#64748B] py-6 text-center">No tool calls yet</p>
@@ -210,7 +210,7 @@ export default function DashboardPage() {
                 {service_breakdown.map(s => (
                   <div key={s.service} className="flex items-center gap-3">
                     <span className="w-24 text-xs text-gray-500 dark:text-[#94A3B8] shrink-0">{s.service}</span>
-                    <div className="flex-1 bg-gray-100 dark:bg-[#27272F] rounded-full h-1.5">
+                    <div className="flex-1 bg-gray-100 dark:bg-[#1E222B] rounded-full h-1.5">
                       <div
                         className={cn('h-1.5 rounded-full', SERVICE_COLORS[s.service] ?? 'bg-gray-400')}
                         style={{ width: `${s.pct}%` }}
@@ -224,7 +224,7 @@ export default function DashboardPage() {
           </div>
 
           {/* Root cause distribution */}
-          <div className="bg-white dark:bg-[#18181C] border border-gray-200 dark:border-[#27272F] rounded-lg p-4 shadow-[0_1px_2px_rgba(0,0,0,0.04)]">
+          <div className="bg-white dark:bg-[#0A0C10] border border-gray-200 dark:border-[#1E222B] rounded-lg p-4 shadow-[0_1px_2px_rgba(0,0,0,0.04)]">
             <h2 className="text-[11px] font-semibold text-gray-400 dark:text-[#64748B] uppercase tracking-[0.07em] mb-4">
               Recurring incident types
             </h2>
@@ -241,9 +241,9 @@ export default function DashboardPage() {
                       <span className={cn('w-36 text-xs shrink-0 font-medium', meta.color)}>
                         {meta.label}
                       </span>
-                      <div className="flex-1 bg-gray-100 dark:bg-[#27272F] rounded-full h-1.5">
+                      <div className="flex-1 bg-gray-100 dark:bg-[#1E222B] rounded-full h-1.5">
                         <div
-                          className="h-1.5 rounded-full bg-indigo-400 dark:bg-[#818CF8]"
+                          className="h-1.5 rounded-full bg-indigo-400 dark:bg-[#00A3FF]"
                           style={{ width: `${(rc.count / totalRc) * 100}%` }}
                         />
                       </div>
@@ -259,12 +259,12 @@ export default function DashboardPage() {
         <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
 
           {/* Top tools */}
-          <div className="bg-white dark:bg-[#18181C] border border-gray-200 dark:border-[#27272F] rounded-lg p-4 shadow-[0_1px_2px_rgba(0,0,0,0.04)]">
+          <div className="bg-white dark:bg-[#0A0C10] border border-gray-200 dark:border-[#1E222B] rounded-lg p-4 shadow-[0_1px_2px_rgba(0,0,0,0.04)]">
             <h2 className="text-[11px] font-semibold text-gray-400 dark:text-[#64748B] uppercase tracking-[0.07em] mb-3">Top tools</h2>
             {top_tools.length === 0 ? (
               <p className="text-sm text-gray-400 dark:text-[#64748B] py-4 text-center">No tool calls yet</p>
             ) : (
-              <div className="flex flex-col divide-y divide-gray-100 dark:divide-[#27272F]">
+              <div className="flex flex-col divide-y divide-gray-100 dark:divide-[#1E222B]">
                 {top_tools.slice(0, 8).map(t => (
                   <div key={t.tool} className="flex items-center gap-3 py-2 first:pt-0 last:pb-0">
                     <span className="flex-1 font-mono text-xs text-amber-500 truncate">{t.tool}</span>
@@ -281,12 +281,12 @@ export default function DashboardPage() {
           </div>
 
           {/* Recent sessions */}
-          <div className="bg-white dark:bg-[#18181C] border border-gray-200 dark:border-[#27272F] rounded-lg p-4 shadow-[0_1px_2px_rgba(0,0,0,0.04)]">
+          <div className="bg-white dark:bg-[#0A0C10] border border-gray-200 dark:border-[#1E222B] rounded-lg p-4 shadow-[0_1px_2px_rgba(0,0,0,0.04)]">
             <h2 className="text-[11px] font-semibold text-gray-400 dark:text-[#64748B] uppercase tracking-[0.07em] mb-3">Recent sessions</h2>
             {recent_sessions.length === 0 ? (
               <p className="text-sm text-gray-400 dark:text-[#64748B] py-4 text-center">No sessions yet</p>
             ) : (
-              <div className="flex flex-col divide-y divide-gray-100 dark:divide-[#27272F]">
+              <div className="flex flex-col divide-y divide-gray-100 dark:divide-[#1E222B]">
                 {recent_sessions.map(s => (
                   <Link
                     key={s.id}
@@ -294,7 +294,7 @@ export default function DashboardPage() {
                     className="flex flex-col gap-0.5 py-2 first:pt-0 last:pb-0 group"
                   >
                     <div className="flex items-center justify-between gap-2">
-                      <span className="text-[14px] text-gray-700 dark:text-[#CBD5E1] truncate group-hover:text-indigo-500 dark:group-hover:text-[#818CF8] transition-colors font-medium">
+                      <span className="text-[14px] text-gray-700 dark:text-[#CBD5E1] truncate group-hover:text-indigo-500 dark:group-hover:text-[#00A3FF] transition-colors font-medium">
                         {s.title ?? 'Untitled'}
                       </span>
                       <span className="text-[10px] text-gray-400 dark:text-[#64748B] shrink-0 flex items-center gap-1">
@@ -321,10 +321,10 @@ export default function DashboardPage() {
             { label: 'Output tokens', value: fmtTok(summary.total_output_tokens), icon: <Zap size={12} /> },
             { label: 'Tool errors',   value: summary.total_tool_errors || '0',     icon: <AlertTriangle size={12} /> },
           ].map(item => (
-            <div key={item.label} className="bg-white dark:bg-[#18181C] border border-gray-200 dark:border-[#27272F] rounded-lg px-4 py-3 flex items-center justify-between shadow-[0_1px_2px_rgba(0,0,0,0.04)]">
+            <div key={item.label} className="bg-white dark:bg-[#0A0C10] border border-gray-200 dark:border-[#1E222B] rounded-lg px-4 py-3 flex items-center justify-between shadow-[0_1px_2px_rgba(0,0,0,0.04)]">
               <span className="text-xs text-gray-500 dark:text-[#94A3B8]">{item.label}</span>
               <div className="flex items-center gap-1.5">
-                <span className="text-gray-300 dark:text-[#3F3F47]">{item.icon}</span>
+                <span className="text-gray-300 dark:text-[#2A2F3A]">{item.icon}</span>
                 <span className="text-[13px] font-mono font-medium text-gray-700 dark:text-[#CBD5E1]">{item.value}</span>
               </div>
             </div>
diff --git a/apps/frontend/src/pages/HistoryPage.tsx b/apps/frontend/src/pages/HistoryPage.tsx
index 1081fd5..1cb4e7d 100644
--- a/apps/frontend/src/pages/HistoryPage.tsx
+++ b/apps/frontend/src/pages/HistoryPage.tsx
@@ -10,12 +10,12 @@ type Days = typeof DAYS_OPTIONS[number];
 
 function StatCard({ title, icon, children }: { title: string; icon: React.ReactNode; children: React.ReactNode }) {
   return (
-    <div className="bg-white dark:bg-[#18181C] border border-gray-200 dark:border-[#27272F] rounded-lg overflow-hidden">
-      <div className="px-4 py-3 border-b border-gray-100 dark:border-[#27272F] flex items-center gap-2">
-        <span className="text-indigo-500 dark:text-[#818CF8]">{icon}</span>
+    <div className="bg-white dark:bg-[#0A0C10] border border-gray-200 dark:border-[#1E222B] rounded-lg overflow-hidden">
+      <div className="px-4 py-3 border-b border-gray-100 dark:border-[#1E222B] flex items-center gap-2">
+        <span className="text-indigo-500 dark:text-[#00A3FF]">{icon}</span>
         <span className="text-[12px] font-semibold text-gray-700 dark:text-[#CBD5E1] uppercase tracking-[0.06em]">{title}</span>
       </div>
-      <div className="divide-y divide-gray-100 dark:divide-[#27272F]">{children}</div>
+      <div className="divide-y divide-gray-100 dark:divide-[#1E222B]">{children}</div>
     </div>
   );
 }
@@ -74,31 +74,31 @@ export default function HistoryPage() {
   const maxLambda = stats?.top_lambdas[0]?.session_count ?? 1;
 
   return (
-    <div className="flex-1 flex flex-col overflow-hidden bg-gray-50 dark:bg-[#0F0F12] min-h-0">
+    <div className="flex-1 flex flex-col overflow-hidden bg-gray-50 dark:bg-[#000000] min-h-0">
       {/* Header */}
-      <div className="bg-white dark:bg-[#18181C] border-b border-gray-200 dark:border-[#27272F] px-7 py-[14px] flex items-center justify-between shrink-0 gap-4">
+      <div className="bg-white dark:bg-[#0A0C10] border-b border-gray-200 dark:border-[#1E222B] px-7 py-[14px] flex items-center justify-between shrink-0 gap-4">
         <div>
-          <div className="text-[16px] font-bold text-gray-900 dark:text-[#F1F5F9] tracking-[-0.02em]">Investigation History</div>
+          <div className="text-[16px] font-bold text-gray-900 dark:text-[#E4E1EA] tracking-[-0.02em]">Investigation History</div>
           <div className="text-[14px] text-gray-500 dark:text-[#94A3B8] mt-0.5">Cross-session patterns, top resources, recurring errors</div>
         </div>
         <div className="flex items-center gap-2 shrink-0">
           {/* Days filter */}
-          <div className="flex rounded-[5px] border border-gray-200 dark:border-[#3F3F47] overflow-hidden text-[13px] font-medium">
+          <div className="flex rounded-[5px] border border-gray-200 dark:border-[#2A2F3A] overflow-hidden text-[13px] font-medium">
             {DAYS_OPTIONS.map(d => (
               <button
                 key={d}
                 onClick={() => setDays(d)}
                 className={`px-2.5 py-[5px] transition-colors ${
                   days === d
-                    ? 'bg-indigo-500 dark:bg-[#4F46E5] text-white'
-                    : 'bg-white dark:bg-[#18181C] text-gray-600 dark:text-[#94A3B8] hover:bg-gray-50 dark:hover:bg-[#27272F]'
+                    ? 'bg-indigo-500 dark:bg-[#010978] text-white'
+                    : 'bg-white dark:bg-[#0A0C10] text-gray-600 dark:text-[#94A3B8] hover:bg-gray-50 dark:hover:bg-[#1E222B]'
                 }`}
               >{d}d</button>
             ))}
           </div>
           <button
             onClick={() => { loadStats(days); loadSessions(); }}
-            className="flex items-center gap-1.5 text-[13px] font-medium text-gray-600 dark:text-[#94A3B8] bg-white dark:bg-[#18181C] hover:bg-gray-50 dark:hover:bg-[#27272F] border border-gray-300 dark:border-[#3F3F47] rounded-[5px] px-2.5 py-[5px] shadow-[0_1px_2px_rgba(0,0,0,0.04)] transition-colors"
+            className="flex items-center gap-1.5 text-[13px] font-medium text-gray-600 dark:text-[#94A3B8] bg-white dark:bg-[#0A0C10] hover:bg-gray-50 dark:hover:bg-[#1E222B] border border-gray-300 dark:border-[#2A2F3A] rounded-[5px] px-2.5 py-[5px] shadow-[0_1px_2px_rgba(0,0,0,0.04)] transition-colors"
           >
             <RefreshCw size={12} />
             Refresh
@@ -115,7 +115,7 @@ export default function HistoryPage() {
             placeholder="Search past investigations…"
             value={searchQuery}
             onChange={e => setSearchQuery(e.target.value)}
-            className="w-full pl-8 pr-3 py-2 text-[14px] bg-white dark:bg-[#18181C] border border-gray-200 dark:border-[#3F3F47] rounded-lg text-gray-900 dark:text-[#F1F5F9] placeholder-gray-400 dark:placeholder-[#64748B] focus:outline-none focus:ring-2 focus:ring-indigo-300 dark:focus:ring-[#4F46E5] transition"
+            className="w-full pl-8 pr-3 py-2 text-[14px] bg-white dark:bg-[#0A0C10] border border-gray-200 dark:border-[#2A2F3A] rounded-lg text-gray-900 dark:text-[#E4E1EA] placeholder-gray-400 dark:placeholder-[#64748B] focus:outline-none focus:ring-2 focus:ring-indigo-300 dark:focus:ring-[#010978] transition"
           />
           {searching && (
             <div className="absolute right-3 top-1/2 -translate-y-1/2">
@@ -136,13 +136,13 @@ export default function HistoryPage() {
               <Link
                 key={r.id}
                 to={`/chat/${r.id}`}
-                className="block bg-white dark:bg-[#18181C] border border-gray-200 dark:border-[#27272F] rounded-lg p-4 hover:border-indigo-200 dark:hover:border-[#3730A3] hover:shadow-[0_0_0_3px_rgba(99,102,241,0.06)] dark:hover:shadow-[0_0_0_3px_rgba(129,140,248,0.08)] transition-all group"
+                className="block bg-white dark:bg-[#0A0C10] border border-gray-200 dark:border-[#1E222B] rounded-lg p-4 hover:border-indigo-200 dark:hover:border-[#0E4FA6] hover:shadow-[0_0_0_3px_rgba(99,102,241,0.06)] dark:hover:shadow-[0_0_0_3px_rgba(129,140,248,0.08)] transition-all group"
                 onClick={() => localStorage.setItem('devops-session-id', r.id)}
               >
                 <div className="flex items-start justify-between gap-3">
                   <div className="flex items-center gap-2 min-w-0">
-                    <MessageSquare size={14} className="text-indigo-400 dark:text-[#818CF8] shrink-0 mt-0.5" />
-                    <span className="text-[14px] text-gray-900 dark:text-[#F1F5F9] font-medium truncate group-hover:text-indigo-500 dark:group-hover:text-[#818CF8] transition-colors">
+                    <MessageSquare size={14} className="text-indigo-400 dark:text-[#00A3FF] shrink-0 mt-0.5" />
+                    <span className="text-[14px] text-gray-900 dark:text-[#E4E1EA] font-medium truncate group-hover:text-indigo-500 dark:group-hover:text-[#00A3FF] transition-colors">
                       {r.title ?? 'Untitled session'}
                     </span>
                   </div>
@@ -175,9 +175,9 @@ export default function HistoryPage() {
                       <span className="text-[13px] font-mono text-gray-800 dark:text-[#CBD5E1] truncate">{a.alarm_name}</span>
                       <span className="text-[11px] text-gray-400 dark:text-[#64748B] shrink-0">{a.session_count} session{a.session_count !== 1 ? 's' : ''}</span>
                     </div>
-                    <div className="h-1 rounded-full bg-gray-100 dark:bg-[#27272F] overflow-hidden">
+                    <div className="h-1 rounded-full bg-gray-100 dark:bg-[#1E222B] overflow-hidden">
                       <div
-                        className="h-full rounded-full bg-indigo-400 dark:bg-[#818CF8]"
+                        className="h-full rounded-full bg-indigo-400 dark:bg-[#00A3FF]"
                         style={{ width: `${Math.round((a.session_count / maxAlarm) * 100)}%` }}
                       />
                     </div>
@@ -199,9 +199,9 @@ export default function HistoryPage() {
                       <span className="text-[13px] font-mono text-gray-800 dark:text-[#CBD5E1] truncate">{l.function_name}</span>
                       <span className="text-[11px] text-gray-400 dark:text-[#64748B] shrink-0">{l.session_count} session{l.session_count !== 1 ? 's' : ''}</span>
                     </div>
-                    <div className="h-1 rounded-full bg-gray-100 dark:bg-[#27272F] overflow-hidden">
+                    <div className="h-1 rounded-full bg-gray-100 dark:bg-[#1E222B] overflow-hidden">
                       <div
-                        className="h-full rounded-full bg-emerald-400 dark:bg-[#34D399]"
+                        className="h-full rounded-full bg-emerald-400 dark:bg-[#00A3FF]"
                         style={{ width: `${Math.round((l.session_count / maxLambda) * 100)}%` }}
                       />
                     </div>
@@ -225,9 +225,9 @@ export default function HistoryPage() {
 
             {/* Investigation frequency trend */}
             {(stats?.trend.length ?? 0) > 0 && (
-              <div className="bg-white dark:bg-[#18181C] border border-gray-200 dark:border-[#27272F] rounded-lg overflow-hidden">
-                <div className="px-4 py-3 border-b border-gray-100 dark:border-[#27272F] flex items-center gap-2">
-                  <Clock size={13} className="text-indigo-500 dark:text-[#818CF8]" />
+              <div className="bg-white dark:bg-[#0A0C10] border border-gray-200 dark:border-[#1E222B] rounded-lg overflow-hidden">
+                <div className="px-4 py-3 border-b border-gray-100 dark:border-[#1E222B] flex items-center gap-2">
+                  <Clock size={13} className="text-indigo-500 dark:text-[#00A3FF]" />
                   <span className="text-[12px] font-semibold text-gray-700 dark:text-[#CBD5E1] uppercase tracking-[0.06em]">Investigation Frequency</span>
                 </div>
                 <div className="px-4 py-3 flex items-end gap-1 h-20">
@@ -236,7 +236,7 @@ export default function HistoryPage() {
                     return stats!.trend.map((t, i) => (
                       <div key={i} className="flex-1 flex flex-col items-center gap-0.5 group relative" title={`${t.date}: ${t.count}`}>
                         <div
-                          className="w-full rounded-sm bg-indigo-200 dark:bg-[#312E81] group-hover:bg-indigo-400 dark:group-hover:bg-[#818CF8] transition-colors"
+                          className="w-full rounded-sm bg-indigo-200 dark:bg-[#312E81] group-hover:bg-indigo-400 dark:group-hover:bg-[#00A3FF] transition-colors"
                           style={{ height: `${Math.max(3, Math.round((t.count / max) * 52))}px` }}
                         />
                       </div>
@@ -266,13 +266,13 @@ export default function HistoryPage() {
                 <Link
                   key={s.id}
                   to={`/chat/${s.id}`}
-                  className="block bg-white dark:bg-[#18181C] border border-gray-200 dark:border-[#27272F] rounded-lg p-4 hover:border-indigo-200 dark:hover:border-[#3730A3] hover:shadow-[0_0_0_3px_rgba(99,102,241,0.06)] dark:hover:shadow-[0_0_0_3px_rgba(129,140,248,0.08)] transition-all group"
+                  className="block bg-white dark:bg-[#0A0C10] border border-gray-200 dark:border-[#1E222B] rounded-lg p-4 hover:border-indigo-200 dark:hover:border-[#0E4FA6] hover:shadow-[0_0_0_3px_rgba(99,102,241,0.06)] dark:hover:shadow-[0_0_0_3px_rgba(129,140,248,0.08)] transition-all group"
                   onClick={() => localStorage.setItem('devops-session-id', s.id)}
                 >
                   <div className="flex items-start justify-between gap-3">
                     <div className="flex items-center gap-2 min-w-0">
-                      <MessageSquare size={14} className="text-indigo-400 dark:text-[#818CF8] shrink-0 mt-0.5" />
-                      <span className="text-[14px] text-gray-900 dark:text-[#F1F5F9] font-medium truncate group-hover:text-indigo-500 dark:group-hover:text-[#818CF8] transition-colors">
+                      <MessageSquare size={14} className="text-indigo-400 dark:text-[#00A3FF] shrink-0 mt-0.5" />
+                      <span className="text-[14px] text-gray-900 dark:text-[#E4E1EA] font-medium truncate group-hover:text-indigo-500 dark:group-hover:text-[#00A3FF] transition-colors">
                         {s.title ?? 'Untitled session'}
                       </span>
                     </div>
diff --git a/apps/frontend/src/pages/InitPage.tsx b/apps/frontend/src/pages/InitPage.tsx
index 5688197..19acbfa 100644
--- a/apps/frontend/src/pages/InitPage.tsx
+++ b/apps/frontend/src/pages/InitPage.tsx
@@ -1,13 +1,13 @@
 import { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { ArrowRight, ArrowLeft, Loader2, Terminal, Eye, EyeOff, CheckCircle, XCircle, AlertTriangle, ChevronRight, Check } from 'lucide-react';
+import { ArrowRight, ArrowLeft, Loader2, Eye, EyeOff, CheckCircle, XCircle, AlertTriangle, ChevronRight, Check } from 'lucide-react';
 import { cn } from '../lib/utils';
 import { useAuth } from '../context/AuthContext';
 import { apiFetch } from '../lib/api';
 import LlmBackendCard from '../components/LlmBackendCard';
 import type { LlmBackendInfo } from '../types';
 
-const inp = 'w-full text-base text-gray-900 dark:text-white bg-gray-50 dark:bg-[#18181B] border border-gray-200 dark:border-[#27272A] rounded-xl px-4 py-3.5 outline-none focus:border-indigo-500 dark:focus:border-indigo-400 focus:ring-2 focus:ring-indigo-500/10 transition-all placeholder:text-gray-400 dark:placeholder:text-[#52525B]';
+const inp = 'w-full text-base text-gray-900 dark:text-white bg-gray-50 dark:bg-[#0A0C10] border border-gray-200 dark:border-[#1E222B] rounded-xl px-4 py-3.5 outline-none focus:border-indigo-500 dark:focus:border-indigo-400 focus:ring-2 focus:ring-indigo-500/10 transition-all placeholder:text-gray-400 dark:placeholder:text-[#52525B]';
 
 const AWS_REGIONS = [
   'us-east-1', 'us-east-2', 'us-west-1', 'us-west-2',
@@ -178,11 +178,9 @@ export default function InitPage() {
   const hasPerms = Object.keys(perms).length > 0;
 
   return (
-    <div className="h-screen bg-white dark:bg-[#09090B] flex flex-col overflow-hidden">
+    <div className="h-screen bg-white dark:bg-[#000000] flex flex-col overflow-hidden">
       <header className="shrink-0 px-8 py-5 flex items-center gap-3">
-        <div className="w-9 h-9 bg-gradient-to-br from-indigo-500 to-violet-600 rounded-xl flex items-center justify-center">
-          <Terminal size={16} className="text-white" />
-        </div>
+        <img src="/brand-mark.svg" alt="" className="w-9 h-9" />
         <span className="text-base font-semibold text-gray-900 dark:text-white">OpenDevOps</span>
       </header>
 
@@ -199,14 +197,14 @@ export default function InitPage() {
                     ? 'bg-indigo-500 text-white'
                     : step === s
                       ? 'bg-indigo-500 text-white ring-4 ring-indigo-500/20'
-                      : 'bg-gray-100 dark:bg-[#27272A] text-gray-400 dark:text-[#52525B]'
+                      : 'bg-gray-100 dark:bg-[#1E222B] text-gray-400 dark:text-[#52525B]'
                 )}>
                   {step > s ? <Check size={13} /> : s}
                 </div>
                 {i < 3 && (
                   <div className={cn(
                     'h-px w-8 transition-colors',
-                    step > s ? 'bg-indigo-500' : 'bg-gray-200 dark:bg-[#27272A]'
+                    step > s ? 'bg-indigo-500' : 'bg-gray-200 dark:bg-[#1E222B]'
                   )} />
                 )}
               </div>
@@ -267,9 +265,9 @@ export default function InitPage() {
                   <LlmBackendCard backend={llmBackend} />
                   {!llmBackend.configured && (
                     <p className="mt-2 text-xs text-gray-400 dark:text-[#52525B]">
-                      You can set <code className="bg-gray-100 dark:bg-[#27272A] px-1 rounded">LLM_MODEL</code> and an API key in <code className="bg-gray-100 dark:bg-[#27272A] px-1 rounded">.env</code>, or install{' '}
-                      <a href="https://claude.ai/code" target="_blank" rel="noopener noreferrer" className="text-indigo-500 dark:text-[#818CF8] hover:underline">Claude Code</a>{' '}
-                      for zero-config setup. See <a href="https://github.com/AhmadHammad21/OpenDevOps/blob/main/docs/llm_providers.md" target="_blank" rel="noopener noreferrer" className="text-indigo-500 dark:text-[#818CF8] hover:underline">docs/llm_providers.md</a>.
+                      You can set <code className="bg-gray-100 dark:bg-[#1E222B] px-1 rounded">LLM_MODEL</code> and an API key in <code className="bg-gray-100 dark:bg-[#1E222B] px-1 rounded">.env</code>, or install{' '}
+                      <a href="https://claude.ai/code" target="_blank" rel="noopener noreferrer" className="text-indigo-500 dark:text-[#00A3FF] hover:underline">Claude Code</a>{' '}
+                      for zero-config setup. See <a href="https://github.com/AhmadHammad21/OpenDevOps/blob/main/docs/llm_providers.md" target="_blank" rel="noopener noreferrer" className="text-indigo-500 dark:text-[#00A3FF] hover:underline">docs/llm_providers.md</a>.
                     </p>
                   )}
                 </div>
@@ -326,7 +324,7 @@ export default function InitPage() {
                     </a>
                   </p>
                   <button onClick={finishWithoutInfra} disabled={loading}
-                    className="w-full text-sm font-medium text-gray-700 dark:text-[#D4D4D8] bg-white dark:bg-[#27272A] border border-gray-200 dark:border-[#3F3F46] rounded-lg py-2.5 hover:bg-gray-50 dark:hover:bg-[#3F3F46] transition-colors">
+                    className="w-full text-sm font-medium text-gray-700 dark:text-[#D4D4D8] bg-white dark:bg-[#1E222B] border border-gray-200 dark:border-[#2A2F3A] rounded-lg py-2.5 hover:bg-gray-50 dark:hover:bg-[#2A2F3A] transition-colors">
                     Go to dashboard anyway
                   </button>
                 </div>
@@ -345,7 +343,7 @@ export default function InitPage() {
                 Need to set up IAM permissions first? See{' '}
                 <a href="https://github.com/AhmadHammad21/OpenDevOps/blob/main/docs/iam_setup.md"
                    target="_blank" rel="noopener noreferrer"
-                   className="text-indigo-500 dark:text-[#818CF8] hover:underline">
+                   className="text-indigo-500 dark:text-[#00A3FF] hover:underline">
                   docs/iam_setup.md
                 </a>
                 {' '}for the exact policy JSON.
@@ -358,17 +356,17 @@ export default function InitPage() {
                 </button>
               ) : (
                 <>
-                  <div className="rounded-xl border border-gray-200 dark:border-[#27272A] overflow-hidden mb-6">
+                  <div className="rounded-xl border border-gray-200 dark:border-[#1E222B] overflow-hidden mb-6">
                     {Object.entries(SVC).map(([svc, info], i) => {
                       const r = perms[svc];
                       return (
                         <div key={svc} className={cn(
                           'flex items-center gap-3 px-4 py-3',
-                          i < Object.keys(SVC).length - 1 ? 'border-b border-gray-100 dark:border-[#27272A]' : ''
+                          i < Object.keys(SVC).length - 1 ? 'border-b border-gray-100 dark:border-[#1E222B]' : ''
                         )}>
                           <div className="shrink-0">
                             {!r
-                              ? <div className="w-[14px] h-[14px] rounded-full bg-gray-200 dark:bg-[#27272A]" />
+                              ? <div className="w-[14px] h-[14px] rounded-full bg-gray-200 dark:bg-[#1E222B]" />
                               : r.passed
                                 ? <CheckCircle size={14} className="text-emerald-500" />
                                 : r.passed === null
@@ -381,7 +379,7 @@ export default function InitPage() {
                               <span className="text-sm font-medium text-gray-900 dark:text-white">{info.label}</span>
                               <span className="text-xs text-gray-400 dark:text-[#52525B]">{info.desc}</span>
                               {info.required && (
-                                <span className="text-[10px] font-semibold text-indigo-500 dark:text-[#818CF8] bg-indigo-50 dark:bg-indigo-500/10 px-1.5 py-0.5 rounded">Required</span>
+                                <span className="text-[10px] font-semibold text-indigo-500 dark:text-[#00A3FF] bg-indigo-50 dark:bg-indigo-500/10 px-1.5 py-0.5 rounded">Required</span>
                               )}
                             </div>
                             {r && !r.passed && r.error && (
@@ -439,13 +437,13 @@ export default function InitPage() {
               {!infraDone ? (
                 <>
                   {/* Rule list preview */}
-                  <div className="rounded-xl border border-gray-200 dark:border-[#27272A] overflow-hidden mb-6">
+                  <div className="rounded-xl border border-gray-200 dark:border-[#1E222B] overflow-hidden mb-6">
                     {RULES.map((rule, i) => (
                       <div key={rule.name} className={cn(
                         'flex items-center gap-3 px-4 py-3',
-                        i < RULES.length - 1 ? 'border-b border-gray-100 dark:border-[#27272A]' : ''
+                        i < RULES.length - 1 ? 'border-b border-gray-100 dark:border-[#1E222B]' : ''
                       )}>
-                        <div className="w-1.5 h-1.5 rounded-full bg-indigo-400 dark:bg-[#818CF8] shrink-0" />
+                        <div className="w-1.5 h-1.5 rounded-full bg-indigo-400 dark:bg-[#00A3FF] shrink-0" />
                         <div>
                           <span className="text-sm text-gray-900 dark:text-white">{rule.name}</span>
                           <span className="text-xs text-gray-400 dark:text-[#52525B] ml-2">{rule.src}</span>
@@ -476,7 +474,7 @@ export default function InitPage() {
                   </button>
 
                   {showSkipDisclaimer && (
-                    <div className="mt-3 p-4 rounded-xl bg-gray-50 dark:bg-[#18181B] border border-gray-200 dark:border-[#27272A]">
+                    <div className="mt-3 p-4 rounded-xl bg-gray-50 dark:bg-[#0A0C10] border border-gray-200 dark:border-[#1E222B]">
                       <p className="text-sm font-semibold text-gray-700 dark:text-[#D4D4D8] mb-2">Without event monitoring:</p>
                       <ul className="space-y-1 mb-3">
                         {[
@@ -494,7 +492,7 @@ export default function InitPage() {
                         You can enable this anytime from <span className="font-medium text-gray-600 dark:text-[#A1A1AA]">Settings → AWS Configuration</span>.
                       </p>
                       <button onClick={finishWithoutInfra} disabled={loading}
-                        className="mt-3 w-full text-sm font-medium text-gray-700 dark:text-[#D4D4D8] bg-white dark:bg-[#27272A] border border-gray-200 dark:border-[#3F3F46] rounded-lg py-2.5 hover:bg-gray-50 dark:hover:bg-[#3F3F46] transition-colors">
+                        className="mt-3 w-full text-sm font-medium text-gray-700 dark:text-[#D4D4D8] bg-white dark:bg-[#1E222B] border border-gray-200 dark:border-[#2A2F3A] rounded-lg py-2.5 hover:bg-gray-50 dark:hover:bg-[#2A2F3A] transition-colors">
                         Go to dashboard anyway
                       </button>
                     </div>
@@ -514,11 +512,11 @@ export default function InitPage() {
                     </div>
                   </div>
 
-                  <div className="rounded-xl border border-gray-200 dark:border-[#27272A] overflow-hidden mb-8">
+                  <div className="rounded-xl border border-gray-200 dark:border-[#1E222B] overflow-hidden mb-8">
                     {RULES.map((rule, i) => (
                       <div key={rule.name} className={cn(
                         'flex items-center gap-3 px-4 py-3',
-                        i < RULES.length - 1 ? 'border-b border-gray-100 dark:border-[#27272A]' : ''
+                        i < RULES.length - 1 ? 'border-b border-gray-100 dark:border-[#1E222B]' : ''
                       )}>
                         <CheckCircle size={13} className="text-emerald-500 shrink-0" />
                         <span className="text-sm text-gray-900 dark:text-white">{rule.name}</span>
diff --git a/apps/frontend/src/pages/LoginPage.tsx b/apps/frontend/src/pages/LoginPage.tsx
index 879e1a8..0f35bfc 100644
--- a/apps/frontend/src/pages/LoginPage.tsx
+++ b/apps/frontend/src/pages/LoginPage.tsx
@@ -34,11 +34,13 @@ export default function LoginPage() {
   };
 
   return (
-    <div className="flex w-full h-screen items-center justify-center bg-gray-50 dark:bg-[#0F0F12]">
+    <div className="flex w-full h-screen items-center justify-center bg-gray-50 dark:bg-[#000000]">
       <div className="w-full max-w-[360px] mx-4">
         {/* Logo / title */}
         <div className="text-center mb-8">
-          <div className="text-[22px] font-bold text-gray-900 dark:text-[#F1F5F9] tracking-[-0.02em]">
+          <img src="/Emblem.svg" alt="" className="w-12 h-12 mx-auto mb-3 rounded-lg dark:hidden" />
+          <img src="/brand-mark.svg" alt="" className="w-12 h-12 mx-auto mb-3 hidden dark:block" />
+          <div className="text-[22px] font-bold text-gray-900 dark:text-[#E4E1EA] tracking-[-0.02em]">
             OpenDevOps
           </div>
           <div className="text-[14px] text-gray-500 dark:text-[#94A3B8] mt-1">
@@ -46,17 +48,17 @@ export default function LoginPage() {
           </div>
         </div>
 
-        <div className="bg-white dark:bg-[#18181C] border border-gray-200 dark:border-[#27272F] rounded-xl shadow-[0_2px_8px_rgba(0,0,0,0.06)] overflow-hidden">
+        <div className="bg-white dark:bg-[#0A0C10] border border-gray-200 dark:border-[#1E222B] rounded-xl shadow-[0_2px_8px_rgba(0,0,0,0.06)] overflow-hidden">
           {/* Mode tabs */}
-          <div className="flex border-b border-gray-200 dark:border-[#27272F]">
+          <div className="flex border-b border-gray-200 dark:border-[#1E222B]">
             {(['login', 'register'] as Mode[]).map(m => (
               <button
                 key={m}
                 onClick={() => { setMode(m); setError(''); }}
                 className={`flex-1 py-3 text-[14px] font-medium transition-colors ${
                   mode === m
-                    ? 'text-indigo-500 dark:text-[#818CF8] border-b-2 border-indigo-500 dark:border-[#818CF8] -mb-px'
-                    : 'text-gray-500 dark:text-[#94A3B8] hover:text-gray-700 dark:hover:text-[#F1F5F9]'
+                    ? 'text-indigo-500 dark:text-[#00A3FF] border-b-2 border-indigo-500 dark:border-[#00A3FF] -mb-px'
+                    : 'text-gray-500 dark:text-[#94A3B8] hover:text-gray-700 dark:hover:text-[#E4E1EA]'
                 }`}
               >
                 {m === 'login' ? 'Sign in' : 'Register'}
@@ -76,7 +78,7 @@ export default function LoginPage() {
                   onChange={e => setName(e.target.value)}
                   placeholder="Your name"
                   required
-                  className="w-full text-[14px] text-gray-900 dark:text-[#F1F5F9] bg-white dark:bg-[#18181C] border border-gray-300 dark:border-[#3F3F47] rounded-[6px] px-3 py-2 outline-none focus:border-indigo-500 dark:focus:border-[#818CF8] focus:shadow-[0_0_0_3px_rgba(99,102,241,0.12)] dark:focus:shadow-[0_0_0_3px_rgba(129,140,248,0.12)] transition-all"
+                  className="w-full text-[14px] text-gray-900 dark:text-[#E4E1EA] bg-white dark:bg-[#0A0C10] border border-gray-300 dark:border-[#2A2F3A] rounded-[6px] px-3 py-2 outline-none focus:border-indigo-500 dark:focus:border-[#00A3FF] focus:shadow-[0_0_0_3px_rgba(99,102,241,0.12)] dark:focus:shadow-[0_0_0_3px_rgba(129,140,248,0.12)] transition-all"
                 />
               </div>
             )}
@@ -90,7 +92,7 @@ export default function LoginPage() {
                 onChange={e => setEmail(e.target.value)}
                 placeholder="you@example.com"
                 required
-                className="w-full text-[13px] text-gray-900 dark:text-[#F1F5F9] bg-white dark:bg-[#18181C] border border-gray-300 dark:border-[#3F3F47] rounded-[6px] px-3 py-2 outline-none focus:border-indigo-500 dark:focus:border-[#818CF8] focus:shadow-[0_0_0_3px_rgba(99,102,241,0.12)] dark:focus:shadow-[0_0_0_3px_rgba(129,140,248,0.12)] transition-all"
+                className="w-full text-[13px] text-gray-900 dark:text-[#E4E1EA] bg-white dark:bg-[#0A0C10] border border-gray-300 dark:border-[#2A2F3A] rounded-[6px] px-3 py-2 outline-none focus:border-indigo-500 dark:focus:border-[#00A3FF] focus:shadow-[0_0_0_3px_rgba(99,102,241,0.12)] dark:focus:shadow-[0_0_0_3px_rgba(129,140,248,0.12)] transition-all"
               />
             </div>
             <div>
@@ -104,7 +106,7 @@ export default function LoginPage() {
                 placeholder="••••••••"
                 required
                 minLength={8}
-                className="w-full text-[13px] text-gray-900 dark:text-[#F1F5F9] bg-white dark:bg-[#18181C] border border-gray-300 dark:border-[#3F3F47] rounded-[6px] px-3 py-2 outline-none focus:border-indigo-500 dark:focus:border-[#818CF8] focus:shadow-[0_0_0_3px_rgba(99,102,241,0.12)] dark:focus:shadow-[0_0_0_3px_rgba(129,140,248,0.12)] transition-all"
+                className="w-full text-[13px] text-gray-900 dark:text-[#E4E1EA] bg-white dark:bg-[#0A0C10] border border-gray-300 dark:border-[#2A2F3A] rounded-[6px] px-3 py-2 outline-none focus:border-indigo-500 dark:focus:border-[#00A3FF] focus:shadow-[0_0_0_3px_rgba(99,102,241,0.12)] dark:focus:shadow-[0_0_0_3px_rgba(129,140,248,0.12)] transition-all"
               />
             </div>
 
@@ -117,7 +119,7 @@ export default function LoginPage() {
             <button
               type="submit"
               disabled={busy}
-              className="w-full py-2.5 text-[14px] font-medium text-white bg-indigo-500 dark:bg-[#818CF8] hover:bg-indigo-600 dark:hover:bg-[#6366F1] disabled:opacity-50 rounded-[6px] transition-colors shadow-[0_1px_2px_rgba(99,102,241,0.25)]"
+              className="w-full py-2.5 text-[14px] font-medium text-white bg-indigo-500 dark:bg-[#00A3FF] hover:bg-indigo-600 dark:hover:bg-[#0086D6] disabled:opacity-50 rounded-[6px] transition-colors shadow-[0_1px_2px_rgba(99,102,241,0.25)]"
             >
               {busy ? 'Please wait…' : mode === 'login' ? 'Sign in' : 'Create account'}
             </button>
diff --git a/apps/frontend/src/pages/MonitoringPage.tsx b/apps/frontend/src/pages/MonitoringPage.tsx
index 8fc54c9..8c6c5b6 100644
--- a/apps/frontend/src/pages/MonitoringPage.tsx
+++ b/apps/frontend/src/pages/MonitoringPage.tsx
@@ -125,7 +125,7 @@ export default function MonitoringPage() {
   };
 
   return (
-    <div className="flex-1 overflow-y-auto bg-white dark:bg-[#09090B]">
+    <div className="flex-1 overflow-y-auto bg-white dark:bg-[#000000]">
       <div className="max-w-4xl mx-auto px-6 py-8">
 
         {/* Header */}
@@ -151,7 +151,7 @@ export default function MonitoringPage() {
               </button>
             )}
             <button onClick={load}
-              className="flex items-center gap-1.5 text-sm font-medium text-gray-600 dark:text-[#A1A1AA] hover:text-gray-900 dark:hover:text-white px-3 py-1.5 border border-gray-200 dark:border-[#27272A] rounded-lg hover:bg-gray-50 dark:hover:bg-[#18181B] transition-colors">
+              className="flex items-center gap-1.5 text-sm font-medium text-gray-600 dark:text-[#A1A1AA] hover:text-gray-900 dark:hover:text-white px-3 py-1.5 border border-gray-200 dark:border-[#1E222B] rounded-lg hover:bg-gray-50 dark:hover:bg-[#0A0C10] transition-colors">
               <RefreshCw size={13} className={loading ? 'animate-spin' : ''} />
             </button>
           </div>
@@ -160,7 +160,7 @@ export default function MonitoringPage() {
         {/* Empty state */}
         {alerts.length === 0 && !loading && (
           <div className="text-center py-20">
-            <div className="w-14 h-14 bg-gray-100 dark:bg-[#18181B] rounded-2xl flex items-center justify-center mx-auto mb-4">
+            <div className="w-14 h-14 bg-gray-100 dark:bg-[#0A0C10] rounded-2xl flex items-center justify-center mx-auto mb-4">
               <Activity size={24} className="text-gray-400 dark:text-[#52525B]" />
             </div>
             <h2 className="text-base font-semibold text-gray-900 dark:text-white mb-1">{emptyTitle}</h2>
@@ -182,7 +182,7 @@ export default function MonitoringPage() {
               {alerts.map(a => (
                 <div key={a.id}
                   onClick={() => navigate(`/monitoring/${a.id}`)}
-                  className="group rounded-xl border border-gray-200 dark:border-[#27272A] bg-white dark:bg-[#18181B] p-4 cursor-pointer transition-all hover:border-gray-300 dark:hover:border-[#3F3F46] hover:shadow-sm">
+                  className="group rounded-xl border border-gray-200 dark:border-[#1E222B] bg-white dark:bg-[#0A0C10] p-4 cursor-pointer transition-all hover:border-gray-300 dark:hover:border-[#2A2F3A] hover:shadow-sm">
                   <div className="flex items-center gap-3">
                     <div className={cn(
                       'w-2.5 h-2.5 rounded-full shrink-0',
@@ -202,7 +202,7 @@ export default function MonitoringPage() {
                             'text-[10px] font-bold px-1.5 py-0.5 rounded',
                             a.confidence === 'HIGH' ? 'bg-red-100 dark:bg-red-500/10 text-red-600 dark:text-red-400' :
                             a.confidence === 'MEDIUM' ? 'bg-amber-100 dark:bg-amber-500/10 text-amber-600 dark:text-amber-400' :
-                            'bg-gray-100 dark:bg-[#27272A] text-gray-500 dark:text-[#71717A]'
+                            'bg-gray-100 dark:bg-[#1E222B] text-gray-500 dark:text-[#71717A]'
                           )}>{a.confidence}</span>
                         )}
                       </div>
@@ -221,7 +221,7 @@ export default function MonitoringPage() {
                       >
                         <MessageSquare size={11} /> {a.session_id ? 'View investigation' : 'Investigate'}
                       </button>
-                      <ChevronRight size={14} className="text-gray-300 dark:text-[#3F3F46] group-hover:text-gray-500 dark:group-hover:text-[#71717A] transition-colors" />
+                      <ChevronRight size={14} className="text-gray-300 dark:text-[#2A2F3A] group-hover:text-gray-500 dark:group-hover:text-[#71717A] transition-colors" />
                     </div>
                   </div>
                 </div>
diff --git a/apps/frontend/src/pages/SettingsPage.tsx b/apps/frontend/src/pages/SettingsPage.tsx
index 00bbf56..10f81a1 100644
--- a/apps/frontend/src/pages/SettingsPage.tsx
+++ b/apps/frontend/src/pages/SettingsPage.tsx
@@ -35,7 +35,7 @@ const COMING_SOON_INTEGRATIONS = [
   { name: 'Datadog',   desc: 'Send metrics and traces',   iconKey: 'datadog' },
 ];
 
-const inputCls = 'w-full font-mono text-[12px] text-gray-700 dark:text-[#CBD5E1] bg-white dark:bg-[#0F0F12] border border-gray-200 dark:border-[#27272F] rounded-md px-3 py-1.5 outline-none focus:border-indigo-500 dark:focus:border-[#818CF8] focus:ring-1 focus:ring-indigo-500/20 dark:focus:ring-[#818CF8]/20 transition-all placeholder:text-gray-300 dark:placeholder:text-[#3F3F47]';
+const inputCls = 'w-full font-mono text-[12px] text-gray-700 dark:text-[#CBD5E1] bg-white dark:bg-[#000000] border border-gray-200 dark:border-[#1E222B] rounded-md px-3 py-1.5 outline-none focus:border-indigo-500 dark:focus:border-[#00A3FF] focus:ring-1 focus:ring-indigo-500/20 dark:focus:ring-[#00A3FF]/20 transition-all placeholder:text-gray-300 dark:placeholder:text-[#2A2F3A]';
 
 export default function SettingsPage() {
   const { isAdmin }   = useAuth();
@@ -280,21 +280,21 @@ export default function SettingsPage() {
   const total  = Object.keys(perms).length;
 
   return (
-    <div className="flex-1 overflow-y-auto bg-gray-50 dark:bg-[#0F0F12] min-h-0">
-      <div className="bg-white dark:bg-[#18181C] border-b border-gray-200 dark:border-[#27272F] px-7 py-[14px]">
-        <div className="text-[16px] font-bold text-gray-900 dark:text-[#F1F5F9] tracking-[-0.02em]">Settings</div>
+    <div className="flex-1 overflow-y-auto bg-gray-50 dark:bg-[#000000] min-h-0">
+      <div className="bg-white dark:bg-[#0A0C10] border-b border-gray-200 dark:border-[#1E222B] px-7 py-[14px]">
+        <div className="text-[16px] font-bold text-gray-900 dark:text-[#E4E1EA] tracking-[-0.02em]">Settings</div>
         <div className="text-[13px] text-gray-500 dark:text-[#94A3B8] mt-0.5">
-          View your agent configuration. Edit <code className="font-mono text-[12px] bg-gray-100 dark:bg-[#27272F] px-1 rounded">.env</code> and restart to apply environment changes.
+          View your agent configuration. Edit <code className="font-mono text-[12px] bg-gray-100 dark:bg-[#1E222B] px-1 rounded">.env</code> and restart to apply environment changes.
         </div>
       </div>
 
-      <div className="flex bg-white dark:bg-[#18181C] border-b border-gray-200 dark:border-[#27272F] px-7">
+      <div className="flex bg-white dark:bg-[#0A0C10] border-b border-gray-200 dark:border-[#1E222B] px-7">
         {TABS.map(t => (
           <button key={t.id} onClick={() => setTab(t.id)}
             className={`px-3.5 py-2.5 text-[14px] font-medium transition-colors border-b-2 -mb-px ${
               tab === t.id
-                ? 'text-indigo-500 dark:text-[#818CF8] border-indigo-500 dark:border-[#818CF8]'
-                : 'text-gray-500 dark:text-[#94A3B8] border-transparent hover:text-gray-700 dark:hover:text-[#F1F5F9]'
+                ? 'text-indigo-500 dark:text-[#00A3FF] border-indigo-500 dark:border-[#00A3FF]'
+                : 'text-gray-500 dark:text-[#94A3B8] border-transparent hover:text-gray-700 dark:hover:text-[#E4E1EA]'
             }`}
           >
             {t.label}
@@ -313,16 +313,16 @@ export default function SettingsPage() {
               <LlmBackendCard backend={data.llm_backend} />
             </div>
           )}
-          <div className="bg-white dark:bg-[#18181C] border border-gray-200 dark:border-[#27272F] rounded-lg overflow-hidden shadow-[0_1px_2px_rgba(0,0,0,0.04)]">
-            <div className="px-4 py-[11px] border-b border-gray-200 dark:border-[#27272F] bg-gray-50 dark:bg-[#1E1E24]">
+          <div className="bg-white dark:bg-[#0A0C10] border border-gray-200 dark:border-[#1E222B] rounded-lg overflow-hidden shadow-[0_1px_2px_rgba(0,0,0,0.04)]">
+            <div className="px-4 py-[11px] border-b border-gray-200 dark:border-[#1E222B] bg-gray-50 dark:bg-[#15181F]">
               <span className="text-[11px] font-semibold text-gray-400 dark:text-[#64748B] uppercase tracking-[0.07em]">Environment Variables</span>
             </div>
-            <div className="flex px-4 py-[7px] bg-gray-50 dark:bg-[#1E1E24] border-b border-gray-200 dark:border-[#27272F]">
+            <div className="flex px-4 py-[7px] bg-gray-50 dark:bg-[#15181F] border-b border-gray-200 dark:border-[#1E222B]">
               <span className="text-[10px] font-semibold text-gray-400 dark:text-[#64748B] uppercase tracking-[0.07em] flex-[0_0_220px]">Key</span>
               <span className="text-[10px] font-semibold text-gray-400 dark:text-[#64748B] uppercase tracking-[0.07em] flex-1">Value</span>
             </div>
             {data ? data.env.map((v, i) => (
-              <div key={v.key} className={`flex items-center gap-2 px-4 py-[9px] ${i < data.env.length - 1 ? 'border-b border-gray-200 dark:border-[#27272F]' : ''}`}>
+              <div key={v.key} className={`flex items-center gap-2 px-4 py-[9px] ${i < data.env.length - 1 ? 'border-b border-gray-200 dark:border-[#1E222B]' : ''}`}>
                 <div className="flex-[0_0_220px] flex items-center gap-1.5">
                   {v.secret && <Key size={11} className="text-gray-400 dark:text-[#64748B] shrink-0" />}
                   <span className="font-mono text-[13px] font-medium text-gray-700 dark:text-[#CBD5E1]">{v.key}</span>
@@ -331,7 +331,7 @@ export default function SettingsPage() {
                   {v.secret && !shown[v.key] ? '••••••••••••' : v.value}
                 </div>
                 {v.secret && (
-                  <button onClick={() => toggleShow(v.key)} className="p-[3px] rounded hover:bg-gray-100 dark:hover:bg-[#27272F] text-gray-400 dark:text-[#64748B] hover:text-gray-600 dark:hover:text-[#94A3B8] transition-colors">
+                  <button onClick={() => toggleShow(v.key)} className="p-[3px] rounded hover:bg-gray-100 dark:hover:bg-[#1E222B] text-gray-400 dark:text-[#64748B] hover:text-gray-600 dark:hover:text-[#94A3B8] transition-colors">
                     {shown[v.key] ? <EyeOff size={13} /> : <Eye size={13} />}
                   </button>
                 )}
@@ -347,8 +347,8 @@ export default function SettingsPage() {
         {tab === 'agent' && (
           <div className="space-y-4">
             {/* LLM picker card */}
-            <div className="bg-white dark:bg-[#18181C] border border-gray-200 dark:border-[#27272F] rounded-lg overflow-hidden shadow-[0_1px_2px_rgba(0,0,0,0.04)]">
-              <div className="px-4 py-[11px] border-b border-gray-200 dark:border-[#27272F] bg-gray-50 dark:bg-[#1E1E24] flex items-center justify-between">
+            <div className="bg-white dark:bg-[#0A0C10] border border-gray-200 dark:border-[#1E222B] rounded-lg overflow-hidden shadow-[0_1px_2px_rgba(0,0,0,0.04)]">
+              <div className="px-4 py-[11px] border-b border-gray-200 dark:border-[#1E222B] bg-gray-50 dark:bg-[#15181F] flex items-center justify-between">
                 <span className="text-[11px] font-semibold text-gray-400 dark:text-[#64748B] uppercase tracking-[0.07em]">LLM</span>
                 {data?.llm_backend && (
                   <span className="text-[11px] font-mono text-gray-500 dark:text-[#94A3B8]">
@@ -395,7 +395,7 @@ export default function SettingsPage() {
                             <button
                               type="button"
                               onClick={() => onSelectProvider(llmSource)}
-                              className="text-[10px] text-indigo-500 dark:text-[#818CF8] hover:underline mt-1"
+                              className="text-[10px] text-indigo-500 dark:text-[#00A3FF] hover:underline mt-1"
                             >
                               ← back to curated list
                             </button>
@@ -423,7 +423,7 @@ export default function SettingsPage() {
                       <button
                         onClick={saveLlmPick}
                         disabled={llmSaving || !llmSource}
-                        className="text-[12px] font-medium px-3 py-1.5 rounded-md bg-indigo-600 hover:bg-indigo-700 disabled:bg-gray-300 dark:disabled:bg-[#27272F] text-white transition-colors"
+                        className="text-[12px] font-medium px-3 py-1.5 rounded-md bg-indigo-600 hover:bg-indigo-700 disabled:bg-gray-300 dark:disabled:bg-[#1E222B] text-white transition-colors"
                       >
                         {llmSaving ? 'Saving…' : 'Save'}
                       </button>
@@ -434,17 +434,17 @@ export default function SettingsPage() {
             </div>
 
             {/* Existing read-only agent settings */}
-            <div className="bg-white dark:bg-[#18181C] border border-gray-200 dark:border-[#27272F] rounded-lg overflow-hidden shadow-[0_1px_2px_rgba(0,0,0,0.04)]">
-              <div className="px-4 py-[11px] border-b border-gray-200 dark:border-[#27272F] bg-gray-50 dark:bg-[#1E1E24]">
+            <div className="bg-white dark:bg-[#0A0C10] border border-gray-200 dark:border-[#1E222B] rounded-lg overflow-hidden shadow-[0_1px_2px_rgba(0,0,0,0.04)]">
+              <div className="px-4 py-[11px] border-b border-gray-200 dark:border-[#1E222B] bg-gray-50 dark:bg-[#15181F]">
                 <span className="text-[11px] font-semibold text-gray-400 dark:text-[#64748B] uppercase tracking-[0.07em]">Agent Configuration</span>
               </div>
               {data ? data.agent.map((f, i) => (
-                <div key={f.key} className={`flex items-center gap-4 px-4 py-[11px] ${i < data.agent.length - 1 ? 'border-b border-gray-200 dark:border-[#27272F]' : ''}`}>
+                <div key={f.key} className={`flex items-center gap-4 px-4 py-[11px] ${i < data.agent.length - 1 ? 'border-b border-gray-200 dark:border-[#1E222B]' : ''}`}>
                   <div className="flex-[0_0_220px]">
                     <div className="text-[12px] font-medium text-gray-700 dark:text-[#CBD5E1]">{f.label}</div>
                     <div className="text-[11px] text-gray-400 dark:text-[#64748B] mt-0.5">{f.hint}</div>
                   </div>
-                  <span className="font-mono text-[13px] font-medium text-gray-900 dark:text-[#F1F5F9]">{f.value}</span>
+                  <span className="font-mono text-[13px] font-medium text-gray-900 dark:text-[#E4E1EA]">{f.value}</span>
                 </div>
               )) : (
                 <div className="px-4 py-6 text-[13px] text-gray-400 dark:text-[#64748B] text-center">Loading…</div>
@@ -458,31 +458,31 @@ export default function SettingsPage() {
           <div className="space-y-4">
 
             {/* Slack — live integration */}
-            <div className="bg-white dark:bg-[#18181C] border border-gray-200 dark:border-[#27272F] rounded-lg overflow-hidden shadow-[0_1px_2px_rgba(0,0,0,0.04)]">
-              <div className="px-4 py-[11px] border-b border-gray-200 dark:border-[#27272F] bg-gray-50 dark:bg-[#1E1E24] flex items-center justify-between">
+            <div className="bg-white dark:bg-[#0A0C10] border border-gray-200 dark:border-[#1E222B] rounded-lg overflow-hidden shadow-[0_1px_2px_rgba(0,0,0,0.04)]">
+              <div className="px-4 py-[11px] border-b border-gray-200 dark:border-[#1E222B] bg-gray-50 dark:bg-[#15181F] flex items-center justify-between">
                 <span className="text-[11px] font-semibold text-gray-400 dark:text-[#64748B] uppercase tracking-[0.07em]">Slack</span>
                 <span className={cn(
                   'text-[10px] font-semibold px-1.5 py-0.5 rounded',
                   slackConfigured
                     ? 'text-emerald-600 dark:text-emerald-400 bg-emerald-50 dark:bg-emerald-500/10'
-                    : 'text-gray-500 dark:text-[#64748B] bg-gray-100 dark:bg-[#27272F]'
+                    : 'text-gray-500 dark:text-[#64748B] bg-gray-100 dark:bg-[#1E222B]'
                 )}>
                   {slackConfigured ? 'Configured' : 'Not configured'}
                 </span>
               </div>
 
               <div className="px-[18px] py-[14px] flex items-start gap-3">
-                <div className="w-[34px] h-[34px] bg-gray-100 dark:bg-[#27272F] rounded-lg flex items-center justify-center shrink-0 mt-0.5">
+                <div className="w-[34px] h-[34px] bg-gray-100 dark:bg-[#1E222B] rounded-lg flex items-center justify-center shrink-0 mt-0.5">
                   <SlackIcon size={20} />
                 </div>
                 <div className="flex-1 min-w-0">
-                  <div className="text-[14px] font-medium text-gray-900 dark:text-[#F1F5F9] mb-0.5">Slack Notifications</div>
+                  <div className="text-[14px] font-medium text-gray-900 dark:text-[#E4E1EA] mb-0.5">Slack Notifications</div>
                   <div className="text-[13px] text-gray-500 dark:text-[#94A3B8] mb-3">
                     Sends a rich Block Kit message to your Slack channel after each investigation completes.
                   </div>
                   {!slackConfigured && (
-                    <div className="text-[12px] text-gray-500 dark:text-[#94A3B8] bg-gray-50 dark:bg-[#1E1E24] border border-gray-200 dark:border-[#27272F] rounded-md px-3 py-2 font-mono">
-                      Add <span className="text-indigo-500 dark:text-[#818CF8] font-semibold">SLACK_WEBHOOK_URL</span>=https://hooks.slack.com/… to your <span className="text-gray-700 dark:text-[#CBD5E1]">.env</span> file and restart
+                    <div className="text-[12px] text-gray-500 dark:text-[#94A3B8] bg-gray-50 dark:bg-[#15181F] border border-gray-200 dark:border-[#1E222B] rounded-md px-3 py-2 font-mono">
+                      Add <span className="text-indigo-500 dark:text-[#00A3FF] font-semibold">SLACK_WEBHOOK_URL</span>=https://hooks.slack.com/… to your <span className="text-gray-700 dark:text-[#CBD5E1]">.env</span> file and restart
                     </div>
                   )}
                   {slackConfigured && (
@@ -502,31 +502,31 @@ export default function SettingsPage() {
             </div>
 
             {/* Telegram — live integration */}
-            <div className="bg-white dark:bg-[#18181C] border border-gray-200 dark:border-[#27272F] rounded-lg overflow-hidden shadow-[0_1px_2px_rgba(0,0,0,0.04)]">
-              <div className="px-4 py-[11px] border-b border-gray-200 dark:border-[#27272F] bg-gray-50 dark:bg-[#1E1E24] flex items-center justify-between">
+            <div className="bg-white dark:bg-[#0A0C10] border border-gray-200 dark:border-[#1E222B] rounded-lg overflow-hidden shadow-[0_1px_2px_rgba(0,0,0,0.04)]">
+              <div className="px-4 py-[11px] border-b border-gray-200 dark:border-[#1E222B] bg-gray-50 dark:bg-[#15181F] flex items-center justify-between">
                 <span className="text-[11px] font-semibold text-gray-400 dark:text-[#64748B] uppercase tracking-[0.07em]">Telegram</span>
                 <span className={cn(
                   'text-[10px] font-semibold px-1.5 py-0.5 rounded',
                   telegramConfigured
                     ? 'text-emerald-600 dark:text-emerald-400 bg-emerald-50 dark:bg-emerald-500/10'
-                    : 'text-gray-500 dark:text-[#64748B] bg-gray-100 dark:bg-[#27272F]'
+                    : 'text-gray-500 dark:text-[#64748B] bg-gray-100 dark:bg-[#1E222B]'
                 )}>
                   {telegramConfigured ? 'Configured' : 'Not configured'}
                 </span>
               </div>
               <div className="px-[18px] py-[14px] flex items-start gap-3">
-                <div className="w-[34px] h-[34px] bg-gray-100 dark:bg-[#27272F] rounded-lg flex items-center justify-center shrink-0 mt-0.5">
+                <div className="w-[34px] h-[34px] bg-gray-100 dark:bg-[#1E222B] rounded-lg flex items-center justify-center shrink-0 mt-0.5">
                   <TelegramIcon size={20} />
                 </div>
                 <div className="flex-1 min-w-0">
-                  <div className="text-[14px] font-medium text-gray-900 dark:text-[#F1F5F9] mb-0.5">Telegram Notifications</div>
+                  <div className="text-[14px] font-medium text-gray-900 dark:text-[#E4E1EA] mb-0.5">Telegram Notifications</div>
                   <div className="text-[13px] text-gray-500 dark:text-[#94A3B8] mb-3">
                     Sends a formatted message to your Telegram bot after each investigation completes.
                   </div>
                   {!telegramConfigured && (
-                    <div className="text-[12px] text-gray-500 dark:text-[#94A3B8] bg-gray-50 dark:bg-[#1E1E24] border border-gray-200 dark:border-[#27272F] rounded-md px-3 py-2 font-mono space-y-1">
-                      <div>Add <span className="text-indigo-500 dark:text-[#818CF8] font-semibold">TELEGRAM_BOT_TOKEN</span>=123456:ABC-… to your <span className="text-gray-700 dark:text-[#CBD5E1]">.env</span> file</div>
-                      <div>Add <span className="text-indigo-500 dark:text-[#818CF8] font-semibold">TELEGRAM_CHAT_ID</span>=-100… to your <span className="text-gray-700 dark:text-[#CBD5E1]">.env</span> file and restart</div>
+                    <div className="text-[12px] text-gray-500 dark:text-[#94A3B8] bg-gray-50 dark:bg-[#15181F] border border-gray-200 dark:border-[#1E222B] rounded-md px-3 py-2 font-mono space-y-1">
+                      <div>Add <span className="text-indigo-500 dark:text-[#00A3FF] font-semibold">TELEGRAM_BOT_TOKEN</span>=123456:ABC-… to your <span className="text-gray-700 dark:text-[#CBD5E1]">.env</span> file</div>
+                      <div>Add <span className="text-indigo-500 dark:text-[#00A3FF] font-semibold">TELEGRAM_CHAT_ID</span>=-100… to your <span className="text-gray-700 dark:text-[#CBD5E1]">.env</span> file and restart</div>
                     </div>
                   )}
                   {telegramConfigured && (
@@ -546,17 +546,17 @@ export default function SettingsPage() {
             </div>
 
             {/* Coming soon integrations */}
-            <div className="bg-white dark:bg-[#18181C] border border-gray-200 dark:border-[#27272F] rounded-lg overflow-hidden shadow-[0_1px_2px_rgba(0,0,0,0.04)]">
+            <div className="bg-white dark:bg-[#0A0C10] border border-gray-200 dark:border-[#1E222B] rounded-lg overflow-hidden shadow-[0_1px_2px_rgba(0,0,0,0.04)]">
               {COMING_SOON_INTEGRATIONS.map((intg, i) => (
-                <div key={i} className={`flex items-center gap-3 px-[18px] py-[14px] ${i < COMING_SOON_INTEGRATIONS.length - 1 ? 'border-b border-gray-200 dark:border-[#27272F]' : ''}`}>
-                  <div className="w-[34px] h-[34px] bg-gray-100 dark:bg-[#27272F] rounded-lg flex items-center justify-center shrink-0">
+                <div key={i} className={`flex items-center gap-3 px-[18px] py-[14px] ${i < COMING_SOON_INTEGRATIONS.length - 1 ? 'border-b border-gray-200 dark:border-[#1E222B]' : ''}`}>
+                  <div className="w-[34px] h-[34px] bg-gray-100 dark:bg-[#1E222B] rounded-lg flex items-center justify-center shrink-0">
                     <IntegrationIcon name={intg.iconKey} size={20} />
                   </div>
                   <div className="flex-1">
-                    <div className="text-[14px] font-medium text-gray-900 dark:text-[#F1F5F9]">{intg.name}</div>
+                    <div className="text-[14px] font-medium text-gray-900 dark:text-[#E4E1EA]">{intg.name}</div>
                     <div className="text-[13px] text-gray-500 dark:text-[#94A3B8]">{intg.desc}</div>
                   </div>
-                  <span className="text-[11px] font-medium text-gray-400 dark:text-[#64748B] bg-gray-100 dark:bg-[#27272F] px-2 py-[3px] rounded-full">
+                  <span className="text-[11px] font-medium text-gray-400 dark:text-[#64748B] bg-gray-100 dark:bg-[#1E222B] px-2 py-[3px] rounded-full">
                     Coming soon
                   </span>
                 </div>
@@ -564,7 +564,7 @@ export default function SettingsPage() {
             </div>
 
             <a href="https://openrouter.ai/models" target="_blank" rel="noreferrer"
-              className="inline-flex items-center gap-1.5 text-[13px] text-indigo-500 dark:text-[#818CF8] hover:text-indigo-600 dark:hover:text-[#6366F1] transition-colors">
+              className="inline-flex items-center gap-1.5 text-[13px] text-indigo-500 dark:text-[#00A3FF] hover:text-indigo-600 dark:hover:text-[#0086D6] transition-colors">
               Browse available models on OpenRouter <ExternalLink size={13} />
             </a>
           </div>
@@ -575,8 +575,8 @@ export default function SettingsPage() {
           <div className="space-y-5">
 
             {/* Config card */}
-            <div className="bg-white dark:bg-[#18181C] border border-gray-200 dark:border-[#27272F] rounded-lg overflow-hidden shadow-[0_1px_2px_rgba(0,0,0,0.04)]">
-              <div className="px-4 py-[11px] border-b border-gray-200 dark:border-[#27272F] bg-gray-50 dark:bg-[#1E1E24] flex items-center justify-between">
+            <div className="bg-white dark:bg-[#0A0C10] border border-gray-200 dark:border-[#1E222B] rounded-lg overflow-hidden shadow-[0_1px_2px_rgba(0,0,0,0.04)]">
+              <div className="px-4 py-[11px] border-b border-gray-200 dark:border-[#1E222B] bg-gray-50 dark:bg-[#15181F] flex items-center justify-between">
                 <span className="text-[11px] font-semibold text-gray-400 dark:text-[#64748B] uppercase tracking-[0.07em]">Event Detection</span>
                 <button
                   onClick={saveAwsConfig}
@@ -587,7 +587,7 @@ export default function SettingsPage() {
                 </button>
               </div>
 
-              <div className="divide-y divide-gray-100 dark:divide-[#27272F]">
+              <div className="divide-y divide-gray-100 dark:divide-[#1E222B]">
                 {[
                   { label: 'SQS Queue URL', hint: 'Event consumer polls this queue for CloudWatch alarms', value: sqsUrl, set: setSqsUrl, placeholder: 'https://sqs.us-east-1.amazonaws.com/123456789012/opendevops' },
                   { label: 'AWS Region',    hint: 'Region for SQS and EventBridge resources', value: awsRegion, set: setAwsRegion, placeholder: 'us-east-1' },
@@ -609,15 +609,15 @@ export default function SettingsPage() {
             </div>
 
             {/* Event Monitoring card */}
-            <div className="bg-white dark:bg-[#18181C] border border-gray-200 dark:border-[#27272F] rounded-lg overflow-hidden shadow-[0_1px_2px_rgba(0,0,0,0.04)]">
-              <div className="px-4 py-[11px] border-b border-gray-200 dark:border-[#27272F] bg-gray-50 dark:bg-[#1E1E24] flex items-center justify-between">
+            <div className="bg-white dark:bg-[#0A0C10] border border-gray-200 dark:border-[#1E222B] rounded-lg overflow-hidden shadow-[0_1px_2px_rgba(0,0,0,0.04)]">
+              <div className="px-4 py-[11px] border-b border-gray-200 dark:border-[#1E222B] bg-gray-50 dark:bg-[#15181F] flex items-center justify-between">
                 <div className="flex items-center gap-2">
                   <span className="text-[11px] font-semibold text-gray-400 dark:text-[#64748B] uppercase tracking-[0.07em]">Event Monitoring</span>
                   <span className={cn(
                     'flex items-center gap-1 text-[10px] font-semibold px-1.5 py-0.5 rounded',
                     infraEnabled
                       ? 'text-emerald-600 dark:text-emerald-400 bg-emerald-50 dark:bg-emerald-500/10'
-                      : 'text-gray-500 dark:text-[#64748B] bg-gray-100 dark:bg-[#27272F]'
+                      : 'text-gray-500 dark:text-[#64748B] bg-gray-100 dark:bg-[#1E222B]'
                   )}>
                     <Radio size={9} />
                     {infraEnabled ? 'Enabled' : 'Disabled'}
@@ -662,13 +662,13 @@ export default function SettingsPage() {
             </div>
 
             {/* Permissions card */}
-            <div className="bg-white dark:bg-[#18181C] border border-gray-200 dark:border-[#27272F] rounded-lg overflow-hidden shadow-[0_1px_2px_rgba(0,0,0,0.04)]">
-              <div className="px-4 py-[11px] border-b border-gray-200 dark:border-[#27272F] bg-gray-50 dark:bg-[#1E1E24] flex items-center justify-between">
+            <div className="bg-white dark:bg-[#0A0C10] border border-gray-200 dark:border-[#1E222B] rounded-lg overflow-hidden shadow-[0_1px_2px_rgba(0,0,0,0.04)]">
+              <div className="px-4 py-[11px] border-b border-gray-200 dark:border-[#1E222B] bg-gray-50 dark:bg-[#15181F] flex items-center justify-between">
                 <span className="text-[11px] font-semibold text-gray-400 dark:text-[#64748B] uppercase tracking-[0.07em]">AWS Permissions</span>
                 <button
                   onClick={checkPerms}
                   disabled={awsChecking}
-                  className="flex items-center gap-1.5 text-[12px] font-medium px-3 py-1 text-gray-600 dark:text-[#94A3B8] border border-gray-200 dark:border-[#27272F] rounded-md hover:bg-gray-50 dark:hover:bg-[#27272F] disabled:opacity-50 transition-colors"
+                  className="flex items-center gap-1.5 text-[12px] font-medium px-3 py-1 text-gray-600 dark:text-[#94A3B8] border border-gray-200 dark:border-[#1E222B] rounded-md hover:bg-gray-50 dark:hover:bg-[#1E222B] disabled:opacity-50 transition-colors"
                 >
                   {awsChecking
                     ? <><Loader2 size={11} className="animate-spin" /> Checking…</>
@@ -685,8 +685,8 @@ export default function SettingsPage() {
 
               {total > 0 && (
                 <>
-                  <div className="px-4 py-[9px] border-b border-gray-100 dark:border-[#27272F] flex items-center gap-3">
-                    <div className="flex-1 h-1.5 bg-gray-100 dark:bg-[#27272F] rounded-full overflow-hidden">
+                  <div className="px-4 py-[9px] border-b border-gray-100 dark:border-[#1E222B] flex items-center gap-3">
+                    <div className="flex-1 h-1.5 bg-gray-100 dark:bg-[#1E222B] rounded-full overflow-hidden">
                       <div
                         className="h-full bg-emerald-500 rounded-full transition-all duration-700"
                         style={{ width: `${(passed / total) * 100}%` }}
@@ -698,7 +698,7 @@ export default function SettingsPage() {
                   {Object.entries(perms).map(([svc, r], i) => (
                     <div key={svc} className={cn(
                       'flex items-center gap-3 px-4 py-[9px]',
-                      i < total - 1 ? 'border-b border-gray-100 dark:border-[#27272F]' : ''
+                      i < total - 1 ? 'border-b border-gray-100 dark:border-[#1E222B]' : ''
                     )}>
                       <div className="shrink-0">
                         {r.passed
@@ -726,8 +726,8 @@ export default function SettingsPage() {
 
         {/* Preferences tab */}
         {tab === 'preferences' && (
-          <div className="bg-white dark:bg-[#18181C] border border-gray-200 dark:border-[#27272F] rounded-lg overflow-hidden shadow-[0_1px_2px_rgba(0,0,0,0.04)]">
-            <div className="px-4 py-[11px] border-b border-gray-200 dark:border-[#27272F] bg-gray-50 dark:bg-[#1E1E24]">
+          <div className="bg-white dark:bg-[#0A0C10] border border-gray-200 dark:border-[#1E222B] rounded-lg overflow-hidden shadow-[0_1px_2px_rgba(0,0,0,0.04)]">
+            <div className="px-4 py-[11px] border-b border-gray-200 dark:border-[#1E222B] bg-gray-50 dark:bg-[#15181F]">
               <span className="text-[11px] font-semibold text-gray-400 dark:text-[#64748B] uppercase tracking-[0.07em]">Appearance</span>
             </div>
             <div className="flex items-center justify-between px-4 py-[14px]">
@@ -739,7 +739,7 @@ export default function SettingsPage() {
                 onClick={toggle}
                 title="Toggle dark mode"
                 className="relative w-9 h-5 rounded-full shrink-0 transition-colors duration-200"
-                style={{ background: theme === 'dark' ? '#818CF8' : '#E5E7EB' }}
+                style={{ background: theme === 'dark' ? '#00A3FF' : '#E5E7EB' }}
               >
                 <span
                   className="absolute top-[2px] w-4 h-4 rounded-full bg-white flex items-center justify-center text-[9px] transition-all duration-200"
diff --git a/apps/frontend/src/pages/UsersPage.tsx b/apps/frontend/src/pages/UsersPage.tsx
index 8659bbd..e702364 100644
--- a/apps/frontend/src/pages/UsersPage.tsx
+++ b/apps/frontend/src/pages/UsersPage.tsx
@@ -6,11 +6,11 @@ import type { User } from '../types';
 
 function RoleBadge({ role }: { role: string }) {
   return role === 'admin' ? (
-    <span className="inline-flex items-center gap-1 text-[11px] font-medium text-indigo-600 dark:text-[#818CF8] bg-indigo-50 dark:bg-[#1E1E3F] border border-indigo-200 dark:border-[#3730A3] rounded px-1.5 py-[2px]">
+    <span className="inline-flex items-center gap-1 text-[11px] font-medium text-indigo-600 dark:text-[#00A3FF] bg-indigo-50 dark:bg-[#04103A] border border-indigo-200 dark:border-[#0E4FA6] rounded px-1.5 py-[2px]">
       <Shield size={10} /> admin
     </span>
   ) : (
-    <span className="inline-flex items-center gap-1 text-[11px] font-medium text-gray-500 dark:text-[#94A3B8] bg-gray-100 dark:bg-[#27272F] border border-gray-200 dark:border-[#3F3F47] rounded px-1.5 py-[2px]">
+    <span className="inline-flex items-center gap-1 text-[11px] font-medium text-gray-500 dark:text-[#94A3B8] bg-gray-100 dark:bg-[#1E222B] border border-gray-200 dark:border-[#2A2F3A] rounded px-1.5 py-[2px]">
       <UserIcon size={10} /> user
     </span>
   );
@@ -67,37 +67,37 @@ export default function UsersPage() {
 
   if (!isAdmin) {
     return (
-      <div className="flex-1 flex items-center justify-center bg-gray-50 dark:bg-[#0F0F12]">
+      <div className="flex-1 flex items-center justify-center bg-gray-50 dark:bg-[#000000]">
         <div className="text-[13px] text-gray-400 dark:text-[#64748B]">Admin access required.</div>
       </div>
     );
   }
 
   return (
-    <div className="flex-1 overflow-y-auto bg-gray-50 dark:bg-[#0F0F12] min-h-0">
+    <div className="flex-1 overflow-y-auto bg-gray-50 dark:bg-[#000000] min-h-0">
       {/* Page header */}
-      <div className="bg-white dark:bg-[#18181C] border-b border-gray-200 dark:border-[#27272F] px-7 py-[14px]">
-        <div className="text-[16px] font-bold text-gray-900 dark:text-[#F1F5F9] tracking-[-0.02em]">Team</div>
+      <div className="bg-white dark:bg-[#0A0C10] border-b border-gray-200 dark:border-[#1E222B] px-7 py-[14px]">
+        <div className="text-[16px] font-bold text-gray-900 dark:text-[#E4E1EA] tracking-[-0.02em]">Team</div>
         <div className="text-[13px] text-gray-500 dark:text-[#94A3B8] mt-0.5">Manage users and roles</div>
       </div>
 
       <div className="px-7 py-6 max-w-[760px]">
-        <div className="bg-white dark:bg-[#18181C] border border-gray-200 dark:border-[#27272F] rounded-lg overflow-hidden shadow-[0_1px_2px_rgba(0,0,0,0.04)]">
+        <div className="bg-white dark:bg-[#0A0C10] border border-gray-200 dark:border-[#1E222B] rounded-lg overflow-hidden shadow-[0_1px_2px_rgba(0,0,0,0.04)]">
           {/* Table header */}
-          <div className="px-4 py-[11px] border-b border-gray-200 dark:border-[#27272F] flex items-center justify-between bg-gray-50 dark:bg-[#1E1E24]">
+          <div className="px-4 py-[11px] border-b border-gray-200 dark:border-[#1E222B] flex items-center justify-between bg-gray-50 dark:bg-[#15181F]">
             <span className="text-[11px] font-semibold text-gray-400 dark:text-[#64748B] uppercase tracking-[0.07em]">
               Team members
             </span>
             <button
               onClick={() => { setShowAdd(s => !s); setAddError(''); }}
-              className="flex items-center gap-1.5 text-[13px] font-medium text-gray-500 dark:text-[#94A3B8] hover:text-gray-700 dark:hover:text-[#F1F5F9] px-2.5 py-[5px] border border-gray-300 dark:border-[#3F3F47] rounded-[5px] bg-white dark:bg-[#18181C] shadow-[0_1px_2px_rgba(0,0,0,0.04)] transition-colors"
+              className="flex items-center gap-1.5 text-[13px] font-medium text-gray-500 dark:text-[#94A3B8] hover:text-gray-700 dark:hover:text-[#E4E1EA] px-2.5 py-[5px] border border-gray-300 dark:border-[#2A2F3A] rounded-[5px] bg-white dark:bg-[#0A0C10] shadow-[0_1px_2px_rgba(0,0,0,0.04)] transition-colors"
             >
               <UserPlus size={12} /> Add user
             </button>
           </div>
 
           {/* Column headers */}
-          <div className="flex px-4 py-[7px] bg-gray-50 dark:bg-[#1E1E24] border-b border-gray-200 dark:border-[#27272F]">
+          <div className="flex px-4 py-[7px] bg-gray-50 dark:bg-[#15181F] border-b border-gray-200 dark:border-[#1E222B]">
             <span className="flex-1 text-[10px] font-semibold text-gray-400 dark:text-[#64748B] uppercase tracking-[0.07em]">Name / Email</span>
             <span className="w-24 text-[10px] font-semibold text-gray-400 dark:text-[#64748B] uppercase tracking-[0.07em]">Role</span>
             <span className="w-8" />
@@ -111,9 +111,9 @@ export default function UsersPage() {
             </div>
           ) : (
             users.map((u, i) => (
-              <div key={u.id} className={`flex items-center gap-2 px-4 py-[10px] ${i < users.length - 1 ? 'border-b border-gray-200 dark:border-[#27272F]' : ''}`}>
+              <div key={u.id} className={`flex items-center gap-2 px-4 py-[10px] ${i < users.length - 1 ? 'border-b border-gray-200 dark:border-[#1E222B]' : ''}`}>
                 <div className="flex-1 min-w-0">
-                  <div className="text-[14px] font-medium text-gray-900 dark:text-[#F1F5F9] truncate">{u.name}</div>
+                  <div className="text-[14px] font-medium text-gray-900 dark:text-[#E4E1EA] truncate">{u.name}</div>
                   <div className="text-[12px] text-gray-400 dark:text-[#64748B] truncate">{u.email}</div>
                 </div>
                 <div className="w-24">
@@ -123,7 +123,7 @@ export default function UsersPage() {
                     <select
                       value={u.role}
                       onChange={e => handleRoleChange(u.id, e.target.value as 'admin' | 'user')}
-                      className="text-[12px] font-medium bg-white dark:bg-[#18181C] border border-gray-300 dark:border-[#3F3F47] rounded-[5px] px-1.5 py-[3px] text-gray-700 dark:text-[#CBD5E1] outline-none focus:border-indigo-500 dark:focus:border-[#818CF8] transition-colors cursor-pointer"
+                      className="text-[12px] font-medium bg-white dark:bg-[#0A0C10] border border-gray-300 dark:border-[#2A2F3A] rounded-[5px] px-1.5 py-[3px] text-gray-700 dark:text-[#CBD5E1] outline-none focus:border-indigo-500 dark:focus:border-[#00A3FF] transition-colors cursor-pointer"
                     >
                       <option value="user">user</option>
                       <option value="admin">admin</option>
@@ -134,7 +134,7 @@ export default function UsersPage() {
                   {currentUser?.id !== u.id && (
                     <button
                       onClick={() => handleDelete(u.id)}
-                      className="p-[3px] rounded hover:bg-gray-100 dark:hover:bg-[#27272F] text-gray-400 dark:text-[#64748B] hover:text-red-500 dark:hover:text-[#F87171] transition-colors"
+                      className="p-[3px] rounded hover:bg-gray-100 dark:hover:bg-[#1E222B] text-gray-400 dark:text-[#64748B] hover:text-red-500 dark:hover:text-[#F87171] transition-colors"
                     >
                       <Trash2 size={13} />
                     </button>
@@ -146,28 +146,28 @@ export default function UsersPage() {
 
           {/* Add user inline form */}
           {showAdd && (
-            <form onSubmit={handleAdd} className="border-t border-gray-200 dark:border-[#27272F] px-4 py-4 bg-gray-50 dark:bg-[#1E1E24] flex flex-col gap-3">
+            <form onSubmit={handleAdd} className="border-t border-gray-200 dark:border-[#1E222B] px-4 py-4 bg-gray-50 dark:bg-[#15181F] flex flex-col gap-3">
               <div className="text-[12px] font-semibold text-gray-700 dark:text-[#CBD5E1]">Add new user</div>
               <div className="grid grid-cols-2 gap-3">
                 <div>
                   <label className="block text-[12px] font-medium text-gray-500 dark:text-[#94A3B8] mb-1">Name</label>
                   <input value={addName} onChange={e => setAddName(e.target.value)} required placeholder="Full name"
-                    className="w-full text-[13px] text-gray-900 dark:text-[#F1F5F9] bg-white dark:bg-[#18181C] border border-gray-300 dark:border-[#3F3F47] rounded-[5px] px-2 py-1.5 outline-none focus:border-indigo-500 dark:focus:border-[#818CF8] transition-all" />
+                    className="w-full text-[13px] text-gray-900 dark:text-[#E4E1EA] bg-white dark:bg-[#0A0C10] border border-gray-300 dark:border-[#2A2F3A] rounded-[5px] px-2 py-1.5 outline-none focus:border-indigo-500 dark:focus:border-[#00A3FF] transition-all" />
                 </div>
                 <div>
                   <label className="block text-[12px] font-medium text-gray-500 dark:text-[#94A3B8] mb-1">Email</label>
                   <input type="email" value={addEmail} onChange={e => setAddEmail(e.target.value)} required placeholder="email@example.com"
-                    className="w-full text-[13px] text-gray-900 dark:text-[#F1F5F9] bg-white dark:bg-[#18181C] border border-gray-300 dark:border-[#3F3F47] rounded-[5px] px-2 py-1.5 outline-none focus:border-indigo-500 dark:focus:border-[#818CF8] transition-all" />
+                    className="w-full text-[13px] text-gray-900 dark:text-[#E4E1EA] bg-white dark:bg-[#0A0C10] border border-gray-300 dark:border-[#2A2F3A] rounded-[5px] px-2 py-1.5 outline-none focus:border-indigo-500 dark:focus:border-[#00A3FF] transition-all" />
                 </div>
                 <div>
                   <label className="block text-[12px] font-medium text-gray-500 dark:text-[#94A3B8] mb-1">Password</label>
                   <input type="password" value={addPw} onChange={e => setAddPw(e.target.value)} required minLength={8} placeholder="Min 8 chars"
-                    className="w-full text-[13px] text-gray-900 dark:text-[#F1F5F9] bg-white dark:bg-[#18181C] border border-gray-300 dark:border-[#3F3F47] rounded-[5px] px-2 py-1.5 outline-none focus:border-indigo-500 dark:focus:border-[#818CF8] transition-all" />
+                    className="w-full text-[13px] text-gray-900 dark:text-[#E4E1EA] bg-white dark:bg-[#0A0C10] border border-gray-300 dark:border-[#2A2F3A] rounded-[5px] px-2 py-1.5 outline-none focus:border-indigo-500 dark:focus:border-[#00A3FF] transition-all" />
                 </div>
                 <div>
                   <label className="block text-[12px] font-medium text-gray-500 dark:text-[#94A3B8] mb-1">Role</label>
                   <select value={addRole} onChange={e => setAddRole(e.target.value as 'admin' | 'user')}
-                    className="w-full text-[12px] bg-white dark:bg-[#18181C] border border-gray-300 dark:border-[#3F3F47] rounded-[5px] px-2 py-1.5 text-gray-900 dark:text-[#F1F5F9] outline-none focus:border-indigo-500 dark:focus:border-[#818CF8] transition-all cursor-pointer">
+                    className="w-full text-[12px] bg-white dark:bg-[#0A0C10] border border-gray-300 dark:border-[#2A2F3A] rounded-[5px] px-2 py-1.5 text-gray-900 dark:text-[#E4E1EA] outline-none focus:border-indigo-500 dark:focus:border-[#00A3FF] transition-all cursor-pointer">
                     <option value="user">user</option>
                     <option value="admin">admin</option>
                   </select>
@@ -176,11 +176,11 @@ export default function UsersPage() {
               {addError && <div className="text-[11px] text-red-500 dark:text-[#F87171]">{addError}</div>}
               <div className="flex gap-2">
                 <button type="submit" disabled={addBusy}
-                  className="flex items-center gap-1.5 text-[12px] font-medium text-white bg-indigo-500 dark:bg-[#818CF8] hover:bg-indigo-600 dark:hover:bg-[#6366F1] disabled:opacity-50 px-3 py-1.5 rounded-[5px] transition-colors">
+                  className="flex items-center gap-1.5 text-[12px] font-medium text-white bg-indigo-500 dark:bg-[#00A3FF] hover:bg-indigo-600 dark:hover:bg-[#0086D6] disabled:opacity-50 px-3 py-1.5 rounded-[5px] transition-colors">
                   <Plus size={12} /> {addBusy ? 'Creating…' : 'Create user'}
                 </button>
                 <button type="button" onClick={() => setShowAdd(false)}
-                  className="text-[12px] font-medium text-gray-500 dark:text-[#94A3B8] hover:text-gray-700 dark:hover:text-[#F1F5F9] px-3 py-1.5 rounded-[5px] transition-colors">
+                  className="text-[12px] font-medium text-gray-500 dark:text-[#94A3B8] hover:text-gray-700 dark:hover:text-[#E4E1EA] px-3 py-1.5 rounded-[5px] transition-colors">
                   Cancel
                 </button>
               </div>
diff --git a/apps/frontend/tailwind.config.js b/apps/frontend/tailwind.config.js
index 01a493e..6f73782 100644
--- a/apps/frontend/tailwind.config.js
+++ b/apps/frontend/tailwind.config.js
@@ -1,4 +1,21 @@
 /** @type {import('tailwindcss').Config} */
+
+// Brand ramp — anchored on the two brand blues (#00A3FF cyan, #010978 deep blue).
+// `indigo`/`violet` are remapped to this so existing accent utilities pick up the brand.
+const brand = {
+  50:  '#E6F4FF',
+  100: '#CCE9FF',
+  200: '#99D3FF',
+  300: '#66BDFF',
+  400: '#33B3FF',
+  500: '#00A3FF',
+  600: '#0086D6',
+  700: '#015FB0',
+  800: '#013A8C',
+  900: '#010978',
+  950: '#01063F',
+}
+
 export default {
   content: ['./index.html', './src/**/*.{ts,tsx}'],
   darkMode: 'class',
@@ -8,6 +25,11 @@ export default {
         sans: ['"Inter Variable"', 'Inter', '"SF Pro Display"', '-apple-system', 'BlinkMacSystemFont', '"Segoe UI"', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', '"Open Sans"', '"Helvetica Neue"', 'sans-serif'],
         mono: ['"SF Mono"', '"Fira Code"', '"Cascadia Code"', 'Consolas', 'monospace'],
       },
+      colors: {
+        brand,
+        indigo: brand,
+        violet: brand,
+      },
     },
   },
   plugins: [require('@tailwindcss/typography')],