diff --git a/resources/css/invoiceshelf.css b/resources/css/invoiceshelf.css
index 2a39ef7a..01fe3dd9 100644
--- a/resources/css/invoiceshelf.css
+++ b/resources/css/invoiceshelf.css
@@ -39,6 +39,8 @@
   --color-line-strong: var(--color-line-strong);
   --color-hover: var(--color-hover);
   --color-hover-strong: var(--color-hover-strong);
+  --color-header-from: var(--color-header-from);
+  --color-header-to: var(--color-header-to);
 
   /* Status badge text */
   --color-status-yellow: var(--color-status-yellow);
diff --git a/resources/css/themes.css b/resources/css/themes.css
index 9313cab8..d322e3ae 100644
--- a/resources/css/themes.css
+++ b/resources/css/themes.css
@@ -32,6 +32,10 @@
     --color-hover: rgb(249, 250, 251);
     --color-hover-strong: rgb(243, 244, 246);
 
+    /* Header gradient (fixed, not affected by dark mode) */
+    --color-header-from: rgb(74, 61, 255);
+    --color-header-to: rgb(118, 117, 255);
+
     /* Status badge text */
     --color-status-yellow: rgb(113, 63, 18);
     --color-status-green: rgb(20, 83, 45);
@@ -85,6 +89,10 @@
     --color-alert-success-bg: rgba(20, 83, 45, 0.2);
     --color-alert-success-text: rgb(134, 239, 172);
 
+    /* Header gradient (darker in dark mode) */
+    --color-header-from: rgb(51, 22, 255);
+    --color-header-to: rgb(74, 61, 255);
+
     /* Primary adjustments for dark mode */
     --color-primary-50: rgba(167, 170, 255, 0.15);
     --color-primary-100: rgba(167, 170, 255, 0.25);
diff --git a/resources/scripts/admin/layouts/partials/TheSiteHeader.vue b/resources/scripts/admin/layouts/partials/TheSiteHeader.vue
index 08486da9..06369b05 100644
--- a/resources/scripts/admin/layouts/partials/TheSiteHeader.vue
+++ b/resources/scripts/admin/layouts/partials/TheSiteHeader.vue
@@ -13,8 +13,8 @@
       py-3
       md:h-16 md:px-8
       bg-linear-to-r
-      from-primary-500
-      to-primary-400
+      from-header-from
+      to-header-to
     "
   >
     <router-link