diff --git a/src/index.css b/src/index.css
index 6b20732..3c3067b 100644
--- a/src/index.css
+++ b/src/index.css
@@ -7,106 +7,113 @@
 @layer base {
   :root {
     /* Westscott Fasteners Brand Colors */
-    --background: 210 20% 98%;
-    --foreground: 215 25% 15%;
+    --background: 30 20% 98%;
+    --foreground: 20 25% 12%;
 
     --card: 0 0% 100%;
-    --card-foreground: 215 25% 15%;
+    --card-foreground: 20 25% 12%;
 
     --popover: 0 0% 100%;
-    --popover-foreground: 215 25% 15%;
+    --popover-foreground: 20 25% 12%;
 
-    /* Primary Blue - Trust & Professionalism */
-    --primary: 216 65% 35%;
+    /* Primary Orange - Energy & Brand Identity */
+    --primary: 14 85% 50%;
     --primary-foreground: 0 0% 100%;
 
-    /* Secondary - Light neutral */
-    --secondary: 210 15% 95%;
-    --secondary-foreground: 215 25% 15%;
+    /* Secondary - Warm neutral */
+    --secondary: 30 15% 95%;
+    --secondary-foreground: 20 25% 12%;
 
-    --muted: 210 15% 92%;
-    --muted-foreground: 215 12% 45%;
+    --muted: 30 15% 92%;
+    --muted-foreground: 20 12% 45%;
 
-    /* Accent Orange - Energy & Action */
-    --accent: 14 85% 52%;
-    --accent-foreground: 0 0% 100%;
+    /* Accent Yellow - Highlights & CTAs */
+    --accent: 42 95% 50%;
+    --accent-foreground: 20 25% 12%;
 
     /* Brand Yellow - Highlights */
     --brand-yellow: 42 95% 55%;
-    --brand-yellow-foreground: 215 25% 15%;
+    --brand-yellow-foreground: 20 25% 12%;
 
     /* Brand Red */
-    --brand-red: 4 78% 55%;
+    --brand-red: 4 78% 50%;
     --brand-red-foreground: 0 0% 100%;
 
+    /* Brand Blue - Accent only */
+    --brand-blue: 210 70% 45%;
+    --brand-blue-foreground: 0 0% 100%;
+
     --destructive: 0 84% 60%;
     --destructive-foreground: 0 0% 100%;
 
-    --border: 214 20% 88%;
-    --input: 214 20% 88%;
-    --ring: 216 65% 35%;
+    --border: 30 20% 88%;
+    --input: 30 20% 88%;
+    --ring: 14 85% 50%;
 
     --radius: 0.5rem;
 
-    /* Custom shadows */
-    --shadow-sm: 0 1px 2px 0 hsl(215 25% 15% / 0.05);
-    --shadow-md: 0 4px 6px -1px hsl(215 25% 15% / 0.08), 0 2px 4px -2px hsl(215 25% 15% / 0.06);
-    --shadow-lg: 0 10px 15px -3px hsl(215 25% 15% / 0.1), 0 4px 6px -4px hsl(215 25% 15% / 0.1);
-    --shadow-xl: 0 20px 25px -5px hsl(215 25% 15% / 0.1), 0 8px 10px -6px hsl(215 25% 15% / 0.1);
+    /* Custom shadows with warm tint */
+    --shadow-sm: 0 1px 2px 0 hsl(20 25% 15% / 0.05);
+    --shadow-md: 0 4px 6px -1px hsl(20 25% 15% / 0.08), 0 2px 4px -2px hsl(20 25% 15% / 0.06);
+    --shadow-lg: 0 10px 15px -3px hsl(20 25% 15% / 0.1), 0 4px 6px -4px hsl(20 25% 15% / 0.1);
+    --shadow-xl: 0 20px 25px -5px hsl(20 25% 15% / 0.1), 0 8px 10px -6px hsl(20 25% 15% / 0.1);
 
-    --sidebar-background: 0 0% 98%;
-    --sidebar-foreground: 240 5.3% 26.1%;
-    --sidebar-primary: 240 5.9% 10%;
-    --sidebar-primary-foreground: 0 0% 98%;
-    --sidebar-accent: 240 4.8% 95.9%;
-    --sidebar-accent-foreground: 240 5.9% 10%;
-    --sidebar-border: 220 13% 91%;
-    --sidebar-ring: 217.2 91.2% 59.8%;
+    --sidebar-background: 30 15% 98%;
+    --sidebar-foreground: 20 25% 26%;
+    --sidebar-primary: 14 85% 50%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-accent: 42 40% 95%;
+    --sidebar-accent-foreground: 20 25% 12%;
+    --sidebar-border: 30 15% 91%;
+    --sidebar-ring: 14 85% 50%;
   }
 
   .dark {
-    --background: 215 25% 10%;
-    --foreground: 210 20% 95%;
+    --background: 20 20% 8%;
+    --foreground: 30 20% 95%;
 
-    --card: 215 25% 13%;
-    --card-foreground: 210 20% 95%;
+    --card: 20 20% 12%;
+    --card-foreground: 30 20% 95%;
 
-    --popover: 215 25% 13%;
-    --popover-foreground: 210 20% 95%;
+    --popover: 20 20% 12%;
+    --popover-foreground: 30 20% 95%;
 
-    --primary: 216 65% 50%;
+    --primary: 14 85% 55%;
     --primary-foreground: 0 0% 100%;
 
-    --secondary: 215 20% 20%;
-    --secondary-foreground: 210 20% 95%;
+    --secondary: 20 15% 18%;
+    --secondary-foreground: 30 20% 95%;
 
-    --muted: 215 20% 18%;
-    --muted-foreground: 215 15% 60%;
+    --muted: 20 15% 16%;
+    --muted-foreground: 20 12% 60%;
 
-    --accent: 14 85% 55%;
-    --accent-foreground: 0 0% 100%;
+    --accent: 42 95% 55%;
+    --accent-foreground: 20 25% 12%;
 
     --brand-yellow: 42 95% 55%;
-    --brand-yellow-foreground: 215 25% 15%;
+    --brand-yellow-foreground: 20 25% 12%;
 
     --brand-red: 4 78% 55%;
     --brand-red-foreground: 0 0% 100%;
 
+    --brand-blue: 210 70% 50%;
+    --brand-blue-foreground: 0 0% 100%;
+
     --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 40% 98%;
+    --destructive-foreground: 30 20% 98%;
 
-    --border: 215 20% 22%;
-    --input: 215 20% 22%;
-    --ring: 216 65% 50%;
+    --border: 20 15% 20%;
+    --input: 20 15% 20%;
+    --ring: 14 85% 55%;
 
-    --sidebar-background: 240 5.9% 10%;
-    --sidebar-foreground: 240 4.8% 95.9%;
-    --sidebar-primary: 224.3 76.3% 48%;
+    --sidebar-background: 20 15% 10%;
+    --sidebar-foreground: 30 20% 95%;
+    --sidebar-primary: 14 85% 55%;
     --sidebar-primary-foreground: 0 0% 100%;
-    --sidebar-accent: 240 3.7% 15.9%;
-    --sidebar-accent-foreground: 240 4.8% 95.9%;
-    --sidebar-border: 240 3.7% 15.9%;
-    --sidebar-ring: 217.2 91.2% 59.8%;
+    --sidebar-accent: 20 15% 16%;
+    --sidebar-accent-foreground: 30 20% 95%;
+    --sidebar-border: 20 15% 18%;
+    --sidebar-ring: 14 85% 55%;
   }
 }
 
@@ -156,11 +163,11 @@
   }
 
   .gradient-industrial {
-    background: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(216 65% 28%) 100%);
+    background: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(4 78% 40%) 100%);
   }
 
   .gradient-accent {
-    background: linear-gradient(135deg, hsl(var(--accent)) 0%, hsl(var(--brand-yellow)) 100%);
+    background: linear-gradient(135deg, hsl(var(--brand-yellow)) 0%, hsl(var(--primary)) 100%);
   }
 
   .badge-new {
diff --git a/tailwind.config.ts b/tailwind.config.ts
index baf0189..741aaa3 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -56,6 +56,8 @@ export default {
           "yellow-foreground": "hsl(var(--brand-yellow-foreground))",
           red: "hsl(var(--brand-red))",
           "red-foreground": "hsl(var(--brand-red-foreground))",
+          blue: "hsl(var(--brand-blue))",
+          "blue-foreground": "hsl(var(--brand-blue-foreground))",
         },
         sidebar: {
           DEFAULT: "hsl(var(--sidebar-background))",
@@ -74,9 +76,9 @@ export default {
         sm: "calc(var(--radius) - 4px)",
       },
       boxShadow: {
-        'industrial': '0 4px 6px -1px hsl(215 25% 15% / 0.08), 0 2px 4px -2px hsl(215 25% 15% / 0.06)',
-        'industrial-lg': '0 10px 15px -3px hsl(215 25% 15% / 0.1), 0 4px 6px -4px hsl(215 25% 15% / 0.1)',
-        'industrial-xl': '0 20px 25px -5px hsl(215 25% 15% / 0.1), 0 8px 10px -6px hsl(215 25% 15% / 0.1)',
+        'industrial': '0 4px 6px -1px hsl(20 25% 15% / 0.08), 0 2px 4px -2px hsl(20 25% 15% / 0.06)',
+        'industrial-lg': '0 10px 15px -3px hsl(20 25% 15% / 0.1), 0 4px 6px -4px hsl(20 25% 15% / 0.1)',
+        'industrial-xl': '0 20px 25px -5px hsl(20 25% 15% / 0.1), 0 8px 10px -6px hsl(20 25% 15% / 0.1)',
       },
       keyframes: {
         "accordion-down": {