diff --git a/src/app/admin/page.tsx b/src/app/admin/page.tsx
index 99eaafe..27a685d 100644
--- a/src/app/admin/page.tsx
+++ b/src/app/admin/page.tsx
@@ -108,13 +108,13 @@ export default function AdminDashboard() {
         </div>
 
         {error && (
-          <div className="mb-6 p-4 bg-red-50 dark:bg-red-900/20 rounded-lg border border-red-200 dark:border-red-800">
-            <p className="text-sm text-red-600 dark:text-red-400">{error}</p>
+          <div className="mb-6 theme-alert-danger">
+            <p className="text-sm">{error}</p>
           </div>
         )}
 
         {success && (
-          <div className="mb-6 p-4 bg-green-50 dark:bg-green-900/20 rounded-lg border border-green-200 dark:border-green-800">
+          <div className="mb-6 theme-alert-success">
             <p className="text-sm text-green-600 dark:text-green-400">
               {success}
             </p>
diff --git a/src/app/auth/forgot-password/page.tsx b/src/app/auth/forgot-password/page.tsx
index 139d021..5d883ad 100644
--- a/src/app/auth/forgot-password/page.tsx
+++ b/src/app/auth/forgot-password/page.tsx
@@ -46,7 +46,7 @@ export default function ForgotPasswordPage() {
       <header className="sticky-header shadow-lg border-b theme-border">
         <div className="max-w-7xl mx-auto py-4 px-4 sm:px-6 lg:px-8">
           <div className="flex justify-between items-center">
-            <Link href="/" className="flex items-center space-x-3 group"><div className="w-12 h-12 rounded-full bg-gradient-to-r from-blue-500 to-cyan-400 flex items-center justify-center shadow-lg transform transition-transform duration-300 group-hover:scale-110"><BoltIcon size={6} /></div><h1 className="text-2xl font-bold theme-text-primary hidden sm:block">TechTorque Auto</h1></Link>
+            <Link href="/" className="flex items-center space-x-3 group"><div className="automotive-accent w-12 h-12 rounded-full flex items-center justify-center shadow-lg transform transition-transform duration-300 group-hover:scale-110"><span className="text-white font-bold text-lg">TT</span></div><h1 className="text-2xl font-bold theme-text-primary hidden sm:block">TechTorque</h1></Link>
             <div className="flex items-center space-x-4"><Link href="/auth/login" className="theme-link hidden md:inline-block">Back to Sign In</Link><ThemeToggle /></div>
           </div>
         </div>
@@ -74,7 +74,7 @@ export default function ForgotPasswordPage() {
                 </div>
                 {error && (
                   <div className="mb-6 p-4 bg-red-50 dark:bg-red-900/20 rounded-lg border border-red-200 dark:border-red-800">
-                    <p className="text-sm text-red-600 dark:text-red-400">{error}</p>
+                    <p className="text-sm theme-text-danger">{error}</p>
                   </div>
                 )}
                 <form className="space-y-6" onSubmit={handleSubmit}>
diff --git a/src/app/auth/login/page.tsx b/src/app/auth/login/page.tsx
index ffc6ba1..cb2e2c2 100644
--- a/src/app/auth/login/page.tsx
+++ b/src/app/auth/login/page.tsx
@@ -74,11 +74,11 @@ export default function LoginPage() {
         <div className="max-w-7xl mx-auto py-4 px-4 sm:px-6 lg:px-8">
           <div className="flex justify-between items-center">
             <Link href="/" className="flex items-center space-x-3 group">
-              <div className="w-12 h-12 rounded-full bg-gradient-to-r from-blue-500 to-cyan-400 flex items-center justify-center shadow-lg transform transition-transform duration-300 group-hover:scale-110">
-                <BoltIcon size={6} />
+              <div className="automotive-accent w-12 h-12 rounded-full flex items-center justify-center shadow-lg transform transition-transform duration-300 group-hover:scale-110">
+                <span className="text-white font-bold text-lg">TT</span>
               </div>
               <h1 className="text-2xl font-bold theme-text-primary hidden sm:block">
-                TechTorque Auto
+                TechTorque
               </h1>
             </Link>
             <div className="flex items-center space-x-4">
@@ -160,7 +160,7 @@ export default function LoginPage() {
                 </form>
                 {error && (
                   <div role="alert" className="mt-4 p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
-                    <p className="text-sm text-red-600 dark:text-red-400 mb-2">{error}</p>
+                    <p className="text-sm theme-text-danger mb-2">{error}</p>
                     {unverifiedEmail && (
                       <Link 
                         href={`/auth/resend-verification?email=${encodeURIComponent(unverifiedEmail)}`}
diff --git a/src/app/auth/otp-verify/page.tsx b/src/app/auth/otp-verify/page.tsx
index a9cbdf1..548c9ce 100644
--- a/src/app/auth/otp-verify/page.tsx
+++ b/src/app/auth/otp-verify/page.tsx
@@ -39,7 +39,7 @@ export default function OtpVerifyPage() {
       <header className="sticky-header shadow-lg border-b theme-border">
         <div className="max-w-7xl mx-auto py-4 px-4 sm:px-6 lg:px-8">
           <div className="flex justify-between items-center">
-            <Link href="/" className="flex items-center space-x-3 group"><div className="w-12 h-12 rounded-full bg-gradient-to-r from-blue-500 to-cyan-400 flex items-center justify-center shadow-lg transform transition-transform duration-300 group-hover:scale-110"><BoltIcon size={6} /></div><h1 className="text-2xl font-bold theme-text-primary hidden sm:block">TechTorque Auto</h1></Link>
+            <Link href="/" className="flex items-center space-x-3 group"><div className="automotive-accent w-12 h-12 rounded-full flex items-center justify-center shadow-lg transform transition-transform duration-300 group-hover:scale-110"><span className="text-white font-bold text-lg">TT</span></div><h1 className="text-2xl font-bold theme-text-primary hidden sm:block">TechTorque</h1></Link>
             <div className="flex items-center space-x-4"><ThemeToggle /></div>
           </div>
         </div>
diff --git a/src/app/auth/register/page.tsx b/src/app/auth/register/page.tsx
index 1dafed5..f5cf46d 100644
--- a/src/app/auth/register/page.tsx
+++ b/src/app/auth/register/page.tsx
@@ -132,11 +132,11 @@ export default function RegisterPage() {
         <div className="max-w-7xl mx-auto py-4 px-4 sm:px-6 lg:px-8">
           <div className="flex justify-between items-center">
             <Link href="/" className="flex items-center space-x-3 group">
-              <div className="w-12 h-12 rounded-full bg-gradient-to-r from-blue-500 to-cyan-400 flex items-center justify-center shadow-lg transform transition-transform duration-300 group-hover:scale-110">
-                <BoltIcon size={6} />
+              <div className="automotive-accent w-12 h-12 rounded-full flex items-center justify-center shadow-lg transform transition-transform duration-300 group-hover:scale-110">
+                <span className="text-white font-bold text-lg">TT</span>
               </div>
               <h1 className="text-2xl font-bold theme-text-primary hidden sm:block">
-                TechTorque Auto
+                TechTorque
               </h1>
             </Link>
             <div className="flex items-center space-x-4">
@@ -178,7 +178,7 @@ export default function RegisterPage() {
                   Account Created!
                 </h2>
                 <p className="text-base theme-text-secondary mb-2">
-                  Welcome to TechTorque Auto, {formData.fullName}!
+                  Welcome to TechTorque, {formData.fullName}!
                 </p>
                 <div className="mb-6 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
                   <p className="text-sm font-semibold theme-text-primary mb-2">
diff --git a/src/app/auth/resend-verification/page.tsx b/src/app/auth/resend-verification/page.tsx
index 683ced8..7935209 100644
--- a/src/app/auth/resend-verification/page.tsx
+++ b/src/app/auth/resend-verification/page.tsx
@@ -112,7 +112,7 @@ function ResendVerificationContent() {
 
       {error && (
         <div role="alert" className="mt-4 p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
-          <p className="text-sm text-red-600 dark:text-red-400">{error}</p>
+          <p className="text-sm theme-text-danger">{error}</p>
         </div>
       )}
 
@@ -138,11 +138,11 @@ export default function ResendVerificationPage() {
         <div className="max-w-7xl mx-auto py-4 px-4 sm:px-6 lg:px-8">
           <div className="flex justify-between items-center">
             <Link href="/" className="flex items-center space-x-3 group">
-              <div className="w-12 h-12 rounded-full bg-gradient-to-r from-blue-500 to-cyan-400 flex items-center justify-center shadow-lg transform transition-transform duration-300 group-hover:scale-110">
-                <BoltIcon size={6} />
+              <div className="automotive-accent w-12 h-12 rounded-full flex items-center justify-center shadow-lg transform transition-transform duration-300 group-hover:scale-110">
+                <span className="text-white font-bold text-lg">TT</span>
               </div>
               <h1 className="text-2xl font-bold theme-text-primary hidden sm:block">
-                TechTorque Auto
+                TechTorque
               </h1>
             </Link>
             <div className="flex items-center space-x-4">
diff --git a/src/app/auth/reset-password/ResetPasswordForm.tsx b/src/app/auth/reset-password/ResetPasswordForm.tsx
index e8e7a1f..ed32f49 100644
--- a/src/app/auth/reset-password/ResetPasswordForm.tsx
+++ b/src/app/auth/reset-password/ResetPasswordForm.tsx
@@ -143,7 +143,7 @@ export default function ResetPasswordForm() {
 
           {error && (
             <div className="mb-6 p-4 bg-red-50 dark:bg-red-900/20 rounded-lg border border-red-200 dark:border-red-800">
-              <p className="text-sm text-red-600 dark:text-red-400">{error}</p>
+              <p className="text-sm theme-text-danger">{error}</p>
             </div>
           )}
 
diff --git a/src/app/auth/reset-password/page.tsx b/src/app/auth/reset-password/page.tsx
index 30d5461..5eb58d6 100644
--- a/src/app/auth/reset-password/page.tsx
+++ b/src/app/auth/reset-password/page.tsx
@@ -24,11 +24,11 @@ export default function ResetPasswordPage() {
         <div className="max-w-7xl mx-auto py-4 px-4 sm:px-6 lg:px-8">
           <div className="flex justify-between items-center">
             <Link href="/" className="flex items-center space-x-3 group">
-              <div className="w-12 h-12 rounded-full bg-gradient-to-r from-blue-500 to-cyan-400 flex items-center justify-center shadow-lg transform transition-transform duration-300 group-hover:scale-110">
-                <BoltIcon size={6} />
+              <div className="automotive-accent w-12 h-12 rounded-full flex items-center justify-center shadow-lg transform transition-transform duration-300 group-hover:scale-110">
+                <span className="text-white font-bold text-lg">TT</span>
               </div>
               <h1 className="text-2xl font-bold theme-text-primary hidden sm:block">
-                TechTorque Auto
+                TechTorque
               </h1>
             </Link>
             <div className="flex items-center space-x-4">
diff --git a/src/app/auth/verify-email/page.tsx b/src/app/auth/verify-email/page.tsx
index c5cc1b0..d2065d3 100644
--- a/src/app/auth/verify-email/page.tsx
+++ b/src/app/auth/verify-email/page.tsx
@@ -27,11 +27,11 @@ export default function VerifyEmailPage() {
         <div className="max-w-7xl mx-auto py-4 px-4 sm:px-6 lg:px-8">
           <div className="flex justify-between items-center">
             <Link href="/" className="flex items-center space-x-3 group">
-              <div className="w-12 h-12 rounded-full bg-gradient-to-r from-blue-500 to-cyan-400 flex items-center justify-center shadow-lg transform transition-transform duration-300 group-hover:scale-110">
-                <BoltIcon size={6} />
+              <div className="automotive-accent w-12 h-12 rounded-full flex items-center justify-center shadow-lg transform transition-transform duration-300 group-hover:scale-110">
+                <span className="text-white font-bold text-lg">TT</span>
               </div>
               <h1 className="text-2xl font-bold theme-text-primary hidden sm:block">
-                TechTorque Auto
+                TechTorque
               </h1>
             </Link>
             <ThemeToggle />
diff --git a/src/app/components/NotificationBell.tsx b/src/app/components/NotificationBell.tsx
index 39a3407..d80f410 100644
--- a/src/app/components/NotificationBell.tsx
+++ b/src/app/components/NotificationBell.tsx
@@ -102,7 +102,7 @@ export default function NotificationBell() {
           {loading ? (
             <div className="py-8 text-center theme-text-muted text-sm">Loading notifications...</div>
           ) : error ? (
-            <div className="py-8 text-center text-red-500 text-sm">{error}</div>
+            <div className="py-8 text-center theme-text-danger text-sm">{error}</div>
           ) : notifications.length === 0 ? (
             <div className="py-8 text-center theme-text-muted text-sm">No notifications yet.</div>
           ) : (
diff --git a/src/app/components/PaymentGateway.tsx b/src/app/components/PaymentGateway.tsx
index 40649ca..0343e1d 100644
--- a/src/app/components/PaymentGateway.tsx
+++ b/src/app/components/PaymentGateway.tsx
@@ -123,14 +123,14 @@ export default function PaymentGateway({
       </div>
 
       {error && (
-        <div className="mb-6 p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
-          <p className="text-sm text-red-600 dark:text-red-400">{error}</p>
+        <div className="mb-6 theme-alert-danger">
+          <p className="text-sm">{error}</p>
         </div>
       )}
 
       {success && (
-        <div className="mb-6 p-4 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg">
-          <p className="text-sm text-green-600 dark:text-green-400 font-semibold">Payment completed successfully!</p>
+        <div className="mb-6 theme-alert-success">
+          <p className="text-sm font-semibold">Payment completed successfully!</p>
         </div>
       )}
 
@@ -144,8 +144,8 @@ export default function PaymentGateway({
         {loading ? 'Processing...' : success ? 'Payment Completed' : 'Pay with PayHere'}
       </button>
 
-      <div className="mt-4 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
-        <p className="text-xs theme-text-muted text-center">
+      <div className="mt-4 theme-alert-info">
+        <p className="text-xs text-center">
           Secure payment powered by PayHere. Your payment information is encrypted and secure.
         </p>
       </div>
diff --git a/src/app/components/VehicleCard.tsx b/src/app/components/VehicleCard.tsx
index fcdac0f..d72a5fb 100644
--- a/src/app/components/VehicleCard.tsx
+++ b/src/app/components/VehicleCard.tsx
@@ -10,7 +10,7 @@ interface VehicleCardProps {
 
 export default function VehicleCard({ vehicle, onDelete, onEdit }: VehicleCardProps) {
   return (
-    <div className="automotive-card p-6 hover:scale-[1.02] transition-transform">
+    <div className="automotive-card p-6 hover:scale-[1.02] hover:shadow-lg transition-all">
       <div className="flex justify-between items-start mb-4">
         <div>
           <h3 className="text-xl font-bold theme-text-primary mb-1">
diff --git a/src/app/components/chatbot/AIChatWidget.tsx b/src/app/components/chatbot/AIChatWidget.tsx
index 20d7081..ac93d99 100644
--- a/src/app/components/chatbot/AIChatWidget.tsx
+++ b/src/app/components/chatbot/AIChatWidget.tsx
@@ -1,6 +1,7 @@
 import React, { useState, useRef, useEffect, useCallback } from 'react';
 import { Sparkles, Bolt } from 'lucide-react';
 import Cookies from 'js-cookie';
+import { config } from '@/config/runtime';
 import apiClient from '@/lib/apiClient';
 
 // --- Theme Simulation & Constants ---
@@ -27,8 +28,8 @@ interface ChatResponse {
     tool_executed?: string | null;
 }
 
-// Use the shared API client with a baseURL of `${API_BASE_URL}/api/v1`.
-// Then call the `ai/chat` endpoint relative to that base.
+// Use the runtime config to get the API Gateway URL
+const API_ENDPOINT = `${config.NEXT_PUBLIC_API_BASE_URL}/api/v1/ai/chat`;
 
 const AIChatWidget: React.FC = () => {
     // State Management
diff --git a/src/app/components/dashboards/AdminDashboard.tsx b/src/app/components/dashboards/AdminDashboard.tsx
index 818b715..c6bf952 100644
--- a/src/app/components/dashboards/AdminDashboard.tsx
+++ b/src/app/components/dashboards/AdminDashboard.tsx
@@ -57,7 +57,7 @@ const AdminDashboard: React.FC<AdminDashboardProps> = ({ profile }) => {
       </div>
 
       {error && (
-        <div className="mb-6 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 text-red-700 dark:text-red-300 px-4 py-3 rounded-lg">
+        <div className="theme-alert-danger mb-6">
           {error}
         </div>
       )}
diff --git a/src/app/components/dashboards/CustomerDashboard.tsx b/src/app/components/dashboards/CustomerDashboard.tsx
index 00b8bd7..3b2da0a 100644
--- a/src/app/components/dashboards/CustomerDashboard.tsx
+++ b/src/app/components/dashboards/CustomerDashboard.tsx
@@ -75,7 +75,7 @@ const CustomerDashboard: React.FC<CustomerDashboardProps> = ({ profile }) => {
       </div>
 
       {error && (
-        <div className="mb-6 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 text-red-700 dark:text-red-300 px-4 py-3 rounded-lg">
+        <div className="theme-alert-danger mb-6">
           {error}
         </div>
       )}
diff --git a/src/app/components/dashboards/EmployeeDashboard.tsx b/src/app/components/dashboards/EmployeeDashboard.tsx
index 4013d55..9e56ece 100644
--- a/src/app/components/dashboards/EmployeeDashboard.tsx
+++ b/src/app/components/dashboards/EmployeeDashboard.tsx
@@ -94,7 +94,7 @@ const EmployeeDashboard: React.FC<EmployeeDashboardProps> = ({ profile }) => {
       </div>
 
       {error && (
-        <div className="mb-6 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 text-red-700 dark:text-red-300 px-4 py-3 rounded-lg">
+        <div className="theme-alert-danger mb-6">
           {error}
         </div>
       )}
diff --git a/src/app/dashboard/admin/audit-logs/page.tsx b/src/app/dashboard/admin/audit-logs/page.tsx
index 699f8f9..c6b4b88 100644
--- a/src/app/dashboard/admin/audit-logs/page.tsx
+++ b/src/app/dashboard/admin/audit-logs/page.tsx
@@ -52,7 +52,7 @@ export default function AuditLogsPage() {
       <div className="max-w-7xl mx-auto p-6">
         <div className="animate-pulse space-y-3">
           {[...Array(10)].map((_, i) => (
-            <div key={i} className="h-20 bg-gray-200 dark:bg-gray-800 rounded-lg"></div>
+            <div key={i} className="h-20 theme-bg-tertiary rounded-lg"></div>
           ))}
         </div>
       </div>
@@ -94,10 +94,10 @@ export default function AuditLogsPage() {
         </div>
       )}
 
-      <div className="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900/50 overflow-hidden">
+      <div className="dashboard-content-card overflow-hidden">
         <div className="overflow-x-auto">
           <table className="w-full">
-            <thead className="bg-gray-50 dark:bg-gray-800/50">
+            <thead className="theme-bg-tertiary">
               <tr>
                 <th className="px-6 py-3 text-left text-xs font-semibold theme-text-muted uppercase">Timestamp</th>
                 <th className="px-6 py-3 text-left text-xs font-semibold theme-text-muted uppercase">User</th>
@@ -110,7 +110,7 @@ export default function AuditLogsPage() {
               {logs.length === 0 ? (
                 <tr>
                   <td colSpan={5} className="px-6 py-12 text-center">
-                    <svg className="mx-auto w-12 h-12 text-gray-400 dark:text-gray-600 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <svg className="mx-auto w-12 h-12 theme-text-muted mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                     </svg>
                     <p className="text-sm theme-text-muted">
@@ -123,7 +123,7 @@ export default function AuditLogsPage() {
                 </tr>
               ) : (
                 logs.map((log) => (
-                  <tr key={log.logId} className="hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors">
+                  <tr key={log.logId} className="hover:theme-bg-hover transition-colors">
                     <td className="px-6 py-4 whitespace-nowrap text-sm theme-text-secondary">
                       {formatDateTime(log.timestamp)}
                     </td>
diff --git a/src/app/dashboard/admin/page.tsx b/src/app/dashboard/admin/page.tsx
index 83f1ade..7727a8c 100644
--- a/src/app/dashboard/admin/page.tsx
+++ b/src/app/dashboard/admin/page.tsx
@@ -35,10 +35,10 @@ export default function AdminPage() {
     return (
       <div className="max-w-7xl mx-auto p-6">
         <div className="animate-pulse space-y-6">
-          <div className="h-32 bg-gray-200 dark:bg-gray-800 rounded-lg"></div>
+          <div className="h-32 theme-bg-tertiary rounded-lg"></div>
           <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
             {[...Array(8)].map((_, i) => (
-              <div key={i} className="h-32 bg-gray-200 dark:bg-gray-800 rounded-lg"></div>
+              <div key={i} className="h-32 theme-bg-tertiary rounded-lg"></div>
             ))}
           </div>
         </div>
@@ -79,11 +79,11 @@ export default function AdminPage() {
       <div className="mb-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
         <Link
           href="/dashboard/admin/users"
-          className="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900/50 p-6 hover:border-blue-400 dark:hover:border-blue-500 transition-colors group"
+          className="dashboard-content-card hover:border-blue-400 dark:hover:border-blue-500 transition-all hover:shadow-lg group"
         >
           <div className="flex items-center gap-4">
             <div className="w-12 h-12 rounded-lg bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center group-hover:bg-blue-600 transition-colors">
-              <svg className="w-6 h-6 text-blue-600 dark:text-blue-400 group-hover:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <svg className="w-6 h-6 text-blue-700 dark:text-blue-400 group-hover:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
               </svg>
             </div>
@@ -96,11 +96,11 @@ export default function AdminPage() {
 
         <Link
           href="/dashboard/admin/service-types"
-          className="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900/50 p-6 hover:border-green-400 dark:hover:border-green-500 transition-colors group"
+          className="dashboard-content-card hover:border-green-400 dark:hover:border-green-500 transition-all hover:shadow-lg group"
         >
           <div className="flex items-center gap-4">
             <div className="w-12 h-12 rounded-lg bg-green-100 dark:bg-green-900/30 flex items-center justify-center group-hover:bg-green-600 transition-colors">
-              <svg className="w-6 h-6 text-green-600 dark:text-green-400 group-hover:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <svg className="w-6 h-6 text-green-700 dark:text-green-400 group-hover:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
               </svg>
             </div>
@@ -113,11 +113,11 @@ export default function AdminPage() {
 
         <Link
           href="/dashboard/admin/reports"
-          className="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900/50 p-6 hover:border-purple-400 dark:hover:border-purple-500 transition-colors group"
+          className="dashboard-content-card hover:border-purple-400 dark:hover:border-purple-500 transition-all hover:shadow-lg group"
         >
           <div className="flex items-center gap-4">
             <div className="w-12 h-12 rounded-lg bg-purple-100 dark:bg-purple-900/30 flex items-center justify-center group-hover:bg-purple-600 transition-colors">
-              <svg className="w-6 h-6 text-purple-600 dark:text-purple-400 group-hover:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <svg className="w-6 h-6 text-purple-700 dark:text-purple-400 group-hover:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
               </svg>
             </div>
@@ -130,11 +130,11 @@ export default function AdminPage() {
 
         <Link
           href="/dashboard/admin/audit-logs"
-          className="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900/50 p-6 hover:border-amber-400 dark:hover:border-amber-500 transition-colors group"
+          className="dashboard-content-card hover:border-amber-400 dark:hover:border-amber-500 transition-all hover:shadow-lg group"
         >
           <div className="flex items-center gap-4">
             <div className="w-12 h-12 rounded-lg bg-amber-100 dark:bg-amber-900/30 flex items-center justify-center group-hover:bg-amber-600 transition-colors">
-              <svg className="w-6 h-6 text-amber-600 dark:text-amber-400 group-hover:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <svg className="w-6 h-6 text-amber-700 dark:text-amber-400 group-hover:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
               </svg>
             </div>
@@ -152,17 +152,17 @@ export default function AdminPage() {
           <div className="mb-6">
             <h2 className="text-xl font-semibold theme-text-primary mb-4">User Statistics</h2>
             <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
-              <div className="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900/50 p-5">
-                <p className="text-xs uppercase tracking-wide theme-text-muted">Total customers</p>
-                <p className="text-2xl font-semibold theme-text-primary">{stats.totalCustomers ?? 0}</p>
+              <div className="stat-card">
+                <p className="stat-card-label">Total customers</p>
+                <p className="stat-card-value">{stats.totalCustomers ?? 0}</p>
               </div>
-              <div className="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900/50 p-5">
-                <p className="text-xs uppercase tracking-wide theme-text-muted">Total employees</p>
-                <p className="text-2xl font-semibold theme-text-primary">{stats.totalEmployees ?? 0}</p>
+              <div className="stat-card">
+                <p className="stat-card-label">Total employees</p>
+                <p className="stat-card-value">{stats.totalEmployees ?? 0}</p>
               </div>
-              <div className="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900/50 p-5">
-                <p className="text-xs uppercase tracking-wide theme-text-muted">Total vehicles</p>
-                <p className="text-2xl font-semibold theme-text-primary">{stats.totalVehicles ?? 0}</p>
+              <div className="stat-card">
+                <p className="stat-card-label">Total vehicles</p>
+                <p className="stat-card-value">{stats.totalVehicles ?? 0}</p>
               </div>
             </div>
           </div>
@@ -170,21 +170,21 @@ export default function AdminPage() {
           <div className="mb-6">
             <h2 className="text-xl font-semibold theme-text-primary mb-4">Service Statistics</h2>
             <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
-              <div className="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900/50 p-5">
-                <p className="text-xs uppercase tracking-wide theme-text-muted">Active appointments</p>
-                <p className="text-2xl font-semibold theme-text-primary">{stats.activeAppointments ?? 0}</p>
+              <div className="stat-card">
+                <p className="stat-card-label">Active appointments</p>
+                <p className="stat-card-value">{stats.activeAppointments ?? 0}</p>
               </div>
-              <div className="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900/50 p-5">
-                <p className="text-xs uppercase tracking-wide theme-text-muted">Completed (month)</p>
-                <p className="text-2xl font-semibold text-green-600 dark:text-green-400">{stats.completedServicesThisMonth ?? 0}</p>
+              <div className="stat-card">
+                <p className="stat-card-label">Completed (month)</p>
+                <p className="stat-card-value text-green-600 dark:text-green-400">{stats.completedServicesThisMonth ?? 0}</p>
               </div>
-              <div className="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900/50 p-5">
-                <p className="text-xs uppercase tracking-wide theme-text-muted">Active projects</p>
-                <p className="text-2xl font-semibold text-purple-600 dark:text-purple-400">{stats.activeProjects ?? 0}</p>
+              <div className="stat-card">
+                <p className="stat-card-label">Active projects</p>
+                <p className="stat-card-value text-purple-600 dark:text-purple-400">{stats.activeProjects ?? 0}</p>
               </div>
-              <div className="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900/50 p-5">
-                <p className="text-xs uppercase tracking-wide theme-text-muted">Pending invoices</p>
-                <p className="text-2xl font-semibold text-amber-600 dark:text-amber-400">{stats.pendingInvoices ?? 0}</p>
+              <div className="stat-card">
+                <p className="stat-card-label">Pending invoices</p>
+                <p className="stat-card-value text-amber-600 dark:text-amber-400">{stats.pendingInvoices ?? 0}</p>
               </div>
             </div>
           </div>
@@ -192,13 +192,13 @@ export default function AdminPage() {
           <div className="mb-6">
             <h2 className="text-xl font-semibold theme-text-primary mb-4">Financial Overview</h2>
             <div className="grid gap-4 sm:grid-cols-2">
-              <div className="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900/50 p-5">
-                <p className="text-xs uppercase tracking-wide theme-text-muted">Revenue this month</p>
-                <p className="text-2xl font-semibold theme-text-primary">LKR {(stats.revenueThisMonth ?? 0).toLocaleString()}</p>
+              <div className="stat-card">
+                <p className="stat-card-label">Revenue this month</p>
+                <p className="stat-card-value">LKR {(stats.revenueThisMonth ?? 0).toLocaleString()}</p>
               </div>
-              <div className="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900/50 p-5">
-                <p className="text-xs uppercase tracking-wide theme-text-muted">Pending invoices count</p>
-                <p className="text-2xl font-semibold text-amber-600 dark:text-amber-400">{stats.pendingInvoices ?? 0}</p>
+              <div className="stat-card">
+                <p className="stat-card-label">Pending invoices count</p>
+                <p className="stat-card-value text-amber-600 dark:text-amber-400">{stats.pendingInvoices ?? 0}</p>
               </div>
             </div>
           </div>
diff --git a/src/app/dashboard/admin/reports/page.tsx b/src/app/dashboard/admin/reports/page.tsx
index 4aab25f..e80403b 100644
--- a/src/app/dashboard/admin/reports/page.tsx
+++ b/src/app/dashboard/admin/reports/page.tsx
@@ -43,8 +43,8 @@ export default function ReportsPage() {
     return (
       <div className="max-w-4xl mx-auto p-6">
         <div className="animate-pulse space-y-4">
-          <div className="h-32 bg-gray-200 dark:bg-gray-800 rounded-lg"></div>
-          <div className="h-96 bg-gray-200 dark:bg-gray-800 rounded-lg"></div>
+          <div className="h-32 theme-bg-tertiary rounded-lg"></div>
+          <div className="h-96 theme-bg-tertiary rounded-lg"></div>
         </div>
       </div>
     );
@@ -79,7 +79,7 @@ export default function ReportsPage() {
         <p className="theme-text-muted">Generate business analytics and reports</p>
       </div>
 
-      <div className="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900/50 p-8">
+      <div className="dashboard-content-card">
         <h2 className="text-xl font-semibold theme-text-primary mb-6">Generate Report</h2>
         
         <div className="space-y-6">
@@ -88,7 +88,7 @@ export default function ReportsPage() {
             <select
               value={reportType}
               onChange={(e) => setReportType(e.target.value as typeof reportType)}
-              className="w-full px-4 py-3 rounded-lg border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 theme-text-primary focus:ring-2 focus:ring-blue-500"
+              className="form-select"
             >
               <option value="REVENUE">Revenue Report</option>
               <option value="SERVICE_PERFORMANCE">Service Performance Report</option>
@@ -104,7 +104,7 @@ export default function ReportsPage() {
             <select
               value={format}
               onChange={(e) => setFormat(e.target.value as typeof format)}
-              className="w-full px-4 py-3 rounded-lg border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 theme-text-primary focus:ring-2 focus:ring-blue-500"
+              className="form-select"
             >
               <option value="PDF">PDF</option>
               <option value="EXCEL">Excel</option>
@@ -120,7 +120,7 @@ export default function ReportsPage() {
                 type="date"
                 value={dateRange.fromDate}
                 onChange={(e) => setDateRange({ ...dateRange, fromDate: e.target.value })}
-                className="w-full px-4 py-3 rounded-lg border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 theme-text-primary focus:ring-2 focus:ring-blue-500"
+                className="form-input"
               />
             </div>
             <div>
@@ -129,7 +129,7 @@ export default function ReportsPage() {
                 type="date"
                 value={dateRange.toDate}
                 onChange={(e) => setDateRange({ ...dateRange, toDate: e.target.value })}
-                className="w-full px-4 py-3 rounded-lg border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 theme-text-primary focus:ring-2 focus:ring-blue-500"
+                className="form-input"
               />
             </div>
           </div>
diff --git a/src/app/dashboard/admin/service-types/page.tsx b/src/app/dashboard/admin/service-types/page.tsx
index ca8ab4c..8ccbc84 100644
--- a/src/app/dashboard/admin/service-types/page.tsx
+++ b/src/app/dashboard/admin/service-types/page.tsx
@@ -195,7 +195,7 @@ export default function ServiceTypesPage() {
         </div>
         <button
           onClick={handleCreate}
-          className="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg flex items-center gap-2 transition-colors shadow-lg"
+          className="theme-button-action px-6 py-3 rounded-lg flex items-center gap-2 shadow-lg"
         >
           <span className="text-xl">+</span>
           Add Service Type
@@ -251,7 +251,7 @@ export default function ServiceTypesPage() {
               <div className="flex gap-2 pt-4 border-t border-gray-200 dark:border-gray-700">
                 <button
                   onClick={() => handleEdit(serviceType)}
-                  className="flex-1 bg-blue-600 hover:bg-blue-700 text-white px-3 py-2 rounded text-sm transition-colors"
+                  className="flex-1 theme-button-action px-3 py-2 rounded text-sm"
                 >
                   Edit
                 </button>
@@ -280,7 +280,7 @@ export default function ServiceTypesPage() {
       {/* Create/Edit Modal */}
       {showModal && (
         <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
-          <div className="bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto">
+          <div className="modal-content">
             <div className="p-6">
               <div className="flex justify-between items-center mb-6">
                 <h2 className="text-2xl font-bold theme-text-primary">
@@ -304,7 +304,7 @@ export default function ServiceTypesPage() {
                     required
                     value={formData.name}
                     onChange={(e) => setFormData({ ...formData, name: e.target.value })}
-                    className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 theme-text-primary"
+                    className="form-input"
                     placeholder="e.g., Oil Change"
                   />
                 </div>
@@ -317,7 +317,7 @@ export default function ServiceTypesPage() {
                     required
                     value={formData.category}
                     onChange={(e) => setFormData({ ...formData, category: e.target.value })}
-                    className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 theme-text-primary"
+                    className="form-select"
                   >
                     <option value="MAINTENANCE">Maintenance</option>
                     <option value="REPAIR">Repair</option>
@@ -334,7 +334,7 @@ export default function ServiceTypesPage() {
                   <textarea
                     value={formData.description}
                     onChange={(e) => setFormData({ ...formData, description: e.target.value })}
-                    className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 theme-text-primary"
+                    className="form-textarea"
                     rows={3}
                     placeholder="Describe the service..."
                   />
@@ -352,7 +352,7 @@ export default function ServiceTypesPage() {
                       step="0.01"
                       value={formData.price}
                       onChange={(e) => setFormData({ ...formData, price: e.target.value })}
-                      className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 theme-text-primary"
+                      className="form-input"
                       placeholder="5000"
                     />
                   </div>
@@ -368,7 +368,7 @@ export default function ServiceTypesPage() {
                       max="480"
                       value={formData.durationMinutes}
                       onChange={(e) => setFormData({ ...formData, durationMinutes: parseInt(e.target.value) || 0 })}
-                      className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 theme-text-primary"
+                      className="form-input"
                       placeholder="60"
                     />
                     <p className="text-xs text-gray-500 mt-1">Min: 15 min, Max: 8 hours (480 min)</p>
@@ -379,13 +379,13 @@ export default function ServiceTypesPage() {
                   <button
                     type="button"
                     onClick={() => setShowModal(false)}
-                    className="flex-1 px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors theme-text-primary"
+                    className="btn btn-secondary flex-1"
                   >
                     Cancel
                   </button>
                   <button
                     type="submit"
-                    className="flex-1 bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition-colors"
+                    className="btn btn-primary flex-1"
                   >
                     {editingService ? 'Update Service' : 'Create Service'}
                   </button>
diff --git a/src/app/dashboard/admin/users/page.tsx b/src/app/dashboard/admin/users/page.tsx
index c303696..590ccf2 100644
--- a/src/app/dashboard/admin/users/page.tsx
+++ b/src/app/dashboard/admin/users/page.tsx
@@ -235,46 +235,46 @@ export default function AdminUsersPage() {
 
       {/* Stats */}
       <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-5 mb-6">
-        <div className="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900/50 p-5">
-          <p className="text-xs uppercase tracking-wide theme-text-muted">Total Users</p>
-          <p className="text-2xl font-semibold theme-text-primary">{users.length}</p>
+        <div className="stat-card">
+          <p className="stat-card-label">Total Users</p>
+          <p className="stat-card-value">{users.length}</p>
         </div>
-        <div className="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900/50 p-5">
-          <p className="text-xs uppercase tracking-wide theme-text-muted">Activated</p>
-          <p className="text-2xl font-semibold text-green-600 dark:text-green-400">
+        <div className="stat-card">
+          <p className="stat-card-label">Activated</p>
+          <p className="stat-card-value text-green-600 dark:text-green-400">
             {users.filter(u => u.enabled).length}
           </p>
         </div>
-        <div className="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900/50 p-5">
-          <p className="text-xs uppercase tracking-wide theme-text-muted">Deactivated</p>
-          <p className="text-2xl font-semibold text-red-600 dark:text-red-400">
+        <div className="stat-card">
+          <p className="stat-card-label">Deactivated</p>
+          <p className="stat-card-value text-red-600 dark:text-red-400">
             {users.filter(u => !u.enabled).length}
           </p>
         </div>
-        <div className="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900/50 p-5">
-          <p className="text-xs uppercase tracking-wide theme-text-muted">Email Verified</p>
-          <p className="text-2xl font-semibold text-blue-600 dark:text-blue-400">
+        <div className="stat-card">
+          <p className="stat-card-label">Email Verified</p>
+          <p className="stat-card-value text-blue-600 dark:text-blue-400">
             {users.filter(u => u.emailVerified).length}
           </p>
         </div>
-        <div className="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900/50 p-5">
-          <p className="text-xs uppercase tracking-wide theme-text-muted">Account Locked</p>
-          <p className="text-2xl font-semibold text-orange-600 dark:text-orange-400">
+        <div className="stat-card">
+          <p className="stat-card-label">Account Locked</p>
+          <p className="stat-card-value text-orange-600 dark:text-orange-400">
             {users.filter(u => u.accountLocked).length}
           </p>
         </div>
       </div>
 
       {/* Filters */}
-      <div className="mb-6 flex flex-wrap gap-2">
+      <div className="filter-tabs-container mb-6">
         {roleFilters.map((filter) => (
           <button
             key={filter}
             onClick={() => setRoleFilter(filter)}
-            className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
+            className={`filter-tab ${
               roleFilter === filter
-                ? 'bg-blue-600 text-white'
-                : 'theme-bg-secondary theme-text-secondary hover:bg-blue-50 dark:hover:bg-blue-900/30'
+                ? 'filter-tab-active'
+                : 'filter-tab-inactive'
             }`}
           >
             {filter.replace('_', ' ')}
@@ -286,14 +286,14 @@ export default function AdminUsersPage() {
       <div className="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900/50 overflow-hidden">
         <div className="overflow-x-auto">
           <table className="w-full">
-            <thead className="bg-gray-50 dark:bg-gray-800/50">
+            <thead className="bg-slate-100 dark:bg-gray-800/50 border-b border-gray-200 dark:border-gray-700">
               <tr>
-                <th className="px-6 py-3 text-left text-xs font-semibold theme-text-muted uppercase">User</th>
-                <th className="px-6 py-3 text-left text-xs font-semibold theme-text-muted uppercase">Roles</th>
-                <th className="px-6 py-3 text-left text-xs font-semibold theme-text-muted uppercase">Status</th>
-                <th className="px-6 py-3 text-left text-xs font-semibold theme-text-muted uppercase">Last Login</th>
-                <th className="px-6 py-3 text-left text-xs font-semibold theme-text-muted uppercase">Created</th>
-                {isAdmin && <th className="px-6 py-3 text-left text-xs font-semibold theme-text-muted uppercase">Actions</th>}
+                <th className="px-6 py-3 text-left text-xs font-semibold text-slate-700 dark:text-gray-400 uppercase tracking-wide">User</th>
+                <th className="px-6 py-3 text-left text-xs font-semibold text-slate-700 dark:text-gray-400 uppercase tracking-wide">Roles</th>
+                <th className="px-6 py-3 text-left text-xs font-semibold text-slate-700 dark:text-gray-400 uppercase tracking-wide">Status</th>
+                <th className="px-6 py-3 text-left text-xs font-semibold text-slate-700 dark:text-gray-400 uppercase tracking-wide">Last Login</th>
+                <th className="px-6 py-3 text-left text-xs font-semibold text-slate-700 dark:text-gray-400 uppercase tracking-wide">Created</th>
+                {isAdmin && <th className="px-6 py-3 text-left text-xs font-semibold text-slate-700 dark:text-gray-400 uppercase tracking-wide">Actions</th>}
               </tr>
             </thead>
             <tbody className="divide-y divide-gray-200 dark:divide-gray-800">
@@ -430,7 +430,7 @@ export default function AdminUsersPage() {
                           <div className="flex flex-col gap-2">
                             <button
                               onClick={() => handleStartEditRoles(user)}
-                              className="px-3 py-1 bg-blue-600 hover:bg-blue-700 text-white text-xs font-medium rounded transition-colors"
+                              className="px-3 py-1 theme-button-action text-xs font-medium rounded"
                             >
                               Edit Roles
                             </button>
@@ -462,7 +462,7 @@ export default function AdminUsersPage() {
       {/* Create User Modal */}
       {showCreateModal && (
         <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
-          <div className="bg-white dark:bg-gray-900 rounded-xl max-w-md w-full p-6 border border-gray-200 dark:border-gray-800">
+          <div className="modal-content p-6">
             <h2 className="text-2xl font-bold theme-text-primary mb-4">
               Create {createUserType === 'employee' ? 'Employee' : 'Admin'}
             </h2>
@@ -473,7 +473,7 @@ export default function AdminUsersPage() {
                   type="text"
                   name="username"
                   required
-                  className="w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-lg theme-bg-primary theme-text-primary"
+                  className="form-input"
                 />
               </div>
               <div>
@@ -482,7 +482,7 @@ export default function AdminUsersPage() {
                   type="email"
                   name="email"
                   required
-                  className="w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-lg theme-bg-primary theme-text-primary"
+                  className="form-input"
                 />
               </div>
               <div>
@@ -492,7 +492,7 @@ export default function AdminUsersPage() {
                   name="password"
                   required
                   minLength={6}
-                  className="w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-lg theme-bg-primary theme-text-primary"
+                  className="form-input"
                 />
               </div>
               <div>
@@ -501,7 +501,7 @@ export default function AdminUsersPage() {
                   type="text"
                   name="firstName"
                   required
-                  className="w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-lg theme-bg-primary theme-text-primary"
+                  className="form-input"
                 />
               </div>
               <div>
@@ -510,7 +510,7 @@ export default function AdminUsersPage() {
                   type="text"
                   name="lastName"
                   required
-                  className="w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-lg theme-bg-primary theme-text-primary"
+                  className="form-input"
                 />
               </div>
               {createUserType === 'employee' && (
@@ -520,7 +520,7 @@ export default function AdminUsersPage() {
                     type="text"
                     name="department"
                     required
-                    className="w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-lg theme-bg-primary theme-text-primary"
+                    className="form-input"
                   />
                 </div>
               )}
diff --git a/src/app/dashboard/appointments/[appointmentId]/page.tsx b/src/app/dashboard/appointments/[appointmentId]/page.tsx
index af74cac..657497f 100644
--- a/src/app/dashboard/appointments/[appointmentId]/page.tsx
+++ b/src/app/dashboard/appointments/[appointmentId]/page.tsx
@@ -336,7 +336,7 @@ export default function AppointmentDetailPage() {
       </div>
 
       {error && (
-        <div className="mb-6 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 text-red-700 dark:text-red-300 px-4 py-3 rounded-lg">
+        <div className="mb-6 theme-alert-danger">
           {error}
         </div>
       )}
@@ -468,7 +468,7 @@ export default function AppointmentDetailPage() {
             <p className="theme-text-muted text-sm mb-4">
               Select one or more employees to assign to this appointment. You can change the assigned employees at any time. Employees will receive notifications when assigned.
             </p>
-            <div className="mb-4 p-3 bg-blue-50 dark:bg-blue-900/10 border border-blue-200 dark:border-blue-800 rounded-lg">
+            <div className="mb-4 p-3 theme-alert-info">
               <p className="text-sm theme-text-secondary">
                 💡 <strong>Tip:</strong> Currently assigned employees are pre-selected below. Uncheck to remove them or add new employees.
               </p>
@@ -523,7 +523,7 @@ export default function AppointmentDetailPage() {
             <h2 className="text-xl font-semibold theme-text-primary mb-4">⏱️ Time Tracking</h2>
 
             {appointment.vehicleArrivedAt && (
-              <div className="mb-4 p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
+              <div className="mb-4 p-3 theme-alert-info">
                 <p className="text-sm theme-text-muted">
                   📍 Vehicle arrived: {new Date(appointment.vehicleArrivedAt).toLocaleString()}
                 </p>
@@ -571,7 +571,7 @@ export default function AppointmentDetailPage() {
                 />
               </div>
             ) : appointment.status === 'COMPLETED' ? (
-              <div className="p-4 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg">
+              <div className="p-4 theme-alert-success">
                 <p className="text-green-700 dark:text-green-300 font-medium">
                   ✓ Work completed successfully
                 </p>
@@ -796,7 +796,7 @@ export default function AppointmentDetailPage() {
         )}
 
         {roles?.includes('CUSTOMER') && appointment?.status === 'CUSTOMER_CONFIRMED' && (
-          <section className="automotive-card p-6 border-2 border-green-200 dark:border-green-800 bg-green-50 dark:bg-green-900/10">
+          <section className="automotive-card p-6 border-2 theme-alert-success">
             <h2 className="text-xl font-semibold text-green-600 dark:text-green-400 mb-2">✓ Appointment Complete</h2>
             <p className="text-green-700 dark:text-green-300">
               Thank you! You have confirmed the completion of this appointment. The service is now finalized.
diff --git a/src/app/dashboard/appointments/availability/page.tsx b/src/app/dashboard/appointments/availability/page.tsx
index b2c83e7..2ce0eb3 100644
--- a/src/app/dashboard/appointments/availability/page.tsx
+++ b/src/app/dashboard/appointments/availability/page.tsx
@@ -155,7 +155,7 @@ export default function AppointmentAvailabilityPage() {
 			</div>
 
 			{error && (
-				<div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 text-red-700 dark:text-red-300 px-4 py-3 rounded-lg">
+				<div className="theme-alert-danger">
 					{error}
 				</div>
 			)}
diff --git a/src/app/dashboard/appointments/book/page.tsx b/src/app/dashboard/appointments/book/page.tsx
index 5dd8f5c..5dfde55 100644
--- a/src/app/dashboard/appointments/book/page.tsx
+++ b/src/app/dashboard/appointments/book/page.tsx
@@ -181,13 +181,13 @@ export default function BookAppointmentPage() {
       </div>
 
       {error && (
-        <div className="mb-6 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 text-red-700 dark:text-red-300 px-4 py-3 rounded-lg">
+        <div className="mb-6 theme-alert-danger">
           {error}
         </div>
       )}
 
       {successMessage && (
-        <div className="mb-6 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 text-green-700 dark:text-green-300 px-4 py-3 rounded-lg">
+        <div className="mb-6 theme-alert-success">
           {successMessage}
         </div>
       )}
@@ -242,7 +242,7 @@ export default function BookAppointmentPage() {
         </label>
 
         {selectedServiceType && (
-          <div className="p-4 rounded-lg bg-blue-50 dark:bg-blue-900/20 text-sm theme-text-secondary">
+          <div className="p-4 rounded-lg theme-alert-info">
             <p className="font-medium theme-text-primary">Service details</p>
             <p>Duration: {selectedServiceType.estimatedDurationMinutes} minutes</p>
             {selectedServiceType.description && <p>{selectedServiceType.description}</p>}
diff --git a/src/app/dashboard/appointments/page.tsx b/src/app/dashboard/appointments/page.tsx
index dcdfe77..a5b5cab 100644
--- a/src/app/dashboard/appointments/page.tsx
+++ b/src/app/dashboard/appointments/page.tsx
@@ -88,15 +88,15 @@ export default function AppointmentsPage() {
       </div>
 
       {/* Filter Tabs */}
-      <div className="flex gap-2 mb-6 overflow-x-auto pb-2">
+      <div className="filter-tabs-container mb-6">
         {(['ALL', 'PENDING', 'CONFIRMED', 'IN_PROGRESS', 'COMPLETED', 'CANCELLED'] as const).map((status) => (
           <button
             key={status}
             onClick={() => setFilter(status)}
-            className={`px-4 py-2 rounded-lg font-medium whitespace-nowrap transition-colors ${
+            className={`filter-tab ${
               filter === status
-                ? 'bg-blue-600 text-white'
-                : 'theme-bg-secondary theme-text-secondary hover:bg-blue-50 dark:hover:bg-blue-900/20'
+                ? 'filter-tab-active'
+                : 'filter-tab-inactive'
             }`}
           >
             {status.replace('_', ' ')}
@@ -106,9 +106,9 @@ export default function AppointmentsPage() {
 
       {/* Appointments List */}
       {appointments.length === 0 ? (
-        <div className="text-center py-16 automotive-card">
+        <div className="text-center py-16 automotive-card-static">
           <svg
-            className="mx-auto w-24 h-24 text-gray-400 dark:text-gray-600 mb-4"
+            className="mx-auto w-24 h-24 theme-text-muted mb-4"
             fill="none"
             stroke="currentColor"
             viewBox="0 0 24 24"
@@ -133,7 +133,7 @@ export default function AppointmentsPage() {
           {appointments.map((appointment) => (
             <div 
               key={appointment.id} 
-              className="automotive-card p-6 hover:shadow-lg transition-shadow cursor-pointer"
+              className="automotive-card p-6 hover:shadow-lg hover:border-blue-400 dark:hover:border-blue-500 transition-all cursor-pointer"
               onClick={() => router.push(`/dashboard/appointments/${appointment.id}`)}
             >
               <div className="flex items-start justify-between">
@@ -164,7 +164,7 @@ export default function AppointmentsPage() {
                   </div>
 
                   {appointment.specialInstructions && (
-                    <div className="mt-3 p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
+                    <div className="mt-3 p-3 theme-alert-info">
                       <p className="text-sm theme-text-secondary">
                         <strong>Notes:</strong> {appointment.specialInstructions}
                       </p>
diff --git a/src/app/dashboard/invoices/page.tsx b/src/app/dashboard/invoices/page.tsx
index c5ea43e..81619fb 100644
--- a/src/app/dashboard/invoices/page.tsx
+++ b/src/app/dashboard/invoices/page.tsx
@@ -134,42 +134,42 @@ export default function InvoicesPage() {
       </div>
 
       {error && (
-        <div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 text-red-700 dark:text-red-300 px-4 py-3 rounded-lg">
+        <div className="theme-alert-danger">
           {error}
         </div>
       )}
 
       <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
-        <div className="automotive-card p-5">
-          <p className="text-xs uppercase tracking-wide theme-text-muted">Total invoices</p>
-          <p className="text-2xl font-semibold theme-text-primary">{summary.totalCount}</p>
+        <div className="stat-card">
+          <p className="stat-card-label">Total invoices</p>
+          <p className="stat-card-value">{summary.totalCount}</p>
         </div>
-        <div className="automotive-card p-5">
-          <p className="text-xs uppercase tracking-wide theme-text-muted">Outstanding invoices</p>
-          <p className="text-2xl font-semibold theme-text-primary">{summary.outstandingCount}</p>
+        <div className="stat-card">
+          <p className="stat-card-label">Outstanding invoices</p>
+          <p className="stat-card-value">{summary.outstandingCount}</p>
         </div>
-        <div className="automotive-card p-5">
-          <p className="text-xs uppercase tracking-wide theme-text-muted">Outstanding balance</p>
-          <p className="text-2xl font-semibold theme-text-primary">{formatCurrency(summary.outstandingTotal)}</p>
+        <div className="stat-card">
+          <p className="stat-card-label">Outstanding balance</p>
+          <p className="stat-card-value">{formatCurrency(summary.outstandingTotal)}</p>
         </div>
-        <div className="automotive-card p-5">
-          <p className="text-xs uppercase tracking-wide theme-text-muted">Paid totals</p>
-          <p className="text-2xl font-semibold theme-text-primary">{formatCurrency(summary.paidTotal)}</p>
+        <div className="stat-card">
+          <p className="stat-card-label">Paid totals</p>
+          <p className="stat-card-value">{formatCurrency(summary.paidTotal)}</p>
         </div>
       </div>
 
       <div className="automotive-card p-6 space-y-4">
         <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-3">
-          <div className="flex flex-wrap gap-2">
+          <div className="filter-tabs-container">
             {STATUS_FILTERS.map((status) => (
               <button
                 key={status}
                 type="button"
                 onClick={() => setStatusFilter(status)}
-                className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
+                className={`filter-tab ${
                   statusFilter === status
-                    ? 'bg-blue-600 text-white'
-                    : 'theme-bg-secondary theme-text-secondary hover:bg-blue-50 dark:hover:bg-blue-900/30'
+                    ? 'filter-tab-active'
+                    : 'filter-tab-inactive'
                 }`}
               >
                 {status === 'ALL' ? 'All' : status}
@@ -203,7 +203,7 @@ export default function InvoicesPage() {
               <Link
                 key={invoice.invoiceId}
                 href={`/dashboard/invoices/${invoice.invoiceId}`}
-                className="block rounded-xl border border-gray-200 dark:border-gray-800 hover:border-blue-400 dark:hover:border-blue-500 transition-colors"
+                className="block rounded-xl border border-gray-200 dark:border-gray-800 hover:border-blue-400 dark:hover:border-blue-500 hover:shadow-lg transition-all"
               >
                 <div className="p-5">
                   <div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-3">
diff --git a/src/app/dashboard/layout.tsx b/src/app/dashboard/layout.tsx
index 5e8fd99..2621f81 100644
--- a/src/app/dashboard/layout.tsx
+++ b/src/app/dashboard/layout.tsx
@@ -56,10 +56,10 @@ function DashboardShell({ children }: { children: ReactNode }) {
           <li key={item.href}>
             <Link
               href={item.href}
-              className={`block rounded-lg px-3 py-2 text-sm font-medium transition-colors ${
+              className={`block rounded-lg px-3 py-2 text-sm font-medium transition-all duration-200 ${
                 active
-                  ? 'theme-button-primary'
-                  : 'theme-text-muted hover:theme-text-primary hover:bg-blue-100/50 dark:hover:bg-blue-900/20'
+                  ? 'bg-gradient-to-r from-[#0EA3E7]/90 to-[#0386C9]/90 text-white shadow-lg shadow-blue-500/30'
+                  : 'theme-text-secondary hover:bg-gradient-to-r hover:from-[#0EA3E7]/10 hover:to-[#0386C9]/10 hover:text-[#0EA3E7] hover:shadow-md'
               }`}
               onClick={() => setMobileNavOpen(false)}
             >
@@ -75,7 +75,7 @@ function DashboardShell({ children }: { children: ReactNode }) {
     <div className="min-h-screen theme-bg-primary">
       <div className="flex min-h-screen">
         {/* Desktop sidebar */}
-        <aside className="hidden lg:flex lg:flex-col lg:w-64 lg:border-r border-gray-200 dark:border-gray-800 p-6 space-y-6">
+        <aside className="hidden lg:flex lg:flex-col lg:w-64 lg:border-r theme-border p-6 space-y-6">
           <Link href="/" className="flex items-center">
             <div className="automotive-accent w-9 h-9 rounded-full mr-3 flex items-center justify-center">
               <span className="text-white font-bold text-sm">TT</span>
@@ -99,7 +99,7 @@ function DashboardShell({ children }: { children: ReactNode }) {
 
         {/* Content area */}
         <div className="flex-1 flex flex-col min-h-screen">
-          <header className="sticky top-0 z-30 backdrop-blur supports-[backdrop-filter]:bg-white/80 supports-[backdrop-filter]:dark:bg-slate-900/80 border-b border-gray-200 dark:border-gray-800">
+          <header className="sticky top-0 z-30 backdrop-blur theme-bg-secondary border-b theme-border">
             <div className="px-4 sm:px-6 lg:px-8">
               <div className="flex items-center justify-between h-16">
                 <div className="flex items-center gap-3">
@@ -131,7 +131,7 @@ function DashboardShell({ children }: { children: ReactNode }) {
 
             {/* Mobile nav drawer */}
             {mobileNavOpen && (
-              <div className="lg:hidden border-t border-gray-200 dark:border-gray-800 px-4 pb-4">
+              <div className="lg:hidden border-t theme-border px-4 pb-4">
                 {navSections.map((section) => (
                   <div key={section.title} className="py-3">
                     <p className="text-xs uppercase tracking-wide theme-text-muted mb-2">{section.title}</p>
diff --git a/src/app/dashboard/notifications/page.tsx b/src/app/dashboard/notifications/page.tsx
index 0daa161..4ba207d 100644
--- a/src/app/dashboard/notifications/page.tsx
+++ b/src/app/dashboard/notifications/page.tsx
@@ -89,7 +89,7 @@ export default function NotificationsPage() {
 
   if (loading) {
     return (
-      <div className="max-w-4xl mx-auto p-6">
+      <div className="max-w-6xl mx-auto p-6">
         <div className="animate-pulse space-y-4">
           {[...Array(5)].map((_, i) => (
             <div key={i} className="h-24 bg-gray-200 dark:bg-gray-800 rounded-lg"></div>
@@ -100,7 +100,7 @@ export default function NotificationsPage() {
   }
 
   return (
-    <div className="max-w-4xl mx-auto p-6">
+    <div className="max-w-6xl mx-auto p-6">
       <div className="mb-8">
         <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-6">
           <div>
@@ -120,20 +120,20 @@ export default function NotificationsPage() {
         </div>
 
         {/* Filters */}
-        <div className="flex gap-2">
+        <div className="filter-tabs-container">
           {(['ALL', 'UNREAD', 'READ'] as const).map((f) => (
             <button
               key={f}
               onClick={() => setFilter(f)}
-              className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
+              className={`filter-tab ${
                 filter === f
-                  ? 'bg-blue-600 text-white'
-                  : 'theme-bg-secondary theme-text-secondary hover:bg-blue-50 dark:hover:bg-blue-900/30'
+                  ? 'filter-tab-active'
+                  : 'filter-tab-inactive'
               }`}
             >
               {f.charAt(0) + f.slice(1).toLowerCase()}
               {f === 'UNREAD' && unreadCount > 0 && (
-                <span className="ml-1.5 px-1.5 py-0.5 bg-white bg-opacity-20 rounded text-xs">{unreadCount}</span>
+                <span className="ml-1.5 px-1.5 py-0.5 bg-white dark:bg-gray-800 bg-opacity-30 dark:bg-opacity-30 rounded text-xs">{unreadCount}</span>
               )}
             </button>
           ))}
@@ -145,7 +145,7 @@ export default function NotificationsPage() {
         {filteredNotifications.length === 0 ? (
           <div className="rounded-xl border-2 border-dashed border-gray-300 dark:border-gray-700 p-12 text-center">
             <svg
-              className="mx-auto w-16 h-16 text-gray-400 dark:text-gray-600 mb-4"
+              className="mx-auto w-16 h-16 theme-text-muted mb-4"
               fill="none"
               stroke="currentColor"
               viewBox="0 0 24 24"
@@ -161,10 +161,10 @@ export default function NotificationsPage() {
           filteredNotifications.map((notification) => (
             <div
               key={notification.notificationId}
-              className={`rounded-xl border transition-all ${
+              className={`rounded-xl border transition-all hover:shadow-lg ${
                 notification.read
-                  ? 'border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900/50'
-                  : 'border-blue-200 dark:border-blue-800 bg-blue-50 dark:bg-blue-900/20'
+                  ? 'border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900/50 hover:border-gray-300 dark:hover:border-gray-700'
+                  : 'border-blue-200 dark:border-blue-800 bg-blue-50 dark:bg-blue-900/20 hover:border-blue-300 dark:hover:border-blue-700'
               }`}
             >
               <div className="p-5 flex items-start gap-4">
diff --git a/src/app/dashboard/payments/page.tsx b/src/app/dashboard/payments/page.tsx
index 462d00e..f24ca3e 100644
--- a/src/app/dashboard/payments/page.tsx
+++ b/src/app/dashboard/payments/page.tsx
@@ -142,58 +142,58 @@ export default function PaymentHistoryPage() {
       </div>
 
       {error && (
-        <div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 text-red-700 dark:text-red-300 px-4 py-3 rounded-lg">
+        <div className="theme-alert-danger">
           {error}
         </div>
       )}
 
       <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
-        <div className="automotive-card p-5">
-          <p className="text-xs uppercase tracking-wide theme-text-muted">Payments recorded</p>
-          <p className="text-2xl font-semibold theme-text-primary">{summary.total}</p>
+        <div className="stat-card">
+          <p className="stat-card-label">Payments recorded</p>
+          <p className="stat-card-value">{summary.total}</p>
         </div>
-        <div className="automotive-card p-5">
-          <p className="text-xs uppercase tracking-wide theme-text-muted">Collected revenue</p>
-          <p className="text-2xl font-semibold theme-text-primary">{formatCurrency(summary.totalCollected)}</p>
+        <div className="stat-card">
+          <p className="stat-card-label">Collected revenue</p>
+          <p className="stat-card-value">{formatCurrency(summary.totalCollected)}</p>
         </div>
-        <div className="automotive-card p-5">
-          <p className="text-xs uppercase tracking-wide theme-text-muted">Pending payments</p>
-          <p className="text-2xl font-semibold theme-text-primary">{summary.pending}</p>
+        <div className="stat-card">
+          <p className="stat-card-label">Pending payments</p>
+          <p className="stat-card-value">{summary.pending}</p>
         </div>
-        <div className="automotive-card p-5">
-          <p className="text-xs uppercase tracking-wide theme-text-muted">Failed payments</p>
-          <p className="text-2xl font-semibold theme-text-primary">{summary.failed}</p>
+        <div className="stat-card">
+          <p className="stat-card-label">Failed payments</p>
+          <p className="stat-card-value">{summary.failed}</p>
         </div>
       </div>
 
       <div className="automotive-card p-6 space-y-4">
         <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-3">
-          <div className="flex flex-wrap gap-2">
+          <div className="filter-tabs-container">
             {STATUS_FILTERS.map((status) => (
               <button
                 key={status}
                 type="button"
                 onClick={() => setStatusFilter(status)}
-                className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
+                className={`filter-tab ${
                   statusFilter === status
-                    ? 'bg-blue-600 text-white'
-                    : 'theme-bg-secondary theme-text-secondary hover:bg-blue-50 dark:hover:bg-blue-900/30'
+                    ? 'filter-tab-active'
+                    : 'filter-tab-inactive'
                 }`}
               >
                 {status === 'ALL' ? 'All statuses' : status}
               </button>
             ))}
           </div>
-          <div className="flex flex-wrap gap-2">
+          <div className="filter-tabs-container">
             {METHOD_FILTERS.map((method) => (
               <button
                 key={method}
                 type="button"
                 onClick={() => setMethodFilter(method)}
-                className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
+                className={`filter-tab ${
                   methodFilter === method
-                    ? 'bg-blue-600 text-white'
-                    : 'theme-bg-secondary theme-text-secondary hover:bg-blue-50 dark:hover:bg-blue-900/30'
+                    ? 'filter-tab-active'
+                    : 'filter-tab-inactive'
                 }`}
               >
                 {method === 'ALL' ? 'All methods' : method.replace('_', ' ')}
diff --git a/src/app/dashboard/projects/[projectId]/page.tsx b/src/app/dashboard/projects/[projectId]/page.tsx
index 22f6e27..763e21e 100644
--- a/src/app/dashboard/projects/[projectId]/page.tsx
+++ b/src/app/dashboard/projects/[projectId]/page.tsx
@@ -142,12 +142,12 @@ export default function ProjectDetailPage() {
   if (error || !project) {
     return (
       <div className="max-w-5xl mx-auto p-6">
-        <div className="rounded-xl border border-red-200 dark:border-red-800 bg-red-50 dark:bg-red-900/20 p-8 text-center">
-          <h2 className="text-xl font-semibold text-red-700 dark:text-red-400 mb-2">Error Loading Project</h2>
-          <p className="text-red-600 dark:text-red-300 mb-4">{error || 'Project not found'}</p>
+        <div className="rounded-xl theme-alert-danger p-8 text-center">
+          <h2 className="text-xl font-semibold theme-text-danger mb-2">Error Loading Project</h2>
+          <p className="theme-text-danger mb-4">{error || 'Project not found'}</p>
           <button
             onClick={() => router.push('/dashboard/projects')}
-            className="px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-semibold transition-colors"
+            className="px-6 py-3 theme-button-action rounded-lg font-semibold"
           >
             Back to Projects
           </button>
diff --git a/src/app/dashboard/projects/page.tsx b/src/app/dashboard/projects/page.tsx
index 1e9c6dd..3fd2446 100644
--- a/src/app/dashboard/projects/page.tsx
+++ b/src/app/dashboard/projects/page.tsx
@@ -113,41 +113,41 @@ export default function ProjectsPage() {
       </div>
 
       {error && (
-        <div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 text-red-700 dark:text-red-300 px-4 py-3 rounded-lg">
+        <div className="theme-alert-danger">
           {error}
         </div>
       )}
 
       <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
-        <div className="automotive-card p-5">
-          <p className="text-xs uppercase tracking-wide theme-text-muted">Total projects</p>
-          <p className="text-2xl font-semibold theme-text-primary">{summary.total}</p>
+        <div className="stat-card">
+          <p className="stat-card-label">Total projects</p>
+          <p className="stat-card-value">{summary.total}</p>
         </div>
-        <div className="automotive-card p-5">
-          <p className="text-xs uppercase tracking-wide theme-text-muted">Pending approval</p>
-          <p className="text-2xl font-semibold theme-text-primary">{summary.pending}</p>
+        <div className="stat-card">
+          <p className="stat-card-label">Pending approval</p>
+          <p className="stat-card-value">{summary.pending}</p>
         </div>
-        <div className="automotive-card p-5">
-          <p className="text-xs uppercase tracking-wide theme-text-muted">Active projects</p>
-          <p className="text-2xl font-semibold theme-text-primary">{summary.active}</p>
+        <div className="stat-card">
+          <p className="stat-card-label">Active projects</p>
+          <p className="stat-card-value">{summary.active}</p>
         </div>
-        <div className="automotive-card p-5">
-          <p className="text-xs uppercase tracking-wide theme-text-muted">Completed</p>
-          <p className="text-2xl font-semibold theme-text-primary">{summary.completed}</p>
+        <div className="stat-card">
+          <p className="stat-card-label">Completed</p>
+          <p className="stat-card-value">{summary.completed}</p>
         </div>
       </div>
 
       <div className="automotive-card p-6 space-y-4">
-        <div className="flex flex-wrap gap-2">
+        <div className="filter-tabs-container">
           {STATUS_FILTERS.map((status) => (
             <button
               key={status}
               type="button"
               onClick={() => setStatusFilter(status)}
-              className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
+              className={`filter-tab ${
                 statusFilter === status
-                  ? 'bg-blue-600 text-white'
-                  : 'theme-bg-secondary theme-text-secondary hover:bg-blue-50 dark:hover:bg-blue-900/30'
+                  ? 'filter-tab-active'
+                  : 'filter-tab-inactive'
               }`}
             >
               {status === 'ALL' ? 'All' : status.replace('_', ' ')}
@@ -158,7 +158,7 @@ export default function ProjectsPage() {
         {filteredProjects.length === 0 ? (
           <div className="py-12 text-center">
             <svg
-              className="mx-auto w-24 h-24 text-gray-400 dark:text-gray-600 mb-4"
+              className="mx-auto w-24 h-24 theme-text-muted mb-4"
               fill="none"
               stroke="currentColor"
               viewBox="0 0 24 24"
@@ -183,7 +183,7 @@ export default function ProjectsPage() {
               <Link
                 key={project.id}
                 href={`/dashboard/projects/${project.id}`}
-                className="block rounded-xl border border-gray-200 dark:border-gray-800 hover:border-blue-400 dark:hover:border-blue-500 transition-colors"
+                className="block rounded-xl border border-gray-200 dark:border-gray-800 hover:border-blue-400 dark:hover:border-blue-500 hover:shadow-lg transition-all"
               >
                 <div className="p-5">
                   <div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-3 mb-4">
diff --git a/src/app/dashboard/projects/request/page.tsx b/src/app/dashboard/projects/request/page.tsx
index b397221..0800fb3 100644
--- a/src/app/dashboard/projects/request/page.tsx
+++ b/src/app/dashboard/projects/request/page.tsx
@@ -118,7 +118,7 @@ export default function RequestProjectPage() {
           <p className="theme-text-muted mb-6">You need to add a vehicle before requesting a project.</p>
           <button
             onClick={() => router.push('/dashboard/vehicles/add')}
-            className="px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-semibold transition-colors"
+            className="px-6 py-3 theme-button-action rounded-lg font-semibold"
           >
             Add Vehicle
           </button>
@@ -135,8 +135,8 @@ export default function RequestProjectPage() {
       </div>
 
       {error && (
-        <div className="mb-6 p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
-          <p className="text-red-700 dark:text-red-400 text-sm">{error}</p>
+        <div className="mb-6 theme-alert-danger">
+          <p className="theme-text-danger text-sm">{error}</p>
         </div>
       )}
 
@@ -255,7 +255,7 @@ export default function RequestProjectPage() {
           <button
             type="submit"
             disabled={loading}
-            className="px-6 py-3 bg-blue-600 hover:bg-blue-700 disabled:bg-blue-400 text-white rounded-lg font-semibold transition-colors disabled:cursor-not-allowed flex items-center gap-2"
+            className="px-6 py-3 theme-button-action rounded-lg font-semibold flex items-center gap-2"
           >
             {loading ? (
               <>
diff --git a/src/app/dashboard/schedule/page.tsx b/src/app/dashboard/schedule/page.tsx
index b792d1c..662e7d2 100644
--- a/src/app/dashboard/schedule/page.tsx
+++ b/src/app/dashboard/schedule/page.tsx
@@ -99,7 +99,7 @@ export default function SchedulePage() {
   if (!hasAccess) {
     return (
       <div className="max-w-4xl mx-auto p-6">
-        <div className="rounded-xl border border-red-200 dark:border-red-800 bg-red-50 dark:bg-red-900/20 p-8 text-center">
+        <div className="rounded-xl theme-alert-danger p-8 text-center">
           <svg
             className="mx-auto w-16 h-16 text-red-600 dark:text-red-400 mb-4"
             fill="none"
@@ -129,7 +129,7 @@ export default function SchedulePage() {
       </div>
 
       {/* Date Navigation */}
-      <div className="mb-6 rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900/50 p-6">
+      <div className="dashboard-content-card mb-6">
         <div className="flex flex-col sm:flex-row items-center justify-between gap-4">
           <div className="flex items-center gap-3">
             <button
@@ -146,7 +146,7 @@ export default function SchedulePage() {
                 type="date"
                 value={selectedDate}
                 onChange={(e) => setSelectedDate(e.target.value)}
-                className="px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 theme-text-primary focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                className="form-input"
               />
               <p className="text-sm theme-text-muted mt-1">{formatDate(selectedDate)}</p>
             </div>
@@ -171,40 +171,40 @@ export default function SchedulePage() {
 
       {/* Stats */}
       <div className="grid gap-4 sm:grid-cols-4 mb-6">
-        <div className="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900/50 p-5">
-          <p className="text-xs uppercase tracking-wide theme-text-muted">Total</p>
-          <p className="text-2xl font-semibold theme-text-primary">{appointments.length}</p>
+        <div className="stat-card">
+          <p className="stat-card-label">Total</p>
+          <p className="stat-card-value">{appointments.length}</p>
         </div>
-        <div className="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900/50 p-5">
-          <p className="text-xs uppercase tracking-wide theme-text-muted">Confirmed</p>
-          <p className="text-2xl font-semibold text-blue-600 dark:text-blue-400">
+        <div className="stat-card">
+          <p className="stat-card-label">Confirmed</p>
+          <p className="stat-card-value text-blue-600 dark:text-blue-400">
             {appointments.filter(a => a.status === 'CONFIRMED').length}
           </p>
         </div>
-        <div className="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900/50 p-5">
-          <p className="text-xs uppercase tracking-wide theme-text-muted">In Progress</p>
-          <p className="text-2xl font-semibold text-purple-600 dark:text-purple-400">
+        <div className="stat-card">
+          <p className="stat-card-label">In Progress</p>
+          <p className="stat-card-value text-purple-600 dark:text-purple-400">
             {appointments.filter(a => a.status === 'IN_PROGRESS').length}
           </p>
         </div>
-        <div className="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900/50 p-5">
-          <p className="text-xs uppercase tracking-wide theme-text-muted">Completed</p>
-          <p className="text-2xl font-semibold text-green-600 dark:text-green-400">
+        <div className="stat-card">
+          <p className="stat-card-label">Completed</p>
+          <p className="stat-card-value text-green-600 dark:text-green-400">
             {appointments.filter(a => a.status === 'COMPLETED').length}
           </p>
         </div>
       </div>
 
       {/* Appointments Timeline */}
-      <div className="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900/50 overflow-hidden">
-        <div className="px-6 py-4 border-b border-gray-200 dark:border-gray-800">
+      <div className="dashboard-content-card overflow-hidden">
+        <div className="px-6 py-4 border-b theme-border">
           <h2 className="text-lg font-semibold theme-text-primary">Schedule</h2>
         </div>
         
         {appointments.length === 0 ? (
-          <div className="p-12 text-center">
+          <div className="empty-state">
             <svg
-              className="mx-auto w-16 h-16 text-gray-400 dark:text-gray-600 mb-4"
+              className="mx-auto w-16 h-16 theme-text-muted mb-4"
               fill="none"
               stroke="currentColor"
               viewBox="0 0 24 24"
@@ -219,7 +219,7 @@ export default function SchedulePage() {
         ) : (
           <div className="divide-y divide-gray-200 dark:divide-gray-800">
             {appointments.map((appointment) => (
-              <div key={appointment.id} className="p-6 hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors">
+              <div key={appointment.id} className="p-6 hover:theme-bg-hover transition-colors">
                 <div className="flex items-start gap-4">
                   {/* Time */}
                   <div className="flex-shrink-0 w-24 text-right">
diff --git a/src/app/dashboard/services/page.tsx b/src/app/dashboard/services/page.tsx
index 54929fb..e61e328 100644
--- a/src/app/dashboard/services/page.tsx
+++ b/src/app/dashboard/services/page.tsx
@@ -73,47 +73,45 @@ export default function ServicesPage() {
 
       {/* Stats */}
       <div className="grid gap-4 sm:grid-cols-4 mb-6">
-        <div className="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900/50 p-5">
-          <p className="text-xs uppercase tracking-wide theme-text-muted">Total jobs</p>
-          <p className="text-2xl font-semibold theme-text-primary">{services.length}</p>
+        <div className="stat-card">
+          <p className="stat-card-label">Total jobs</p>
+          <p className="stat-card-value">{services.length}</p>
         </div>
-        <div className="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900/50 p-5">
-          <p className="text-xs uppercase tracking-wide theme-text-muted">Pending</p>
-          <p className="text-2xl font-semibold text-yellow-600 dark:text-yellow-400">
+        <div className="stat-card">
+          <p className="stat-card-label">Pending</p>
+          <p className="stat-card-value text-yellow-600 dark:text-yellow-400">
             {services.filter(s => s.status === 'PENDING').length}
           </p>
         </div>
-        <div className="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900/50 p-5">
-          <p className="text-xs uppercase tracking-wide theme-text-muted">In Progress</p>
-          <p className="text-2xl font-semibold text-blue-600 dark:text-blue-400">
+        <div className="stat-card">
+          <p className="stat-card-label">In Progress</p>
+          <p className="stat-card-value text-blue-600 dark:text-blue-400">
             {services.filter(s => s.status === 'IN_PROGRESS').length}
           </p>
         </div>
-        <div className="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900/50 p-5">
-          <p className="text-xs uppercase tracking-wide theme-text-muted">Completed</p>
-          <p className="text-2xl font-semibold text-green-600 dark:text-green-400">
+        <div className="stat-card">
+          <p className="stat-card-label">Completed</p>
+          <p className="stat-card-value text-green-600 dark:text-green-400">
             {services.filter(s => s.status === 'COMPLETED').length}
           </p>
         </div>
       </div>
 
       {/* Filters */}
-      <div className="mb-6">
-        <div className="flex flex-wrap gap-2">
-          {statusFilters.map((filter) => (
-            <button
-              key={filter}
-              onClick={() => setStatusFilter(filter)}
-              className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
-                statusFilter === filter
-                  ? 'bg-blue-600 text-white'
-                  : 'theme-bg-secondary theme-text-secondary hover:bg-blue-50 dark:hover:bg-blue-900/30'
-              }`}
-            >
-              {filter === 'ALL' ? 'All' : filter.replace('_', ' ')}
-            </button>
-          ))}
-        </div>
+      <div className="filter-tabs-container mb-6">
+        {statusFilters.map((filter) => (
+          <button
+            key={filter}
+            onClick={() => setStatusFilter(filter)}
+            className={`filter-tab ${
+              statusFilter === filter
+                ? 'filter-tab-active'
+                : 'filter-tab-inactive'
+            }`}
+          >
+            {filter === 'ALL' ? 'All' : filter.replace('_', ' ')}
+          </button>
+        ))}
       </div>
 
       {/* Services List */}
@@ -121,7 +119,7 @@ export default function ServicesPage() {
         {filteredServices.length === 0 ? (
           <div className="rounded-xl border-2 border-dashed border-gray-300 dark:border-gray-700 p-12 text-center">
             <svg
-              className="mx-auto w-16 h-16 text-gray-400 dark:text-gray-600 mb-4"
+              className="mx-auto w-16 h-16 theme-text-muted mb-4"
               fill="none"
               stroke="currentColor"
               viewBox="0 0 24 24"
@@ -140,7 +138,7 @@ export default function ServicesPage() {
             <Link
               key={service.id}
               href={`/dashboard/services/${service.id}`}
-              className="block rounded-xl border border-gray-200 dark:border-gray-800 hover:border-blue-400 dark:hover:border-blue-500 transition-colors"
+              className="block rounded-xl border border-gray-200 dark:border-gray-800 hover:border-blue-400 dark:hover:border-blue-500 hover:shadow-lg transition-all"
             >
               <div className="p-6">
                 <div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-3 mb-4">
diff --git a/src/app/dashboard/time-logs/page.tsx b/src/app/dashboard/time-logs/page.tsx
index 8f29ec2..15369fe 100644
--- a/src/app/dashboard/time-logs/page.tsx
+++ b/src/app/dashboard/time-logs/page.tsx
@@ -114,7 +114,7 @@ export default function TimeLogsPage() {
   if (!hasAccess) {
     return (
       <div className="max-w-4xl mx-auto p-6">
-        <div className="rounded-xl border border-red-200 dark:border-red-800 bg-red-50 dark:bg-red-900/20 p-8 text-center">
+        <div className="rounded-xl theme-alert-danger p-8 text-center">
           <svg
             className="mx-auto w-16 h-16 text-red-600 dark:text-red-400 mb-4"
             fill="none"
@@ -176,11 +176,11 @@ export default function TimeLogsPage() {
 
         {/* Add Time Log Form */}
         {showForm && (
-          <form onSubmit={handleSubmit} className="mb-6 rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900/50 p-6">
-            <h3 className="text-lg font-semibold theme-text-primary mb-4">Log Work Hours</h3>
+          <form onSubmit={handleSubmit} className="mb-6 rounded-xl border border-gray-200 dark:border-gray-800 bg-gradient-to-br from-blue-50 to-cyan-50 dark:from-gray-900/50 dark:to-gray-800/50 p-6 shadow-sm">
+            <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">Log Work Hours</h3>
             <div className="grid gap-4 sm:grid-cols-2">
               <div>
-                <label htmlFor="workDate" className="block text-sm font-semibold theme-text-primary mb-2">
+                <label htmlFor="workDate" className="block text-sm font-semibold text-gray-700 dark:text-gray-200 mb-2">
                   Work Date <span className="text-red-500">*</span>
                 </label>
                 <input
@@ -190,11 +190,11 @@ export default function TimeLogsPage() {
                   value={formData.date}
                   onChange={(e) => setFormData({ ...formData, date: e.target.value })}
                   max={new Date().toISOString().split('T')[0]}
-                  className="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 theme-text-primary focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                  className="form-input"
                 />
               </div>
               <div>
-                <label htmlFor="hoursWorked" className="block text-sm font-semibold theme-text-primary mb-2">
+                <label htmlFor="hoursWorked" className="block text-sm font-semibold text-gray-700 dark:text-gray-200 mb-2">
                   Hours Worked <span className="text-red-500">*</span>
                 </label>
                 <input
@@ -206,18 +206,18 @@ export default function TimeLogsPage() {
                   value={formData.hours || ''}
                   onChange={(e) => setFormData({ ...formData, hours: parseFloat(e.target.value) })}
                   placeholder="e.g., 8.5"
-                  className="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 theme-text-primary focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                  className="form-input"
                 />
               </div>
               <div>
-                <label htmlFor="taskType" className="block text-sm font-semibold theme-text-primary mb-2">
+                <label htmlFor="taskType" className="block text-sm font-semibold text-gray-700 dark:text-gray-200 mb-2">
                   Task Type
                 </label>
                 <select
                   id="taskType"
                   value={formData.workType}
                   onChange={(e) => setFormData({ ...formData, workType: e.target.value })}
-                  className="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 theme-text-primary focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                  className="form-select"
                 >
                   <option value="">Select type...</option>
                   <option value="Service">Service Work</option>
@@ -230,7 +230,7 @@ export default function TimeLogsPage() {
                 </select>
               </div>
               <div>
-                <label htmlFor="serviceId" className="block text-sm font-semibold theme-text-primary mb-2">
+                <label htmlFor="serviceId" className="block text-sm font-semibold text-gray-700 dark:text-gray-200 mb-2">
                   Service ID <span className="text-red-500">*</span>
                 </label>
                 <input
@@ -240,12 +240,12 @@ export default function TimeLogsPage() {
                   value={formData.serviceId || ''}
                   onChange={(e) => setFormData({ ...formData, serviceId: e.target.value })}
                   placeholder="Enter service ID"
-                  className="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 theme-text-primary focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                  className="form-input"
                 />
               </div>
             </div>
             <div className="mt-4">
-              <label htmlFor="description" className="block text-sm font-semibold theme-text-primary mb-2">
+              <label htmlFor="description" className="block text-sm font-semibold text-gray-700 dark:text-gray-200 mb-2">
                 Description
               </label>
               <textarea
@@ -254,7 +254,7 @@ export default function TimeLogsPage() {
                 value={formData.description}
                 onChange={(e) => setFormData({ ...formData, description: e.target.value })}
                 placeholder="Describe the work performed..."
-                className="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 theme-text-primary focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none"
+                className="form-textarea"
               />
             </div>
             <div className="mt-4 flex justify-end gap-3">
@@ -280,17 +280,17 @@ export default function TimeLogsPage() {
 
       {/* Stats */}
       <div className="grid gap-4 sm:grid-cols-3 mb-8">
-        <div className="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900/50 p-5">
-          <p className="text-xs uppercase tracking-wide theme-text-muted">Total hours</p>
-          <p className="text-2xl font-semibold theme-text-primary">{totalHours.toFixed(1)}h</p>
+        <div className="stat-card">
+          <p className="stat-card-label">Total hours</p>
+          <p className="stat-card-value">{totalHours.toFixed(1)}h</p>
         </div>
-        <div className="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900/50 p-5">
-          <p className="text-xs uppercase tracking-wide theme-text-muted">Total logs</p>
-          <p className="text-2xl font-semibold theme-text-primary">{filteredLogs.length}</p>
+        <div className="stat-card">
+          <p className="stat-card-label">Total logs</p>
+          <p className="stat-card-value">{filteredLogs.length}</p>
         </div>
-        <div className="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900/50 p-5">
-          <p className="text-xs uppercase tracking-wide theme-text-muted">This week</p>
-          <p className="text-2xl font-semibold theme-text-primary">
+        <div className="stat-card">
+          <p className="stat-card-label">This week</p>
+          <p className="stat-card-value">
             {filteredLogs
               .filter(l => {
                 const weekAgo = Date.now() - 7 * 24 * 60 * 60 * 1000;
@@ -303,15 +303,15 @@ export default function TimeLogsPage() {
       </div>
 
       {/* Time Logs Table */}
-      <div className="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900/50 overflow-hidden">
-        <div className="px-6 py-4 border-b border-gray-200 dark:border-gray-800">
+      <div className="dashboard-content-card overflow-hidden">
+        <div className="px-6 py-4 border-b theme-border">
           <h2 className="text-lg font-semibold theme-text-primary">Recent Activity</h2>
         </div>
 
         {filteredLogs.length === 0 ? (
-          <div className="p-12 text-center">
+          <div className="empty-state">
             <svg
-              className="mx-auto w-16 h-16 text-gray-400 dark:text-gray-600 mb-4"
+              className="mx-auto w-16 h-16 theme-text-muted mb-4"
               fill="none"
               stroke="currentColor"
               viewBox="0 0 24 24"
@@ -324,7 +324,7 @@ export default function TimeLogsPage() {
         ) : (
           <div className="overflow-x-auto">
             <table className="w-full">
-              <thead className="bg-gray-50 dark:bg-gray-800/50">
+              <thead className="theme-bg-tertiary">
                 <tr>
                   <th className="px-6 py-3 text-left text-xs font-semibold theme-text-muted uppercase tracking-wider">Date</th>
                   <th className="px-6 py-3 text-left text-xs font-semibold theme-text-muted uppercase tracking-wider">Hours</th>
@@ -347,7 +347,7 @@ export default function TimeLogsPage() {
                   filteredLogs.map((log, index) => {
                     const isOwnLog = profile?.username === log.employeeId;
                     return (
-                      <tr key={log.id || `log-${index}`} className="hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors">
+                      <tr key={log.id || `log-${index}`} className="hover:theme-bg-hover transition-colors">
                         <td className="px-6 py-4 whitespace-nowrap theme-text-primary font-medium">
                           {formatDate(log.date)}
                         </td>
@@ -374,7 +374,7 @@ export default function TimeLogsPage() {
                               Delete
                             </button>
                           ) : (
-                            <span className="text-gray-400 dark:text-gray-600 text-sm">—</span>
+                            <span className="theme-text-muted text-sm">—</span>
                           )}
                         </td>
                       </tr>
diff --git a/src/app/dashboard/vehicles/[vehicleId]/page.tsx b/src/app/dashboard/vehicles/[vehicleId]/page.tsx
index 854f162..d0c1950 100644
--- a/src/app/dashboard/vehicles/[vehicleId]/page.tsx
+++ b/src/app/dashboard/vehicles/[vehicleId]/page.tsx
@@ -72,7 +72,7 @@ export default function VehicleDetailsPage() {
   if (error || !vehicle) {
     return (
       <div className="container mx-auto px-4 py-8 theme-bg-primary min-h-screen">
-        <div className="bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-800 text-red-700 dark:text-red-300 px-4 py-3 rounded-lg">
+        <div className="theme-alert-danger">
           {error || 'Vehicle not found'}
         </div>
         <button
diff --git a/src/app/dashboard/vehicles/page.tsx b/src/app/dashboard/vehicles/page.tsx
index f9a3b5e..a7ed4f8 100644
--- a/src/app/dashboard/vehicles/page.tsx
+++ b/src/app/dashboard/vehicles/page.tsx
@@ -75,7 +75,7 @@ export default function VehiclesPage() {
       </div>
 
       {error && (
-        <div className="bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-800 text-red-700 dark:text-red-300 px-4 py-3 rounded-lg mb-6">
+        <div className="theme-alert-danger mb-6">
           {error}
         </div>
       )}
@@ -114,7 +114,7 @@ export default function VehiclesPage() {
       {vehicles.length === 0 ? (
         <div className="text-center py-16 automotive-card">
           <svg
-            className="mx-auto w-24 h-24 text-gray-400 dark:text-gray-600 mb-4"
+            className="mx-auto w-24 h-24 theme-text-muted mb-4"
             fill="none"
             stroke="currentColor"
             viewBox="0 0 24 24"
diff --git a/src/app/globals.css b/src/app/globals.css
index 37d2d45..3ceb91b 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -2,28 +2,68 @@
 
 /* CSS Variables for theme colors - Automotive Theme */
 :root {
-  /* Light theme colors - Automotive inspired */
+  /* Light theme colors - Automotive inspired with improved consistency */
   --bg-primary: #ffffff;
   --bg-secondary: #f8fafc;
   --bg-tertiary: #f1f5f9;
+  --bg-hover: #e2e8f0;
   --bg-accent: linear-gradient(135deg, #1e293b 0%, #334155 100%);
   --bg-secondary-translucent: rgba(248, 250, 252, 0.85);
+  
+  /* Text colors with clear hierarchy */
   --text-primary: #0f172a;
-  --text-secondary: #334155;
+  --text-secondary: #475569;
   --text-muted: #64748b;
+  
+  /* Border colors */
   --border-color: #e2e8f0;
+  --border-hover: #cbd5e1;
+  
+  /* Primary accent colors */
   --accent-primary: #0ea5e9;
   --accent-hover: #0284c7;
   --accent-secondary: #f59e0b;
   --accent-secondary-hover: #d97706;
+  
+  /* Status colors - Light mode optimized */
   --success: #10b981;
   --success-hover: #059669;
+  --success-bg: #d1fae5;
+  --success-border: #6ee7b7;
+  --success-text: #065f46;
+  
   --warning: #f59e0b;
   --warning-hover: #d97706;
+  --warning-bg: #fef3c7;
+  --warning-border: #fcd34d;
+  --warning-text: #92400e;
+  
   --danger: #ef4444;
   --danger-hover: #dc2626;
-  --shadow-color: rgba(15, 23, 42, 0.05);
-  --shadow-accent: rgba(14, 165, 233, 0.2);
+  --danger-bg: #fee2e2;
+  --danger-border: #fca5a5;
+  --danger-text: #991b1b;
+  
+  --info: #3b82f6;
+  --info-hover: #2563eb;
+  --info-bg: #dbeafe;
+  --info-border: #93c5fd;
+  --info-text: #1e3a8a;
+  
+  /* Neutral shades for consistent UI elements */
+  --gray-50: #f9fafb;
+  --gray-100: #f3f4f6;
+  --gray-200: #e5e7eb;
+  --gray-300: #d1d5db;
+  --gray-400: #9ca3af;
+  --gray-500: #6b7280;
+  --gray-600: #4b5563;
+  --gray-700: #374151;
+  --gray-800: #1f2937;
+  
+  /* Shadows */
+  --shadow-color: rgba(15, 23, 42, 0.08);
+  --shadow-accent: rgba(14, 165, 233, 0.25);
 }
 
 /* Dark theme colors - Automotive Night Mode */
@@ -31,22 +71,62 @@ html.dark {
   --bg-primary: #0f172a;
   --bg-secondary: #1e293b;
   --bg-tertiary: #111c32;
+  --bg-hover: #334155;
   --bg-accent: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
   --bg-secondary-translucent: rgba(30, 41, 59, 0.85);
+  
+  /* Text colors with clear hierarchy */
   --text-primary: #f8fafc;
   --text-secondary: #cbd5e1;
   --text-muted: #94a3b8;
+  
+  /* Border colors */
   --border-color: #334155;
+  --border-hover: #475569;
+  
+  /* Primary accent colors */
   --accent-primary: #38bdf8;
   --accent-hover: #0ea5e9;
   --accent-secondary: #fbbf24;
   --accent-secondary-hover: #f59e0b;
+  
+  /* Status colors - Dark mode optimized */
   --success: #22d3ee;
   --success-hover: #06b6d4;
+  --success-bg: rgba(34, 211, 238, 0.1);
+  --success-border: rgba(34, 211, 238, 0.3);
+  --success-text: #5eead4;
+  
   --warning: #fbbf24;
   --warning-hover: #f59e0b;
+  --warning-bg: rgba(251, 191, 36, 0.1);
+  --warning-border: rgba(251, 191, 36, 0.3);
+  --warning-text: #fcd34d;
+  
   --danger: #f87171;
   --danger-hover: #ef4444;
+  --danger-bg: rgba(248, 113, 113, 0.1);
+  --danger-border: rgba(248, 113, 113, 0.3);
+  --danger-text: #fca5a5;
+  
+  --info: #60a5fa;
+  --info-hover: #3b82f6;
+  --info-bg: rgba(96, 165, 250, 0.1);
+  --info-border: rgba(96, 165, 250, 0.3);
+  --info-text: #93c5fd;
+  
+  /* Neutral shades for consistent UI elements */
+  --gray-50: #1e293b;
+  --gray-100: #334155;
+  --gray-200: #475569;
+  --gray-300: #64748b;
+  --gray-400: #94a3b8;
+  --gray-500: #cbd5e1;
+  --gray-600: #e2e8f0;
+  --gray-700: #f1f5f9;
+  --gray-800: #f8fafc;
+  
+  /* Shadows */
   --shadow-color: rgba(0, 0, 0, 0.6);
   --shadow-accent: rgba(56, 189, 248, 0.2);
 }
@@ -68,11 +148,391 @@ body {
 .theme-bg-primary { background-color: var(--bg-primary); }
 .theme-bg-secondary { background-color: var(--bg-secondary); }
 .theme-bg-tertiary { background-color: var(--bg-tertiary); }
+.theme-bg-hover { background-color: var(--bg-hover); }
 .theme-text-primary { color: var(--text-primary); }
 .theme-text-secondary { color: var(--text-secondary); }
 .theme-text-muted { color: var(--text-muted); }
 .theme-border { border-color: var(--border-color); }
 
+/* Gray utility classes for consistency */
+.theme-bg-gray-50 { background-color: var(--gray-50); }
+.theme-bg-gray-100 { background-color: var(--gray-100); }
+.theme-bg-gray-200 { background-color: var(--gray-200); }
+.theme-text-gray-400 { color: var(--gray-400); }
+.theme-text-gray-500 { color: var(--gray-500); }
+.theme-text-gray-600 { color: var(--gray-600); }
+.theme-border-gray-200 { border-color: var(--gray-200); }
+.theme-border-gray-300 { border-color: var(--gray-300); }
+.theme-border-gray-700 { border-color: var(--gray-700); }
+
+/* Alert/Message styles - Status colors */
+.theme-alert-success {
+  background-color: var(--success-bg);
+  border: 1px solid var(--success-border);
+  color: var(--success-text);
+  padding: 1rem;
+  border-radius: 0.5rem;
+}
+
+.theme-alert-warning {
+  background-color: var(--warning-bg);
+  border: 1px solid var(--warning-border);
+  color: var(--warning-text);
+  padding: 1rem;
+  border-radius: 0.5rem;
+}
+
+.theme-alert-danger {
+  background-color: var(--danger-bg);
+  border: 1px solid var(--danger-border);
+  color: var(--danger-text);
+  padding: 1rem;
+  border-radius: 0.5rem;
+}
+
+.theme-alert-info {
+  background-color: var(--info-bg);
+  border: 1px solid var(--info-border);
+  color: var(--info-text);
+  padding: 1rem;
+  border-radius: 0.5rem;
+}
+
+/* Badge/Status pill styles */
+.theme-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.25rem 0.75rem;
+  border-radius: 9999px;
+  font-size: 0.75rem;
+  font-weight: 600;
+}
+
+.theme-badge-success {
+  background-color: var(--success-bg);
+  color: var(--success-text);
+}
+
+.theme-badge-warning {
+  background-color: var(--warning-bg);
+  color: var(--warning-text);
+}
+
+.theme-badge-danger {
+  background-color: var(--danger-bg);
+  color: var(--danger-text);
+}
+
+.theme-badge-info {
+  background-color: var(--info-bg);
+  color: var(--info-text);
+}
+
+/* Status text colors */
+.theme-text-success { color: var(--success-text); }
+.theme-text-warning { color: var(--warning-text); }
+.theme-text-danger { color: var(--danger-text); }
+.theme-text-info { color: var(--info-text); }
+
+/* STANDARDIZED PAGE LAYOUT CLASSES */
+.dashboard-page-container {
+  min-height: 100vh;
+  background-color: var(--bg-primary);
+  padding: 2rem 1rem;
+}
+
+@media (min-width: 768px) {
+  .dashboard-page-container {
+    padding: 2rem;
+  }
+}
+
+.dashboard-page-header {
+  margin-bottom: 2rem;
+}
+
+.dashboard-page-title {
+  font-size: 1.875rem;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin-bottom: 0.5rem;
+}
+
+.dashboard-page-subtitle {
+  color: var(--text-muted);
+  font-size: 0.875rem;
+}
+
+.dashboard-content-card {
+  background-color: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: 1rem;
+  padding: 1.5rem;
+  box-shadow: 0 1px 3px var(--shadow-color);
+}
+
+/* STANDARDIZED FILTER/TAB BUTTON STYLES */
+.filter-tabs-container {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+  margin-bottom: 1.5rem;
+}
+
+.filter-tab {
+  padding: 0.625rem 1.25rem;
+  border-radius: 0.5rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  cursor: pointer;
+  border: 1px solid transparent;
+  white-space: nowrap;
+}
+
+.filter-tab-active {
+  background: linear-gradient(135deg, #0CA0E4 0%, #0CA0E4  100%);
+  color: white;
+  border-color: #0CA0E4;
+  font-weight: 600;
+  box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.3), 0 2px 4px -1px rgba(59, 130, 246, 0.2);
+}
+
+.filter-tab-inactive {
+  background-color: var(--bg-secondary);
+  color: var(--text-secondary);
+  border-color: var(--border-color);
+}
+
+.filter-tab-inactive:hover {
+  background-color: #0ca0e483;
+  color: #ffffff;
+  border-color: #0ca0e4b7;
+}
+
+:root.dark .filter-tab-inactive:hover {
+  background-color: rgba(59, 130, 246, 0.1);
+  color: #0CA0E4;
+  border-color: #0CA0E4;
+}
+
+/* Legacy support - keep for backward compatibility */
+.theme-filter-active {
+  background: linear-gradient(135deg, #0CA0E4 0%, #0CA0E4 100%);
+  color: white;
+  border: 1px solid #0CA0E4;
+  font-weight: 600;
+  box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.3), 0 2px 4px -1px rgba(59, 130, 246, 0.2);
+}
+
+.theme-filter-inactive {
+  background-color: var(--bg-secondary);
+  color: var(--text-secondary);
+  border: 1px solid var(--border-color);
+}
+
+.theme-filter-inactive:hover {
+  background-color: #0CA0E4;
+  color: #0CA0E4;
+  border-color: #0CA0E4;
+}
+
+:root.dark .theme-filter-inactive:hover {
+  background-color:#0CA0E4;
+  color: #0CA0E4;
+  border-color: #60a5fa;
+}
+
+/* Action button variants */
+.theme-button-action {
+  background: var(--accent-primary);
+  color: white;
+  border: none;
+  padding: 0.75rem 1.5rem;
+  border-radius: 0.5rem;
+  font-weight: 600;
+  font-size: 0.875rem;
+  transition: all 0.2s ease;
+  cursor: pointer;
+}
+
+.theme-button-action:hover {
+  background: var(--accent-hover);
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px var(--shadow-accent);
+}
+
+.theme-button-action:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  transform: none;
+}
+
+/* STANDARDIZED BUTTON STYLES */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.75rem 1.5rem;
+  border-radius: 0.5rem;
+  font-weight: 600;
+  font-size: 0.875rem;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  cursor: pointer;
+  border: 1px solid transparent;
+  white-space: nowrap;
+}
+
+.btn-primary {
+  background: var(--accent-primary);
+  color: white;
+  border-color: var(--accent-primary);
+}
+
+.btn-primary:hover {
+  background: var(--accent-hover);
+  border-color: var(--accent-hover);
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px var(--shadow-accent);
+}
+
+.btn-secondary {
+  background: var(--bg-secondary);
+  color: var(--text-primary);
+  border-color: var(--border-color);
+}
+
+.btn-secondary:hover {
+  background: var(--bg-tertiary);
+  border-color: var(--border-hover);
+}
+
+.btn-danger {
+  background: var(--danger);
+  color: white;
+  border-color: var(--danger);
+}
+
+.btn-danger:hover {
+  background: var(--danger-hover);
+  border-color: var(--danger-hover);
+}
+
+.btn-success {
+  background: var(--success);
+  color: white;
+  border-color: var(--success);
+}
+
+.btn-success:hover {
+  background: var(--success-hover);
+  border-color: var(--success-hover);
+}
+
+/* STANDARDIZED EMPTY STATE STYLES */
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 4rem 2rem;
+  text-align: center;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: 1rem;
+}
+
+.empty-state-icon {
+  width: 4rem;
+  height: 4rem;
+  color: var(--text-muted);
+  margin-bottom: 1rem;
+}
+
+.empty-state-title {
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin-bottom: 0.5rem;
+}
+
+.empty-state-description {
+  color: var(--text-muted);
+  margin-bottom: 1.5rem;
+}
+
+/* STANDARDIZED STAT CARD STYLES */
+.stat-card {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: 0.75rem;
+  padding: 1.25rem;
+  transition: all 0.2s ease;
+}
+
+.stat-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px var(--shadow-color);
+}
+
+.stat-card-label {
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--text-muted);
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+}
+
+.stat-card-value {
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: var(--text-primary);
+}
+
+/* STANDARDIZED TABLE STYLES */
+.data-table {
+  width: 100%;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: 0.75rem;
+  overflow: hidden;
+}
+
+.data-table-header {
+  background: var(--bg-tertiary);
+  border-bottom: 1px solid var(--border-color);
+}
+
+.data-table-header th {
+  padding: 0.75rem 1.5rem;
+  text-align: left;
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--text-muted);
+}
+
+.data-table-body tr {
+  border-bottom: 1px solid var(--border-color);
+  transition: background-color 0.15s ease;
+}
+
+.data-table-body tr:last-child {
+  border-bottom: none;
+}
+
+.data-table-body tr:hover {
+  background: var(--bg-hover);
+}
+
+.data-table-body td {
+  padding: 1rem 1.5rem;
+  color: var(--text-secondary);
+  font-size: 0.875rem;
+}
+
 /* Enhanced form styles */
 .theme-input {
   background-color: var(--bg-primary);
@@ -94,6 +554,65 @@ body {
   color: var(--text-muted);
 }
 
+/* Form input variants for better visibility */
+.form-input,
+.form-select,
+.form-textarea {
+  width: 100%;
+  padding: 0.625rem 0.75rem;
+  border: 1px solid var(--border-color);
+  border-radius: 0.5rem;
+  background-color: var(--bg-primary);
+  color: var(--text-primary);
+  transition: all 0.2s ease;
+  font-size: 0.875rem;
+}
+
+.form-input:focus,
+.form-select:focus,
+.form-textarea:focus {
+  outline: none;
+  border-color: var(--accent-primary);
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+
+.form-input::placeholder,
+.form-textarea::placeholder {
+  color: var(--text-muted);
+}
+
+.form-input:disabled,
+.form-select:disabled,
+.form-textarea:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  background-color: var(--bg-tertiary);
+}
+
+/* Modal/Dialog styles */
+.modal-overlay {
+  position: fixed;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(4px);
+  z-index: 50;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+}
+
+.modal-content {
+  background-color: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: 1rem;
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
+  max-width: 42rem;
+  width: 100%;
+  max-height: 90vh;
+  overflow-y: auto;
+}
+
 /* Enhanced button styles */
 .theme-button-primary {
   background: linear-gradient(135deg, var(--accent-primary), var(--accent-hover));
@@ -247,11 +766,11 @@ html.dark .bg-grid-pattern {
 
 
 .automotive-card {
-  background: var(--bg-primary);
+  background: var(--bg-secondary);
   border: 1px solid var(--border-color);
-  border-radius: 20px;
-  box-shadow: 0 4px 15px var(--shadow-color);
-  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  border-radius: 16px;
+  box-shadow: 0 2px 8px var(--shadow-color);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   position: relative;
   overflow: hidden;
 }
@@ -262,7 +781,7 @@ html.dark .bg-grid-pattern {
   top: 0;
   left: 0;
   right: 0;
-  height: 4px;
+  height: 3px;
   background: linear-gradient(90deg, 
     var(--accent-primary), 
     var(--accent-secondary), 
@@ -277,11 +796,24 @@ html.dark .bg-grid-pattern {
 }
 
 .automotive-card:hover {
-  transform: translateY(-5px);
-  box-shadow: 
-    0 20px 40px var(--shadow-color),
-    0 0 30px var(--shadow-accent);
-  border-color: var(--accent-primary);
+  transform: translateY(-2px);
+  box-shadow: 0 8px 20px var(--shadow-color);
+  border-color: var(--border-hover);
+}
+
+/* Card without hover effects for empty states */
+.automotive-card-static {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: 16px;
+  box-shadow: 0 2px 8px var(--shadow-color);
+  position: relative;
+  overflow: hidden;
+}
+
+/* Automotive accent gradient */
+.automotive-accent {
+  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
 }
 
 /* New Tech Stack Item style */
@@ -311,9 +843,11 @@ html.dark .bg-grid-pattern {
   top: 0;
   z-index: 50;
   width: 100%;
-  background: var(--bg-secondary-translucent);
+  background: var(--bg-secondary);
+  border-bottom: 1px solid var(--border-color);
   backdrop-filter: blur(10px);
   transition: all 0.3s ease-in-out;
+  box-shadow: 0 1px 3px var(--shadow-color);
 }
 
 /* How It Works - Timeline */
diff --git a/src/app/profile/page.tsx b/src/app/profile/page.tsx
index 13c1599..8890c37 100644
--- a/src/app/profile/page.tsx
+++ b/src/app/profile/page.tsx
@@ -278,13 +278,13 @@ export default function ProfilePage() {
         </div>
 
         {error && (
-          <div className="mb-6 p-4 bg-red-50 dark:bg-red-900/20 rounded-lg border border-red-200 dark:border-red-800">
-            <p className="text-sm text-red-600 dark:text-red-400">{error}</p>
+          <div className="mb-6 theme-alert-danger">
+            <p className="text-sm">{error}</p>
           </div>
         )}
 
         {success && (
-          <div className="mb-6 p-4 bg-green-50 dark:bg-green-900/20 rounded-lg border border-green-200 dark:border-green-800">
+          <div className="mb-6 theme-alert-success">
             <p className="text-sm text-green-600 dark:text-green-400">
               {success}
             </p>
diff --git a/src/components/TimeTracker.tsx b/src/components/TimeTracker.tsx
index eeeffe9..ef1d167 100644
--- a/src/components/TimeTracker.tsx
+++ b/src/components/TimeTracker.tsx
@@ -100,7 +100,7 @@ export default function TimeTracker({ appointmentId, onClockIn, onClockOut }: Ti
     return (
       <div>
         {error && (
-          <div className="mb-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 text-red-700 dark:text-red-300 px-4 py-3 rounded-lg text-sm">
+          <div className="mb-4 theme-alert-danger text-sm">
             {error}
           </div>
         )}
@@ -121,7 +121,7 @@ export default function TimeTracker({ appointmentId, onClockIn, onClockOut }: Ti
   return (
     <div className="space-y-4">
       {error && (
-        <div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 text-red-700 dark:text-red-300 px-4 py-3 rounded-lg text-sm">
+        <div className="theme-alert-danger text-sm">
           {error}
         </div>
       )}