diff --git a/src/features/asset-types/pages/NewAssetType.tsx b/src/features/asset-types/pages/NewAssetType.tsx
index 34c7813..138ab33 100644
--- a/src/features/asset-types/pages/NewAssetType.tsx
+++ b/src/features/asset-types/pages/NewAssetType.tsx
@@ -111,11 +111,11 @@ const errorClass = 'text-xs text-red-500 mt-1';
 
 function CardHeader({ title, subtitle }: { title: string; subtitle?: string }) {
   return (
-    <div className="px-6 py-4 border-b border-primary/5 bg-gradient-to-r from-primary/5/70 to-white flex items-center gap-3">
+    <div className="px-6 py-4 border-b border-primary/5 bg-gradient-to-r from-primary/5/70 to-surface flex items-center gap-3">
       <div className="w-1 h-5 bg-primary-light rounded-full shrink-0" />
       <div>
-        <h3 className="font-semibold text-primary-dark text-sm">{title}</h3>
-        {subtitle && <p className="text-xs text-primary-light mt-0.5">{subtitle}</p>}
+        <h3 className="font-semibold text-foreground text-sm">{title}</h3>
+        {subtitle && <p className="text-xs text-muted-foreground mt-0.5">{subtitle}</p>}
       </div>
     </div>
   );
diff --git a/src/features/assets/pages/NewAsset.tsx b/src/features/assets/pages/NewAsset.tsx
index b120f09..d5cbd1d 100644
--- a/src/features/assets/pages/NewAsset.tsx
+++ b/src/features/assets/pages/NewAsset.tsx
@@ -162,11 +162,11 @@ export default function NewAsset() {
         {/* Left Column: File Upload */}
         <div className="lg:col-span-2 space-y-6">
           <div className="bg-surface rounded-xl border border-primary/10 shadow-sm overflow-hidden">
-            <div className="px-6 py-4 border-b border-primary/5 bg-gradient-to-r from-primary/5/70 to-white flex items-center gap-3">
+            <div className="px-6 py-4 border-b border-primary/5 bg-gradient-to-r from-primary/5/70 to-surface flex items-center gap-3">
               <div className="w-1 h-5 bg-primary-light rounded-full shrink-0" />
               <div>
-                <h3 className="font-semibold text-primary-dark text-sm">Media File</h3>
-                <p className="text-xs text-primary-light mt-0.5">Upload product images, videos or documentation</p>
+                <h3 className="font-semibold text-foreground text-sm">Media File</h3>
+                <p className="text-xs text-muted-foreground mt-0.5">Upload product images, videos or documentation</p>
               </div>
             </div>
             <div className="p-6">
@@ -267,11 +267,11 @@ export default function NewAsset() {
         {/* Right Column: Specifications */}
         <div className="space-y-6">
           <div className="bg-surface rounded-xl border border-primary/10 shadow-sm overflow-hidden">
-            <div className="px-6 py-4 border-b border-primary/5 bg-gradient-to-r from-primary/5/70 to-white flex items-center gap-3">
+            <div className="px-6 py-4 border-b border-primary/5 bg-gradient-to-r from-primary/5/70 to-surface flex items-center gap-3">
               <div className="w-1 h-5 bg-primary-light rounded-full shrink-0" />
               <div>
-                <h3 className="font-semibold text-primary-dark text-sm">Asset Properties</h3>
-                <p className="text-xs text-primary-light mt-0.5">Define name, classification and visibility</p>
+                <h3 className="font-semibold text-foreground text-sm">Asset Properties</h3>
+                <p className="text-xs text-muted-foreground mt-0.5">Define name, classification and visibility</p>
               </div>
             </div>
 
diff --git a/src/features/attribute-groups/pages/NewAttributeGroup.tsx b/src/features/attribute-groups/pages/NewAttributeGroup.tsx
index 4f7ace8..fff1193 100644
--- a/src/features/attribute-groups/pages/NewAttributeGroup.tsx
+++ b/src/features/attribute-groups/pages/NewAttributeGroup.tsx
@@ -26,11 +26,11 @@ const errorClass = "text-xs text-red-500 mt-1";
 
 function CardHeader({ title, subtitle }: { title: string; subtitle: string }) {
   return (
-    <div className="px-6 py-4 border-b border-primary/5 bg-gradient-to-r from-primary/5/70 to-white flex items-center gap-3">
+    <div className="px-6 py-4 border-b border-primary/5 bg-gradient-to-r from-primary/5/70 to-surface flex items-center gap-3">
       <div className="w-1 h-5 bg-primary-light rounded-full shrink-0" />
       <div>
-        <h3 className="font-semibold text-primary-dark text-sm">{title}</h3>
-        <p className="text-xs text-primary-light mt-0.5">{subtitle}</p>
+        <h3 className="font-semibold text-foreground text-sm">{title}</h3>
+        <p className="text-xs text-muted-foreground mt-0.5">{subtitle}</p>
       </div>
     </div>
   );
diff --git a/src/features/attribute-sets/pages/NewAttributeSet.tsx b/src/features/attribute-sets/pages/NewAttributeSet.tsx
index 1d3c28b..a76b8ab 100644
--- a/src/features/attribute-sets/pages/NewAttributeSet.tsx
+++ b/src/features/attribute-sets/pages/NewAttributeSet.tsx
@@ -27,11 +27,11 @@ const errorClass = "text-xs text-red-500 mt-1";
 
 function CardHeader({ title, subtitle }: { title: string; subtitle: string }) {
   return (
-    <div className="px-6 py-4 border-b border-primary/5 bg-gradient-to-r from-primary/5/70 to-white flex items-center gap-3">
+    <div className="px-6 py-4 border-b border-primary/5 bg-gradient-to-r from-primary/5/70 to-surface flex items-center gap-3">
       <div className="w-1 h-5 bg-primary-light rounded-full shrink-0" />
       <div>
-        <h3 className="font-semibold text-primary-dark text-sm">{title}</h3>
-        <p className="text-xs text-primary-light mt-0.5">{subtitle}</p>
+        <h3 className="font-semibold text-foreground text-sm">{title}</h3>
+        <p className="text-xs text-muted-foreground mt-0.5">{subtitle}</p>
       </div>
     </div>
   );
diff --git a/src/features/attributes/pages/NewAttribute.tsx b/src/features/attributes/pages/NewAttribute.tsx
index 4277612..5585d95 100644
--- a/src/features/attributes/pages/NewAttribute.tsx
+++ b/src/features/attributes/pages/NewAttribute.tsx
@@ -25,11 +25,11 @@ const errorClass = "text-xs text-red-500 mt-1";
 
 function CardHeader({ title, subtitle }: { title: string; subtitle: string }) {
   return (
-    <div className="px-6 py-4 border-b border-primary/5 bg-gradient-to-r from-primary/5/70 to-white flex items-center gap-3">
+    <div className="px-6 py-4 border-b border-primary/5 bg-gradient-to-r from-primary/5/70 to-surface flex items-center gap-3">
       <div className="w-1 h-5 bg-primary-light rounded-full shrink-0" />
       <div>
-        <h3 className="font-semibold text-primary-dark text-sm">{title}</h3>
-        <p className="text-xs text-primary-light mt-0.5">{subtitle}</p>
+        <h3 className="font-semibold text-foreground text-sm">{title}</h3>
+        <p className="text-xs text-muted-foreground mt-0.5">{subtitle}</p>
       </div>
     </div>
   );
diff --git a/src/features/brands/pages/NewBrandForm.tsx b/src/features/brands/pages/NewBrandForm.tsx
index b4efc41..3fa3b54 100644
--- a/src/features/brands/pages/NewBrandForm.tsx
+++ b/src/features/brands/pages/NewBrandForm.tsx
@@ -17,11 +17,11 @@ const errorClass = "text-xs text-red-500 mt-1";
 
 function CardHeader({ title, subtitle }: { title: string; subtitle: string }) {
   return (
-    <div className="px-6 py-4 border-b border-primary/5 bg-gradient-to-r from-primary/5/70 to-white flex items-center gap-3">
+    <div className="px-6 py-4 border-b border-primary/5 bg-gradient-to-r from-primary/5/70 to-surface flex items-center gap-3">
       <div className="w-1 h-5 bg-primary-light rounded-full shrink-0" />
       <div>
-        <h3 className="font-semibold text-primary-dark text-sm">{title}</h3>
-        <p className="text-xs text-primary-light mt-0.5">{subtitle}</p>
+        <h3 className="font-semibold text-foreground text-sm">{title}</h3>
+        <p className="text-xs text-muted-foreground mt-0.5">{subtitle}</p>
       </div>
     </div>
   );
diff --git a/src/features/categories/pages/CategoryView.tsx b/src/features/categories/pages/CategoryView.tsx
index 5dcfa1b..96eaedf 100644
--- a/src/features/categories/pages/CategoryView.tsx
+++ b/src/features/categories/pages/CategoryView.tsx
@@ -85,7 +85,7 @@ export default function CategoryView() {
         <div className="max-w-4xl space-y-6">
           <div className="bg-surface rounded-lg border border-primary/10 shadow-sm overflow-hidden">
             {/* Header info */}
-            <div className="px-6 py-5 border-b border-primary/5 bg-gradient-to-r from-primary/5/70 to-white flex items-center justify-between">
+            <div className="px-6 py-5 border-b border-primary/5 bg-gradient-to-r from-primary/5/70 to-surface flex items-center justify-between">
               <div className="flex items-center gap-3">
                 <div className="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center text-primary">
                   <Folder className="w-5 h-5" />
diff --git a/src/features/categories/pages/NewCategory.tsx b/src/features/categories/pages/NewCategory.tsx
index 51f1491..9380d59 100644
--- a/src/features/categories/pages/NewCategory.tsx
+++ b/src/features/categories/pages/NewCategory.tsx
@@ -152,13 +152,13 @@ export default function NewCategory() {
         {/* Body */}
         <div className="flex-1 md:overflow-y-auto px-6 pb-6">
           <form id="category-form" onSubmit={formik.handleSubmit} className="max-w-4xl bg-surface rounded-lg border border-primary/10 shadow-sm overflow-hidden mt-4">
-            <div className="px-6 py-4 border-b border-primary/5 bg-gradient-to-r from-primary/5/70 to-white flex items-center gap-3">
+            <div className="px-6 py-4 border-b border-primary/5 bg-gradient-to-r from-primary/5/70 to-surface flex items-center gap-3">
               <div className="w-1 h-5 bg-primary-light rounded-full shrink-0" />
               <div>
-                <h3 className="font-semibold text-primary-dark text-sm">
+                <h3 className="font-semibold text-foreground text-sm">
                   {isEdit ? "Category Details" : "New Category Classification"}
                 </h3>
-                <p className="text-xs text-primary-light mt-0.5">
+                <p className="text-xs text-muted-foreground mt-0.5">
                   Define the taxonomy settings for this product category
                 </p>
               </div>
diff --git a/src/features/channel-types/pages/NewChannelType.tsx b/src/features/channel-types/pages/NewChannelType.tsx
index 69dd954..dfb7e17 100644
--- a/src/features/channel-types/pages/NewChannelType.tsx
+++ b/src/features/channel-types/pages/NewChannelType.tsx
@@ -36,11 +36,11 @@ const errorClass = 'text-xs text-red-500 mt-1';
 
 function CardHeader({ title, subtitle }: { title: string; subtitle?: string }) {
   return (
-    <div className="px-6 py-4 border-b border-primary/5 bg-gradient-to-r from-primary/5/70 to-white flex items-center gap-3">
+    <div className="px-6 py-4 border-b border-primary/5 bg-gradient-to-r from-primary/5/70 to-surface flex items-center gap-3">
       <div className="w-1 h-5 bg-primary-light rounded-full shrink-0" />
       <div>
-        <h3 className="font-semibold text-primary-dark text-sm">{title}</h3>
-        {subtitle && <p className="text-xs text-primary-light mt-0.5">{subtitle}</p>}
+        <h3 className="font-semibold text-foreground text-sm">{title}</h3>
+        {subtitle && <p className="text-xs text-muted-foreground mt-0.5">{subtitle}</p>}
       </div>
     </div>
   );
diff --git a/src/features/channels/pages/NewChannel.tsx b/src/features/channels/pages/NewChannel.tsx
index 49dfecf..05b9b37 100644
--- a/src/features/channels/pages/NewChannel.tsx
+++ b/src/features/channels/pages/NewChannel.tsx
@@ -47,11 +47,11 @@ const labelClass = "block text-sm font-medium text-foreground mb-1.5";
 
 function CardHeader({ title, subtitle }: { title: string; subtitle: string }) {
   return (
-    <div className="px-6 py-4 border-b border-primary/5 bg-gradient-to-r from-primary/5/70 to-white flex items-center gap-3">
+    <div className="px-6 py-4 border-b border-primary/5 bg-gradient-to-r from-primary/5/70 to-surface flex items-center gap-3">
       <div className="w-1 h-5 bg-primary-light rounded-full shrink-0" />
       <div>
-        <h3 className="font-semibold text-primary-dark text-sm">{title}</h3>
-        <p className="text-xs text-primary-light mt-0.5">{subtitle}</p>
+        <h3 className="font-semibold text-foreground text-sm">{title}</h3>
+        <p className="text-xs text-muted-foreground mt-0.5">{subtitle}</p>
       </div>
     </div>
   );
diff --git a/src/features/family/pages/NewFamily.tsx b/src/features/family/pages/NewFamily.tsx
index 1525c21..c81422a 100644
--- a/src/features/family/pages/NewFamily.tsx
+++ b/src/features/family/pages/NewFamily.tsx
@@ -44,12 +44,12 @@ const labelClass = "block text-sm font-medium text-foreground mb-1.5";
 
 function CardHeader({ title, subtitle, action }: { title: string; subtitle?: string; action?: React.ReactNode }) {
   return (
-    <div className="px-6 py-4 border-b border-primary/5 bg-gradient-to-r from-primary/5/70 to-white flex items-center justify-between">
+    <div className="px-6 py-4 border-b border-primary/5 bg-gradient-to-r from-primary/5/70 to-surface flex items-center justify-between">
       <div className="flex items-center gap-3">
         <div className="w-1 h-5 bg-primary-light rounded-full shrink-0" />
         <div>
-          <h3 className="font-semibold text-primary-dark text-sm">{title}</h3>
-          {subtitle && <p className="text-xs text-primary-light mt-0.5">{subtitle}</p>}
+          <h3 className="font-semibold text-foreground text-sm">{title}</h3>
+          {subtitle && <p className="text-xs text-muted-foreground mt-0.5">{subtitle}</p>}
         </div>
       </div>
       {action}
diff --git a/src/features/integrations/pages/NewIntegration.tsx b/src/features/integrations/pages/NewIntegration.tsx
index c78b38a..4eec702 100644
--- a/src/features/integrations/pages/NewIntegration.tsx
+++ b/src/features/integrations/pages/NewIntegration.tsx
@@ -247,11 +247,11 @@ export default function NewIntegration() {
   const labelClass = 'block text-sm font-medium text-foreground mb-1.5';
 
   const CardHeader = ({ title, subtitle }: { title: string; subtitle?: string }) => (
-    <div className="px-6 py-4 border-b border-primary/5 bg-gradient-to-r from-primary/5/70 to-white flex items-center gap-3">
+    <div className="px-6 py-4 border-b border-primary/5 bg-gradient-to-r from-primary/5/70 to-surface flex items-center gap-3">
       <div className="w-1 h-5 bg-primary-light rounded-full shrink-0" />
       <div>
-        <h3 className="font-semibold text-primary-dark text-sm">{title}</h3>
-        {subtitle && <p className="text-xs text-primary-light mt-0.5">{subtitle}</p>}
+        <h3 className="font-semibold text-foreground text-sm">{title}</h3>
+        {subtitle && <p className="text-xs text-muted-foreground mt-0.5">{subtitle}</p>}
       </div>
     </div>
   );
diff --git a/src/features/settings/pages/NewSetting.tsx b/src/features/settings/pages/NewSetting.tsx
index 793d737..88a1f4e 100644
--- a/src/features/settings/pages/NewSetting.tsx
+++ b/src/features/settings/pages/NewSetting.tsx
@@ -67,11 +67,11 @@ export default function NewSetting() {
       />
       <form id="setting-form" onSubmit={formik.handleSubmit} className="max-w-2xl">
         <div className="bg-surface rounded-xl border border-primary/10 shadow-sm overflow-hidden">
-          <div className="px-6 py-4 border-b border-primary/5 bg-gradient-to-r from-primary/5/70 to-white flex items-center gap-3">
+          <div className="px-6 py-4 border-b border-primary/5 bg-gradient-to-r from-primary/5/70 to-surface flex items-center gap-3">
             <div className="w-1 h-5 bg-primary-light rounded-full shrink-0" />
             <div>
-              <h3 className="font-semibold text-primary-dark text-sm">Basic Information</h3>
-              <p className="text-xs text-primary-light mt-0.5">Setting name and status</p>
+              <h3 className="font-semibold text-foreground text-sm">Basic Information</h3>
+              <p className="text-xs text-muted-foreground mt-0.5">Setting name and status</p>
             </div>
           </div>
           <div className="p-6 space-y-5">
diff --git a/src/features/settings/pages/SettingList.tsx b/src/features/settings/pages/SettingList.tsx
index 99dae09..58dd3e9 100644
--- a/src/features/settings/pages/SettingList.tsx
+++ b/src/features/settings/pages/SettingList.tsx
@@ -36,7 +36,7 @@ export default function SettingList() {
               onClick={() => setActiveTab(tab.id)}
               className={`flex items-center gap-2 px-4 py-3 text-sm font-medium border-b-2 transition-colors whitespace-nowrap ${
                 isActive
-                  ? "border-primary text-primary-dark"
+                  ? "border-primary text-primary font-semibold"
                   : "border-transparent text-muted-foreground hover:text-foreground hover:border-border"
               }`}
             >
@@ -53,11 +53,11 @@ export default function SettingList() {
           <div className="max-w-3xl">
             {/* Organization Settings */}
             <div className="border-b border-primary/5">
-              <div className="px-6 py-4 border-b border-primary/5 bg-gradient-to-r from-primary/5/70 to-white flex items-center gap-3">
+              <div className="px-6 py-4 border-b border-primary/5 bg-gradient-to-r from-primary/5/70 to-surface flex items-center gap-3">
                 <div className="w-1 h-5 bg-primary-light rounded-full shrink-0" />
                 <div>
-                  <h3 className="font-semibold text-primary-dark text-sm">Organization Settings</h3>
-                  <p className="text-xs text-primary-light mt-0.5">Name, subdomain, language and timezone</p>
+                  <h3 className="font-semibold text-foreground text-sm">Organization Settings</h3>
+                  <p className="text-xs text-muted-foreground mt-0.5">Name, subdomain, language and timezone</p>
                 </div>
               </div>
               <div className="p-6 space-y-5">
@@ -95,11 +95,11 @@ export default function SettingList() {
 
             {/* Workflow Settings */}
             <div>
-              <div className="px-6 py-4 border-b border-primary/5 bg-gradient-to-r from-primary/5/70 to-white flex items-center gap-3">
+              <div className="px-6 py-4 border-b border-primary/5 bg-gradient-to-r from-primary/5/70 to-surface flex items-center gap-3">
                 <div className="w-1 h-5 bg-primary-light rounded-full shrink-0" />
                 <div>
-                  <h3 className="font-semibold text-primary-dark text-sm">Workflow Settings</h3>
-                  <p className="text-xs text-primary-light mt-0.5">Approval and publishing rules</p>
+                  <h3 className="font-semibold text-foreground text-sm">Workflow Settings</h3>
+                  <p className="text-xs text-muted-foreground mt-0.5">Approval and publishing rules</p>
                 </div>
               </div>
               <div className="p-6 space-y-5">
@@ -124,7 +124,7 @@ export default function SettingList() {
               </div>
             </div>
 
-            <div className="flex justify-end gap-3 px-6 py-4 border-t border-primary/5 bg-gradient-to-r from-white to-primary/5/30">
+            <div className="flex justify-end gap-3 px-6 py-4 border-t border-primary/5 bg-gradient-to-r from-surface to-primary/5/30">
               <Button variant="ghost" className="text-muted-foreground hover:text-foreground hover:bg-background">Cancel</Button>
               <Button className="bg-primary hover:bg-primary-hover text-white">Save Changes</Button>
             </div>
@@ -133,11 +133,11 @@ export default function SettingList() {
 
         {activeTab === "Integrations" && (
           <div className="max-w-4xl">
-            <div className="px-6 py-4 border-b border-primary/5 bg-gradient-to-r from-primary/5/70 to-white flex items-center gap-3">
+            <div className="px-6 py-4 border-b border-primary/5 bg-gradient-to-r from-primary/5/70 to-surface flex items-center gap-3">
               <div className="w-1 h-5 bg-primary-light rounded-full shrink-0" />
               <div>
-                <h3 className="font-semibold text-primary-dark text-sm">Connected Integrations</h3>
-                <p className="text-xs text-primary-light mt-0.5">Manage your external platform connections</p>
+                <h3 className="font-semibold text-foreground text-sm">Connected Integrations</h3>
+                <p className="text-xs text-muted-foreground mt-0.5">Manage your external platform connections</p>
               </div>
             </div>
             <div className="p-6 flex flex-col gap-4">
@@ -212,7 +212,7 @@ export default function SettingList() {
               </div>
             </div>
 
-            <div className="flex justify-end gap-3 px-6 py-4 border-t border-primary/5 bg-gradient-to-r from-white to-primary/5/30">
+            <div className="flex justify-end gap-3 px-6 py-4 border-t border-primary/5 bg-gradient-to-r from-surface to-primary/5/30">
               <Button variant="ghost" className="text-muted-foreground hover:text-foreground hover:bg-background">Cancel</Button>
               <Button className="bg-primary hover:bg-primary-hover text-white">Save Changes</Button>
             </div>
@@ -221,11 +221,11 @@ export default function SettingList() {
 
         {activeTab === "API Keys" && (
           <div className="max-w-4xl">
-            <div className="px-6 py-4 border-b border-primary/5 bg-gradient-to-r from-primary/5/70 to-white flex items-center gap-3">
+            <div className="px-6 py-4 border-b border-primary/5 bg-gradient-to-r from-primary/5/70 to-surface flex items-center gap-3">
               <div className="w-1 h-5 bg-primary-light rounded-full shrink-0" />
               <div>
-                <h3 className="font-semibold text-primary-dark text-sm">API Keys</h3>
-                <p className="text-xs text-primary-light mt-0.5">Manage API keys for programmatic access</p>
+                <h3 className="font-semibold text-foreground text-sm">API Keys</h3>
+                <p className="text-xs text-muted-foreground mt-0.5">Manage API keys for programmatic access</p>
               </div>
             </div>
             <div className="p-6 space-y-6">
@@ -259,7 +259,7 @@ export default function SettingList() {
                 </div>
               </div>
             </div>
-            <div className="flex justify-end gap-3 px-6 py-4 border-t border-primary/5 bg-gradient-to-r from-white to-primary/5/30">
+            <div className="flex justify-end gap-3 px-6 py-4 border-t border-primary/5 bg-gradient-to-r from-surface to-primary/5/30">
               <Button variant="ghost" className="text-muted-foreground hover:text-foreground hover:bg-background">Cancel</Button>
               <Button className="bg-primary hover:bg-primary-hover text-white">Save Changes</Button>
             </div>
@@ -268,11 +268,11 @@ export default function SettingList() {
 
         {activeTab === "Appearance" && (
           <div className="max-w-4xl">
-            <div className="px-6 py-4 border-b border-primary/5 bg-gradient-to-r from-primary/5/70 to-white flex items-center gap-3">
+            <div className="px-6 py-4 border-b border-primary/5 bg-gradient-to-r from-primary/5/70 to-surface flex items-center gap-3">
               <div className="w-1 h-5 bg-primary-light rounded-full shrink-0" />
               <div>
-                <h3 className="font-semibold text-primary-dark text-sm">Appearance</h3>
-                <p className="text-xs text-primary-light mt-0.5">Theme and display density</p>
+                <h3 className="font-semibold text-foreground text-sm">Appearance</h3>
+                <p className="text-xs text-muted-foreground mt-0.5">Theme and display density</p>
               </div>
             </div>
             <div className="p-6 space-y-4">
@@ -315,7 +315,7 @@ export default function SettingList() {
                 </div>
               </div>
             </div>
-            <div className="flex justify-end gap-3 px-6 py-4 border-t border-primary/5 bg-gradient-to-r from-white to-primary/5/30">
+            <div className="flex justify-end gap-3 px-6 py-4 border-t border-primary/5 bg-gradient-to-r from-surface to-primary/5/30">
               <Button variant="ghost" className="text-muted-foreground hover:text-foreground hover:bg-background">Cancel</Button>
               <Button className="bg-primary hover:bg-primary-hover text-white">Save Changes</Button>
             </div>
diff --git a/src/features/tenants/pages/NewTenantForm.tsx b/src/features/tenants/pages/NewTenantForm.tsx
index a6ef7e2..71a40e3 100644
--- a/src/features/tenants/pages/NewTenantForm.tsx
+++ b/src/features/tenants/pages/NewTenantForm.tsx
@@ -15,11 +15,11 @@ const errorClass = 'text-xs text-danger mt-1';
 
 function CardHeader({ title, subtitle }: { title: string; subtitle?: string }) {
   return (
-    <div className="px-6 py-4 border-b border-primary/5 bg-gradient-to-r from-primary/5/70 to-white flex items-center gap-3">
+    <div className="px-6 py-4 border-b border-primary/5 bg-gradient-to-r from-primary/5/70 to-surface flex items-center gap-3">
       <div className="w-1 h-5 bg-primary-light rounded-full shrink-0" />
       <div>
-        <h3 className="font-semibold text-primary-dark text-sm">{title}</h3>
-        {subtitle && <p className="text-xs text-primary-light mt-0.5">{subtitle}</p>}
+        <h3 className="font-semibold text-foreground text-sm">{title}</h3>
+        {subtitle && <p className="text-xs text-muted-foreground mt-0.5">{subtitle}</p>}
       </div>
     </div>
   );
diff --git a/src/features/units/pages/NewUnit.tsx b/src/features/units/pages/NewUnit.tsx
index af2db57..91d0663 100644
--- a/src/features/units/pages/NewUnit.tsx
+++ b/src/features/units/pages/NewUnit.tsx
@@ -20,11 +20,11 @@ const UNIT_TYPES = ["Weight", "Length", "Volume", "Area", "Count", "Temperature"
 
 function CardHeader({ title, subtitle }: { title: string; subtitle: string }) {
   return (
-    <div className="px-6 py-4 border-b border-primary/5 bg-gradient-to-r from-primary/5/70 to-white flex items-center gap-3">
+    <div className="px-6 py-4 border-b border-primary/5 bg-gradient-to-r from-primary/5/70 to-surface flex items-center gap-3">
       <div className="w-1 h-5 bg-primary-light rounded-full shrink-0" />
       <div>
-        <h3 className="font-semibold text-primary-dark text-sm">{title}</h3>
-        <p className="text-xs text-primary-light mt-0.5">{subtitle}</p>
+        <h3 className="font-semibold text-foreground text-sm">{title}</h3>
+        <p className="text-xs text-muted-foreground mt-0.5">{subtitle}</p>
       </div>
     </div>
   );
diff --git a/src/features/users/pages/NewUser.tsx b/src/features/users/pages/NewUser.tsx
index 8984750..7b2cb2c 100644
--- a/src/features/users/pages/NewUser.tsx
+++ b/src/features/users/pages/NewUser.tsx
@@ -17,11 +17,11 @@ import { Breadcrumb } from "../../../components/layouts/Breadcrumb";
 
 function CardHeader({ title, subtitle }: { title: string; subtitle?: string }) {
   return (
-    <div className="px-6 py-4 border-b border-primary/5 bg-gradient-to-r from-primary/5/70 to-white flex items-center gap-3">
+    <div className="px-6 py-4 border-b border-primary/5 bg-gradient-to-r from-primary/5/70 to-surface flex items-center gap-3">
       <div className="w-1 h-5 bg-primary-light rounded-full shrink-0" />
       <div>
-        <h3 className="font-semibold text-primary-dark text-sm">{title}</h3>
-        {subtitle && <p className="text-xs text-primary-light mt-0.5">{subtitle}</p>}
+        <h3 className="font-semibold text-foreground text-sm">{title}</h3>
+        {subtitle && <p className="text-xs text-muted-foreground mt-0.5">{subtitle}</p>}
       </div>
     </div>
   );
diff --git a/src/features/variants/pages/NewVariant.tsx b/src/features/variants/pages/NewVariant.tsx
index 0e252b7..6dbf41d 100644
--- a/src/features/variants/pages/NewVariant.tsx
+++ b/src/features/variants/pages/NewVariant.tsx
@@ -28,11 +28,11 @@ const errorClass  = 'text-xs text-danger mt-1';
 
 function CardHeader({ title, subtitle }: { title: string; subtitle: string }) {
   return (
-    <div className="px-6 py-4 border-b border-primary/5 bg-gradient-to-r from-primary/5/70 to-white flex items-center gap-3">
+    <div className="px-6 py-4 border-b border-primary/5 bg-gradient-to-r from-primary/5/70 to-surface flex items-center gap-3">
       <div className="w-1 h-5 bg-primary-light rounded-full shrink-0" />
       <div>
-        <h3 className="font-semibold text-primary-dark text-sm">{title}</h3>
-        <p className="text-xs text-primary-light mt-0.5">{subtitle}</p>
+        <h3 className="font-semibold text-foreground text-sm">{title}</h3>
+        <p className="text-xs text-muted-foreground mt-0.5">{subtitle}</p>
       </div>
     </div>
   );
diff --git a/src/features/workflow/components/GeneralInfoTab.tsx b/src/features/workflow/components/GeneralInfoTab.tsx
index b41d975..744bfc5 100644
--- a/src/features/workflow/components/GeneralInfoTab.tsx
+++ b/src/features/workflow/components/GeneralInfoTab.tsx
@@ -18,11 +18,11 @@ export const GeneralInfoTab = () => {
     <div className="space-y-6 pb-6">
       {/* Basic Information */}
       <div className="bg-surface rounded-xl border border-border shadow-sm overflow-hidden">
-        <div className="px-6 py-4 border-b border-primary/5 bg-gradient-to-r from-primary/5 to-white flex items-center gap-3">
+        <div className="px-6 py-4 border-b border-primary/5 bg-gradient-to-r from-primary/5 to-surface flex items-center gap-3">
           <div className="w-1 h-5 bg-primary-light rounded-full shrink-0" />
           <div>
-            <h3 className="font-semibold text-primary-dark text-sm">Basic Information</h3>
-            <p className="text-xs text-primary-light mt-0.5">Name, code and description of this workflow</p>
+            <h3 className="font-semibold text-foreground text-sm">Basic Information</h3>
+            <p className="text-xs text-muted-foreground mt-0.5">Name, code and description of this workflow</p>
           </div>
         </div>
 
@@ -96,11 +96,11 @@ export const GeneralInfoTab = () => {
 
       {/* Configuration */}
       <div className="bg-surface rounded-xl border border-border shadow-sm overflow-hidden">
-        <div className="px-6 py-4 border-b border-primary/5 bg-gradient-to-r from-primary/5 to-white flex items-center gap-3">
+        <div className="px-6 py-4 border-b border-primary/5 bg-gradient-to-r from-primary/5 to-surface flex items-center gap-3">
           <div className="w-1 h-5 bg-primary-light rounded-full shrink-0" />
           <div>
-            <h3 className="font-semibold text-primary-dark text-sm">Configuration</h3>
-            <p className="text-xs text-primary-light mt-0.5">Workflow behaviour and status settings</p>
+            <h3 className="font-semibold text-foreground text-sm">Configuration</h3>
+            <p className="text-xs text-muted-foreground mt-0.5">Workflow behaviour and status settings</p>
           </div>
         </div>
 
diff --git a/src/features/workflow/pages/NewWorkflow.tsx b/src/features/workflow/pages/NewWorkflow.tsx
index f7969de..8510191 100644
--- a/src/features/workflow/pages/NewWorkflow.tsx
+++ b/src/features/workflow/pages/NewWorkflow.tsx
@@ -284,7 +284,7 @@ export default function NewWorkflow() {
               {/* STEP 1: Basic Information */}
               {step === 1 && (
                 <div className="bg-surface rounded-xl border border-border shadow-xs overflow-hidden">
-                  <div className="px-6 py-4 border-b border-primary/5 bg-gradient-to-r from-primary/5 to-white flex items-center gap-3">
+                  <div className="px-6 py-4 border-b border-primary/5 bg-gradient-to-r from-primary/5 to-surface flex items-center gap-3">
                     <div className="w-1.5 h-6 bg-primary-light rounded-full" />
                     <div>
                       <h3 className="font-bold text-foreground text-sm">Step 1: Basic Information</h3>
@@ -383,7 +383,7 @@ export default function NewWorkflow() {
               {/* STEP 2: Stages Designer */}
               {step === 2 && (
                 <div className="bg-surface rounded-xl border border-border shadow-xs overflow-hidden">
-                  <div className="px-6 py-4 border-b border-primary/5 bg-gradient-to-r from-primary/5 to-white flex items-center justify-between">
+                  <div className="px-6 py-4 border-b border-primary/5 bg-gradient-to-r from-primary/5 to-surface flex items-center justify-between">
                     <div className="flex items-center gap-3">
                       <div className="w-1.5 h-6 bg-primary-light rounded-full" />
                       <div>
@@ -636,7 +636,7 @@ export default function NewWorkflow() {
               {/* STEP 3: Workflow Preview */}
               {step === 3 && (
                 <div className="bg-surface rounded-xl border border-border shadow-xs overflow-hidden">
-                  <div className="px-6 py-4 border-b border-primary/5 bg-gradient-to-r from-primary/5 to-white flex items-center gap-3">
+                  <div className="px-6 py-4 border-b border-primary/5 bg-gradient-to-r from-primary/5 to-surface flex items-center gap-3">
                     <div className="w-1.5 h-6 bg-primary-light rounded-full" />
                     <div>
                       <h3 className="font-bold text-foreground text-sm">Step 3: Visual Path Preview</h3>
@@ -662,7 +662,7 @@ export default function NewWorkflow() {
               {/* STEP 4: Summary Screen */}
               {step === 4 && (
                 <div className="bg-surface rounded-xl border border-border shadow-xs overflow-hidden">
-                  <div className="px-6 py-4 border-b border-primary/5 bg-gradient-to-r from-primary/5 to-white flex items-center gap-3">
+                  <div className="px-6 py-4 border-b border-primary/5 bg-gradient-to-r from-primary/5 to-surface flex items-center gap-3">
                     <div className="w-1.5 h-6 bg-primary-light rounded-full" />
                     <div>
                       <h3 className="font-bold text-foreground text-sm">Step 4: Summary & Save</h3>