diff --git a/.github/workflows/build-test.yml b/.github/workflows/build-test.yml
index 07830ac..ba59612 100644
--- a/.github/workflows/build-test.yml
+++ b/.github/workflows/build-test.yml
@@ -40,6 +40,12 @@ jobs:
       - name: Run linter
         run: npm run lint
 
+      - name: SonarQube Scan
+        uses: SonarSource/sonarqube-scan-action@v4
+        env:
+          SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
       - name: Build production bundle
         run: npm run build
 
diff --git a/.nvmrc b/.nvmrc
new file mode 100644
index 0000000..12cf442
--- /dev/null
+++ b/.nvmrc
@@ -0,0 +1 @@
+20
diff --git a/README.md b/README.md
index cb940ed..32b07fa 100644
--- a/README.md
+++ b/README.md
@@ -230,7 +230,14 @@ const nextConfig = {
 
 ### Prerequisites
 
-- Node.js 18+
+- Node.js 20.9.0+
+  - Recommend using [nvm](https://github.com/nvm-sh/nvm) (Node Version Manager):
+    ```bash
+    curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
+    # Restart terminal or source ~/.bashrc
+    nvm install 20
+    nvm use 20
+    ```
 - npm or yarn
 - Backend services running (see [Backend README](../backend/README.md))
 
diff --git a/app/cart/page.tsx b/app/cart/page.tsx
index 92e8059..d9a8f0d 100644
--- a/app/cart/page.tsx
+++ b/app/cart/page.tsx
@@ -21,22 +21,22 @@ export default function CartPage() {
 
   if (isLoading) {
     return (
-      <div className="min-h-screen bg-white dark:bg-gray-900 py-12 flex justify-center items-center">
-        <Loader2 className="h-12 w-12 animate-spin text-wso2-orange" />
+      <div className="min-h-screen bg-background py-12 flex justify-center items-center">
+        <Loader2 className="h-12 w-12 animate-spin text-primary" />
       </div>
     );
   }
 
   if (items.length === 0) {
     return (
-      <div className="min-h-screen bg-white dark:bg-gray-900 py-12">
+      <div className="min-h-screen bg-background py-12">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
           <div className="text-center py-20">
-            <ShoppingBag className="h-24 w-24 text-gray-400 mx-auto mb-6" />
-            <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-4">
+            <ShoppingBag className="h-24 w-24 text-muted-foreground mx-auto mb-6" />
+            <h2 className="text-3xl font-bold text-foreground mb-4">
               Your cart is empty
             </h2>
-            <p className="text-gray-600 dark:text-gray-400 mb-8">
+            <p className="text-muted-foreground mb-8">
               Add some awesome products to get started!
             </p>
             <AnimatedButton href="/" variant="primary">
@@ -49,7 +49,7 @@ export default function CartPage() {
   }
 
   return (
-    <div className="min-h-screen bg-white dark:bg-gray-900 py-12">
+    <div className="min-h-screen bg-background py-12">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <motion.div
           initial={{ opacity: 0, y: 20 }}
@@ -57,12 +57,12 @@ export default function CartPage() {
           transition={{ duration: 0.6 }}
         >
           <div className="flex items-center justify-between mb-8">
-            <h1 className="text-4xl font-bold text-gray-900 dark:text-white">
+            <h1 className="text-4xl font-heading font-bold text-foreground">
               Shopping Cart
             </h1>
             <button
               onClick={clearCart}
-              className="text-red-500 hover:text-red-600 transition-colors text-sm font-medium"
+              className="text-destructive hover:text-destructive/80 transition-colors text-sm font-medium"
             >
               Clear Cart
             </button>
@@ -77,7 +77,7 @@ export default function CartPage() {
                   initial={{ opacity: 0, y: 20 }}
                   animate={{ opacity: 1, y: 0 }}
                   transition={{ delay: index * 0.1, duration: 0.5 }}
-                  className="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-md border border-gray-200 dark:border-gray-700"
+                  className="bg-card text-card-foreground rounded-xl p-6 shadow-md border border-border"
                 >
                   <div className="flex gap-6">
                     <Link href={`/product/${item.product.id}`}>
@@ -93,14 +93,14 @@ export default function CartPage() {
 
                     <div className="flex-1">
                       <Link href={`/product/${item.product.id}`}>
-                        <h3 className="font-semibold text-gray-900 dark:text-white mb-2 hover:text-wso2-orange transition-colors">
+                        <h3 className="font-semibold text-foreground mb-2 hover:text-primary transition-colors">
                           {item.product.name}
                         </h3>
                       </Link>
-                      <p className="text-sm text-gray-500 dark:text-gray-400 mb-2">
+                      <p className="text-sm text-muted-foreground mb-2">
                         {item.product.brand}
                       </p>
-                      <p className="text-2xl font-bold text-wso2-orange">
+                      <p className="text-2xl font-bold text-primary">
                         {`LKR ${item.product.price.toLocaleString('en-LK')}`}
                       </p>
                     </div>
@@ -108,15 +108,15 @@ export default function CartPage() {
                     <div className="flex flex-col items-end justify-between">
                       <button
                         onClick={() => removeItem(item.product.id)}
-                        className="p-2 text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg transition-colors"
+                        className="p-2 text-destructive hover:bg-destructive/10 rounded-lg transition-colors"
                       >
                         <Trash2 className="h-5 w-5" />
                       </button>
 
-                      <div className="flex items-center gap-3 bg-gray-100 dark:bg-gray-700 rounded-lg p-1">
+                      <div className="flex items-center gap-3 bg-muted rounded-lg p-1">
                         <button
                           onClick={() => updateQuantity(item.product.id, item.quantity - 1)}
-                          className="p-1 hover:bg-white dark:hover:bg-gray-600 rounded transition-colors"
+                          className="p-1 hover:bg-background rounded transition-colors"
                         >
                           <Minus className="h-4 w-4" />
                         </button>
@@ -126,7 +126,7 @@ export default function CartPage() {
                         <button
                           onClick={() => updateQuantity(item.product.id, item.quantity + 1)}
                           disabled={item.quantity >= item.product.stockLevel}
-                          className="p-1 hover:bg-white dark:hover:bg-gray-600 rounded transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                          className="p-1 hover:bg-background rounded transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
                         >
                           <Plus className="h-4 w-4" />
                         </button>
@@ -144,24 +144,24 @@ export default function CartPage() {
               transition={{ duration: 0.6 }}
               className="lg:col-span-1"
             >
-              <div className="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-md border border-gray-200 dark:border-gray-700 sticky top-20">
-                <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-6">
+              <div className="bg-card text-card-foreground rounded-xl p-6 shadow-md border border-border sticky top-20">
+                <h2 className="text-2xl font-bold text-foreground mb-6">
                   Order Summary
                 </h2>
 
                 <div className="space-y-4 mb-6">
-                  <div className="flex justify-between text-gray-600 dark:text-gray-400">
+                  <div className="flex justify-between text-muted-foreground">
                     <span>Subtotal</span>
                     <span>{`LKR ${subtotal.toLocaleString('en-LK')}`}</span>
                   </div>
-                  <div className="flex justify-between text-gray-600 dark:text-gray-400">
+                  <div className="flex justify-between text-muted-foreground">
                     <span>VAT (15%)</span>
                     <span>{`LKR ${tax.toLocaleString('en-LK')}`}</span>
                   </div>
-                  <div className="border-t border-gray-200 dark:border-gray-700 pt-4">
-                    <div className="flex justify-between text-xl font-bold text-gray-900 dark:text-white">
+                  <div className="border-t border-border pt-4">
+                    <div className="flex justify-between text-xl font-bold text-foreground">
                       <span>Total</span>
-                      <span className="text-wso2-orange">{`LKR ${total.toLocaleString('en-LK')}`}</span>
+                      <span className="text-primary">{`LKR ${total.toLocaleString('en-LK')}`}</span>
                     </div>
                   </div>
                 </div>
@@ -172,7 +172,7 @@ export default function CartPage() {
 
                 <Link
                   href="/"
-                  className="block text-center mt-4 text-wso2-orange hover:text-wso2-orange-dark transition-colors"
+                  className="block text-center mt-4 text-primary hover:text-primary/80 transition-colors"
                 >
                   Continue Shopping
                 </Link>
diff --git a/app/compare/page.tsx b/app/compare/page.tsx
index 8ff3a41..b1878e5 100644
--- a/app/compare/page.tsx
+++ b/app/compare/page.tsx
@@ -13,7 +13,7 @@ export default function ComparePage() {
   const { items, removeItem, clearCompare } = useCompareStore();
   const { products } = useProductStore();
   const { addItem } = useCartStore();
-  
+
   // Get full product objects from IDs
   const compareList: Product[] = items
     .map(id => products.find(p => p.id === id))
@@ -21,24 +21,24 @@ export default function ComparePage() {
 
   if (compareList.length === 0) {
     return (
-      <div className="min-h-screen bg-linear-to-b from-white to-gray-50 dark:from-gray-900 dark:to-black flex items-center justify-center py-24">
+      <div className="min-h-screen bg-background flex items-center justify-center py-24">
         <motion.div
           initial={{ opacity: 0, y: 20 }}
           animate={{ opacity: 1, y: 0 }}
           className="text-center"
         >
-          <div className="w-32 h-32 bg-orange-100 dark:bg-orange-900/30 rounded-full flex items-center justify-center mx-auto mb-6">
-            <Minus className="w-16 h-16 text-orange-600 dark:text-orange-500" />
+          <div className="w-32 h-32 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-6">
+            <Minus className="w-16 h-16 text-primary" />
           </div>
-          <h1 className="text-3xl font-bold text-gray-900 dark:text-white mb-4">
+          <h1 className="text-3xl font-bold font-heading text-foreground mb-4">
             No Products to Compare
           </h1>
-          <p className="text-gray-600 dark:text-gray-400 mb-8">
+          <p className="text-muted-foreground mb-8">
             Add products from product pages to compare their features
           </p>
           <Link
             href="/components"
-            className="inline-block px-8 py-3 bg-linear-to-r from-orange-600 to-orange-500 text-white rounded-lg font-semibold hover:shadow-lg transition"
+            className="inline-block px-8 py-3 bg-primary text-primary-foreground rounded-lg font-semibold hover:bg-primary/90 hover:shadow-lg transition"
           >
             Browse Components
           </Link>
@@ -55,41 +55,42 @@ export default function ComparePage() {
   );
 
   return (
-    <div className="min-h-screen bg-linear-to-b from-white to-gray-50 dark:from-gray-900 dark:to-black py-24">
+    <div className="min-h-screen bg-background py-24">
       <div className="container mx-auto px-4">
-        
+
         {/* Header */}
         <motion.div
           initial={{ opacity: 0, y: -20 }}
           animate={{ opacity: 1, y: 0 }}
           className="text-center mb-8"
         >
-          <h1 className="text-5xl font-bold mb-4 bg-linear-to-r from-orange-600 to-orange-500 bg-clip-text text-transparent">
+          <h1 className="text-5xl font-bold font-heading mb-4 bg-gradient-to-r from-primary to-orange-500 bg-clip-text text-transparent">
             Compare Products
           </h1>
-          <p className="text-xl text-gray-600 dark:text-gray-400 mb-6">
+          <p className="text-xl text-muted-foreground mb-6">
             Side-by-side comparison of {compareList.length} product{compareList.length > 1 ? 's' : ''}
           </p>
           <button
             onClick={clearCompare}
-            className="px-6 py-2 text-red-600 dark:text-red-500 border-2 border-red-600 dark:border-red-500 rounded-lg font-semibold hover:bg-red-50 dark:hover:bg-red-900/20 transition"
+            className="px-6 py-2 text-destructive border-2 border-destructive rounded-lg font-semibold hover:bg-destructive/10 transition"
           >
             Clear All
           </button>
         </motion.div>
 
+        {/* Comparison Table */}
         {/* Comparison Table */}
         <motion.div
           initial={{ opacity: 0, y: 20 }}
           animate={{ opacity: 1, y: 0 }}
-          className="bg-white dark:bg-gray-800 rounded-2xl shadow-xl border border-gray-200 dark:border-gray-700 overflow-hidden"
+          className="bg-card text-card-foreground rounded-2xl shadow-xl border border-border overflow-hidden"
         >
           <div className="overflow-x-auto">
             <table className="w-full">
               <thead>
-                <tr className="border-b border-gray-200 dark:border-gray-700">
-                  <th className="p-4 text-left sticky left-0 bg-white dark:bg-gray-800 z-10">
-                    <span className="text-gray-600 dark:text-gray-400 font-medium">
+                <tr className="border-b border-border">
+                  <th className="p-4 text-left sticky left-0 bg-card z-10">
+                    <span className="text-muted-foreground font-medium">
                       Specification
                     </span>
                   </th>
@@ -98,7 +99,7 @@ export default function ComparePage() {
                       <div className="relative">
                         <button
                           onClick={() => removeItem(product.id)}
-                          className="absolute -top-2 -right-2 p-1 bg-red-500 text-white rounded-full hover:bg-red-600 transition z-20"
+                          className="absolute -top-2 -right-2 p-1 bg-destructive text-destructive-foreground rounded-full hover:bg-destructive/90 transition z-20"
                         >
                           <X className="w-4 h-4" />
                         </button>
@@ -109,18 +110,18 @@ export default function ComparePage() {
                           height={200}
                           className="w-full h-40 object-cover rounded-lg mb-3"
                         />
-                        <h3 className="font-semibold text-gray-900 dark:text-white text-left mb-1">
+                        <h3 className="font-semibold text-foreground text-left mb-1">
                           {product.name}
                         </h3>
-                        <p className="text-sm text-gray-600 dark:text-gray-400 text-left mb-2">
+                        <p className="text-sm text-muted-foreground text-left mb-2">
                           {product.brand}
                         </p>
-                        <p className="text-2xl font-bold text-orange-600 dark:text-orange-500 text-left mb-3">
+                        <p className="text-2xl font-bold text-primary text-left mb-3">
                           ${product.price.toLocaleString()}
                         </p>
                         <button
                           onClick={() => addItem(product, 1)}
-                          className="w-full py-2 bg-linear-to-r from-orange-600 to-orange-500 text-white rounded-lg text-sm font-semibold hover:shadow-lg transition flex items-center justify-center gap-2"
+                          className="w-full py-2 bg-primary text-primary-foreground rounded-lg text-sm font-semibold hover:bg-primary/90 hover:shadow-lg transition flex items-center justify-center gap-2"
                         >
                           <ShoppingCart className="w-4 h-4" />
                           Add to Cart
@@ -132,19 +133,19 @@ export default function ComparePage() {
               </thead>
               <tbody>
                 {/* Basic Info */}
-                <tr className="border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700/50">
-                  <td className="p-4 font-semibold text-gray-900 dark:text-white sticky left-0 bg-gray-50 dark:bg-gray-700/50">
+                <tr className="border-b border-border bg-muted/50">
+                  <td className="p-4 font-semibold text-foreground sticky left-0 bg-muted/50">
                     Category
                   </td>
                   {compareList.map((product) => (
-                    <td key={product.id} className="p-4 text-gray-600 dark:text-gray-400">
+                    <td key={product.id} className="p-4 text-muted-foreground">
                       {product.subcategory || product.category}
                     </td>
                   ))}
                 </tr>
 
-                <tr className="border-b border-gray-200 dark:border-gray-700">
-                  <td className="p-4 font-semibold text-gray-900 dark:text-white sticky left-0 bg-white dark:bg-gray-800">
+                <tr className="border-b border-border">
+                  <td className="p-4 font-semibold text-foreground sticky left-0 bg-card">
                     Stock
                   </td>
                   {compareList.map((product) => (
@@ -155,7 +156,7 @@ export default function ComparePage() {
                           In Stock
                         </span>
                       ) : (
-                        <span className="inline-flex items-center gap-1 px-3 py-1 bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400 rounded-full text-sm font-semibold">
+                        <span className="inline-flex items-center gap-1 px-3 py-1 bg-destructive/10 text-destructive rounded-full text-sm font-semibold">
                           <X className="w-4 h-4" />
                           Out of Stock
                         </span>
@@ -164,12 +165,12 @@ export default function ComparePage() {
                   ))}
                 </tr>
 
-                <tr className="border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700/50">
-                  <td className="p-4 font-semibold text-gray-900 dark:text-white sticky left-0 bg-gray-50 dark:bg-gray-700/50">
+                <tr className="border-b border-border bg-muted/50">
+                  <td className="p-4 font-semibold text-foreground sticky left-0 bg-muted/50">
                     Rating
                   </td>
                   {compareList.map((product) => (
-                    <td key={product.id} className="p-4 text-gray-600 dark:text-gray-400">
+                    <td key={product.id} className="p-4 text-muted-foreground">
                       {product.rating ? (
                         <div className="flex items-center gap-2">
                           <span className="font-semibold">{product.rating.toFixed(1)}</span>
@@ -177,7 +178,7 @@ export default function ComparePage() {
                           <span className="text-sm">({product.reviewCount || 0} reviews)</span>
                         </div>
                       ) : (
-                        <span className="text-gray-400">No ratings</span>
+                        <span className="text-muted-foreground/50">No ratings</span>
                       )}
                     </td>
                   ))}
@@ -187,21 +188,19 @@ export default function ComparePage() {
                 {allSpecKeys.map((specKey: string, index: number) => (
                   <tr
                     key={specKey}
-                    className={`border-b border-gray-200 dark:border-gray-700 ${
-                      index % 2 === 0 ? '' : 'bg-gray-50 dark:bg-gray-700/50'
-                    }`}
+                    className={`border-b border-border ${index % 2 === 0 ? '' : 'bg-muted/50'
+                      }`}
                   >
-                    <td className={`p-4 font-semibold text-gray-900 dark:text-white sticky left-0 ${
-                      index % 2 === 0 ? 'bg-white dark:bg-gray-800' : 'bg-gray-50 dark:bg-gray-700/50'
-                    }`}>
+                    <td className={`p-4 font-semibold text-foreground sticky left-0 ${index % 2 === 0 ? 'bg-card' : 'bg-muted/50'
+                      }`}>
                       {specKey.charAt(0).toUpperCase() + specKey.slice(1)}
                     </td>
                     {compareList.map((product: Product) => (
-                      <td key={product.id} className="p-4 text-gray-600 dark:text-gray-400">
+                      <td key={product.id} className="p-4 text-muted-foreground">
                         {product.specs[specKey] !== undefined ? (
                           <span>{product.specs[specKey]}</span>
                         ) : (
-                          <span className="text-gray-400">-</span>
+                          <span className="text-muted-foreground/50">-</span>
                         )}
                       </td>
                     ))}
@@ -209,12 +208,12 @@ export default function ComparePage() {
                 ))}
 
                 {/* Description */}
-                <tr className="bg-gray-50 dark:bg-gray-700/50">
-                  <td className="p-4 font-semibold text-gray-900 dark:text-white sticky left-0 bg-gray-50 dark:bg-gray-700/50">
+                <tr className="bg-muted/50">
+                  <td className="p-4 font-semibold text-foreground sticky left-0 bg-muted/50">
                     Description
                   </td>
                   {compareList.map((product) => (
-                    <td key={product.id} className="p-4 text-sm text-gray-600 dark:text-gray-400">
+                    <td key={product.id} className="p-4 text-sm text-muted-foreground">
                       {product.description}
                     </td>
                   ))}
@@ -230,12 +229,12 @@ export default function ComparePage() {
           animate={{ opacity: 1, y: 0 }}
           className="mt-8 text-center"
         >
-          <p className="text-gray-600 dark:text-gray-400 mb-4">
+          <p className="text-muted-foreground mb-4">
             You can compare up to 4 products at once
           </p>
           <Link
             href="/components"
-            className="inline-block px-8 py-3 border-2 border-orange-500 text-orange-600 dark:text-orange-500 rounded-lg font-semibold hover:bg-orange-50 dark:hover:bg-orange-900/20 transition"
+            className="inline-block px-8 py-3 border-2 border-primary text-primary rounded-lg font-semibold hover:bg-primary/10 transition"
           >
             Add More Products
           </Link>
diff --git a/app/components/[category]/page.tsx b/app/components/[category]/page.tsx
index 47c0b34..df38a92 100644
--- a/app/components/[category]/page.tsx
+++ b/app/components/[category]/page.tsx
@@ -67,7 +67,7 @@ export default function ComponentsCategoryPage({ params }: { params: { category:
   };
 
   return (
-    <div className="min-h-screen bg-white dark:bg-gray-900 py-12">
+    <div className="min-h-screen bg-background py-12">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <motion.div
           initial={{ opacity: 0, y: 20 }}
@@ -75,10 +75,10 @@ export default function ComponentsCategoryPage({ params }: { params: { category:
           transition={{ duration: 0.6 }}
           className="mb-8"
         >
-          <h1 className="text-4xl font-bold text-gray-900 dark:text-white mb-2">
+          <h1 className="text-4xl font-bold font-heading text-foreground mb-2">
             {subcategory}s
           </h1>
-          <p className="text-lg text-gray-600 dark:text-gray-400">
+          <p className="text-lg text-muted-foreground">
             {filteredProducts.length} products found
           </p>
         </motion.div>
@@ -91,17 +91,17 @@ export default function ComponentsCategoryPage({ params }: { params: { category:
             transition={{ duration: 0.6 }}
             className="lg:w-64 shrink-0"
           >
-            <div className="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-md border border-gray-200 dark:border-gray-700 sticky top-20">
+            <div className="bg-card border border-border rounded-xl p-6 shadow-md sticky top-20 text-card-foreground">
               <div className="flex items-center gap-2 mb-6">
-                <Filter className="h-5 w-5 text-wso2-orange" />
-                <h2 className="text-xl font-bold text-gray-900 dark:text-white">
+                <Filter className="h-5 w-5 text-primary" />
+                <h2 className="text-xl font-bold text-foreground">
                   Filters
                 </h2>
               </div>
 
               {/* Price Range */}
               <div className="mb-6">
-                <h3 className="font-semibold text-gray-900 dark:text-white mb-3">
+                <h3 className="font-semibold text-foreground mb-3">
                   Price Range
                 </h3>
                 <div className="space-y-2">
@@ -110,21 +110,21 @@ export default function ComponentsCategoryPage({ params }: { params: { category:
                     value={minPrice}
                     onChange={(e) => setMinPrice(Number(e.target.value))}
                     placeholder="Min"
-                    className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
+                    className="w-full px-3 py-2 border border-input rounded-lg bg-background text-foreground"
                   />
                   <input
                     type="number"
                     value={maxPrice}
                     onChange={(e) => setMaxPrice(Number(e.target.value))}
                     placeholder="Max"
-                    className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
+                    className="w-full px-3 py-2 border border-input rounded-lg bg-background text-foreground"
                   />
                 </div>
               </div>
 
               {/* Brand Filter */}
               <div className="mb-6">
-                <h3 className="font-semibold text-gray-900 dark:text-white mb-3">
+                <h3 className="font-semibold text-foreground mb-3">
                   Brand
                 </h3>
                 <div className="space-y-2">
@@ -134,9 +134,9 @@ export default function ComponentsCategoryPage({ params }: { params: { category:
                         type="checkbox"
                         checked={selectedBrands.includes(brand)}
                         onChange={() => toggleBrand(brand)}
-                        className="mr-2 accent-wso2-orange"
+                        className="mr-2 accent-primary"
                       />
-                      <span className="text-gray-700 dark:text-gray-300">
+                      <span className="text-muted-foreground">
                         {brand}
                       </span>
                     </label>
@@ -151,9 +151,9 @@ export default function ComponentsCategoryPage({ params }: { params: { category:
                     type="checkbox"
                     checked={inStockOnly}
                     onChange={(e) => setInStockOnly(e.target.checked)}
-                    className="mr-2 accent-wso2-orange"
+                    className="mr-2 accent-primary"
                   />
-                  <span className="text-gray-700 dark:text-gray-300">
+                  <span className="text-muted-foreground">
                     In Stock Only
                   </span>
                 </label>
@@ -168,7 +168,7 @@ export default function ComponentsCategoryPage({ params }: { params: { category:
               <select
                 value={sortBy}
                 onChange={(e) => setSortBy(e.target.value)}
-                className="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
+                className="px-4 py-2 border border-input rounded-lg bg-background text-foreground"
               >
                 <option value="featured">Featured</option>
                 <option value="price-low">Price: Low to High</option>
@@ -193,7 +193,7 @@ export default function ComponentsCategoryPage({ params }: { params: { category:
 
             {filteredProducts.length === 0 && (
               <div className="text-center py-20">
-                <p className="text-gray-500 dark:text-gray-400 text-lg">
+                <p className="text-muted-foreground text-lg">
                   No products found matching your filters
                 </p>
               </div>
diff --git a/app/components/home/CategoriesSection.tsx b/app/components/home/CategoriesSection.tsx
index 720abad..062ab64 100644
--- a/app/components/home/CategoriesSection.tsx
+++ b/app/components/home/CategoriesSection.tsx
@@ -6,18 +6,18 @@ import { Cpu, HardDrive, Cpu as Gpu, MemoryStick, Box, Zap, Fan, Monitor } from
 
 export default function CategoriesSection() {
   const categories = [
-    { name: 'CPUs', icon: Cpu, href: '/components/cpu', color: 'from-blue-500 to-blue-600' },
-    { name: 'GPUs', icon: Gpu, href: '/components/gpu', color: 'from-green-500 to-green-600' },
-    { name: 'Motherboards', icon: Monitor, href: '/components/motherboard', color: 'from-purple-500 to-purple-600' },
-    { name: 'RAM', icon: MemoryStick, href: '/components/ram', color: 'from-yellow-500 to-yellow-600' },
-    { name: 'Storage', icon: HardDrive, href: '/components/storage', color: 'from-red-500 to-red-600' },
-    { name: 'Power Supply', icon: Zap, href: '/components/psu', color: 'from-orange-500 to-orange-600' },
-    { name: 'Cooling', icon: Fan, href: '/components/cooler', color: 'from-cyan-500 to-cyan-600' },
-    { name: 'Cases', icon: Box, href: '/components/case', color: 'from-pink-500 to-pink-600' },
+    { name: 'CPUs', icon: Cpu, href: '/components/cpu' },
+    { name: 'GPUs', icon: Gpu, href: '/components/gpu' },
+    { name: 'Motherboards', icon: Monitor, href: '/components/motherboard' },
+    { name: 'RAM', icon: MemoryStick, href: '/components/ram' },
+    { name: 'Storage', icon: HardDrive, href: '/components/storage' },
+    { name: 'Power Supply', icon: Zap, href: '/components/psu' },
+    { name: 'Cooling', icon: Fan, href: '/components/cooler' },
+    { name: 'Cases', icon: Box, href: '/components/case' },
   ];
 
   return (
-    <section className="py-12 sm:py-16 md:py-20 bg-white dark:bg-gray-900">
+    <section className="py-12 sm:py-16 md:py-20 bg-background">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <motion.div
           initial={{ opacity: 0, y: 20 }}
@@ -26,37 +26,35 @@ export default function CategoriesSection() {
           transition={{ duration: 0.6 }}
           className="text-center mb-8 sm:mb-10 md:mb-12"
         >
-          <h2 className="text-2xl sm:text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-3 sm:mb-4">
+          <h2 className="text-2xl sm:text-3xl md:text-4xl font-heading font-bold text-foreground mb-3 sm:mb-4">
             Shop by Category
           </h2>
-          <p className="text-base sm:text-lg text-gray-600 dark:text-gray-400">
+          <p className="text-base sm:text-lg text-muted-foreground">
             Find the perfect components for your build
           </p>
         </motion.div>
 
-        <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3 sm:gap-4 md:gap-6">
+        <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4 sm:gap-6">
           {categories.map((category, index) => (
             <motion.div
               key={category.name}
               initial={{ opacity: 0, y: 20 }}
               whileInView={{ opacity: 1, y: 0 }}
               viewport={{ once: true }}
-              transition={{ delay: index * 0.1, duration: 0.5 }}
+              transition={{ delay: index * 0.05, duration: 0.4 }}
             >
               <Link href={category.href}>
                 <motion.div
-                  whileHover={{ y: -5, scale: 1.02 }}
+                  whileHover={{ y: -5 }}
                   whileTap={{ scale: 0.98 }}
-                  className="relative group overflow-hidden rounded-lg sm:rounded-xl bg-linear-to-br p-4 sm:p-5 md:p-6 h-full min-h-[120px] sm:min-h-[140px] md:min-h-40 flex flex-col items-center justify-center text-white shadow-lg hover:shadow-2xl transition-all cursor-pointer"
-                  style={{
-                    background: `linear-gradient(135deg, var(--tw-gradient-stops))`,
-                  }}
+                  className="group relative flex flex-col items-center justify-center p-6 rounded-2xl bg-gradient-to-br from-card to-secondary/5 border border-primary/10 shadow-sm hover:shadow-lg hover:border-primary/50 transition-all duration-300 h-full min-h-[160px]"
                 >
-                  <div className={`absolute inset-0 bg-linear-to-br ${category.color} opacity-90 group-hover:opacity-100 transition-opacity`} />
-                  <div className="relative z-10 flex flex-col items-center">
-                    <category.icon className="h-8 w-8 sm:h-10 sm:w-10 md:h-12 md:w-12 mb-2 sm:mb-3" />
-                    <h3 className="text-sm sm:text-base md:text-lg font-bold text-center">{category.name}</h3>
+                  <div className="mb-4 text-primary group-hover:scale-110 transition-transform duration-300 bg-primary/10 p-4 rounded-xl">
+                    <category.icon className="h-8 w-8" strokeWidth={1.5} />
                   </div>
+                  <h3 className="text-base sm:text-lg font-semibold text-foreground group-hover:text-primary transition-colors">
+                    {category.name}
+                  </h3>
                 </motion.div>
               </Link>
             </motion.div>
diff --git a/app/components/home/FeaturedProductsSection.tsx b/app/components/home/FeaturedProductsSection.tsx
index 1f701ad..70a2d42 100644
--- a/app/components/home/FeaturedProductsSection.tsx
+++ b/app/components/home/FeaturedProductsSection.tsx
@@ -9,14 +9,14 @@ import { useState, useEffect } from 'react';
 export default function FeaturedProductsSection() {
   const { featuredProducts, fetchFeaturedProducts, isLoading } = useProductStore();
   const [currentIndex, setCurrentIndex] = useState(0);
-  
+
   useEffect(() => {
     fetchFeaturedProducts();
   }, [fetchFeaturedProducts]);
 
   // Use featured products from store
   const productsToDisplay = featuredProducts.length > 0 ? featuredProducts : [];
-  
+
   const itemsPerView = 4;
   const maxIndex = Math.max(0, productsToDisplay.length - itemsPerView);
 
@@ -30,14 +30,14 @@ export default function FeaturedProductsSection() {
 
   if (isLoading) {
     return (
-      <section className="py-12 sm:py-16 md:py-20 bg-gray-50 dark:bg-gray-800 flex justify-center items-center min-h-[400px]">
-        <Loader2 className="h-8 w-8 animate-spin text-wso2-orange" />
+      <section className="py-12 sm:py-16 md:py-20 bg-muted/20 flex justify-center items-center min-h-[400px]">
+        <Loader2 className="h-8 w-8 animate-spin text-primary" />
       </section>
     );
   }
 
   return (
-    <section className="py-12 sm:py-16 md:py-20 bg-gray-50 dark:bg-gray-800">
+    <section className="py-12 sm:py-16 md:py-20 bg-muted/20">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <motion.div
           initial={{ opacity: 0, y: 20 }}
@@ -47,10 +47,10 @@ export default function FeaturedProductsSection() {
           className="flex flex-col sm:flex-row items-start sm:items-center justify-between mb-8 sm:mb-10 md:mb-12 gap-4"
         >
           <div>
-            <h2 className="text-2xl sm:text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-2">
+            <h2 className="text-2xl sm:text-3xl md:text-4xl font-heading font-bold text-foreground mb-2">
               Featured Products
             </h2>
-            <p className="text-base sm:text-lg text-gray-600 dark:text-gray-400">
+            <p className="text-base sm:text-lg text-muted-foreground">
               Our most popular and highly-rated components
             </p>
           </div>
@@ -61,18 +61,18 @@ export default function FeaturedProductsSection() {
               whileTap={{ scale: 0.9 }}
               onClick={handlePrev}
               disabled={currentIndex === 0}
-              className="p-2 rounded-lg bg-white dark:bg-gray-700 shadow-md hover:bg-gray-100 dark:hover:bg-gray-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+              className="p-2 rounded-lg bg-card border border-border hover:bg-muted disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
             >
-              <ChevronLeft className="h-6 w-6 text-gray-900 dark:text-white" />
+              <ChevronLeft className="h-6 w-6 text-foreground" />
             </motion.button>
             <motion.button
               whileHover={{ scale: 1.1 }}
               whileTap={{ scale: 0.9 }}
               onClick={handleNext}
               disabled={currentIndex >= maxIndex}
-              className="p-2 rounded-lg bg-white dark:bg-gray-700 shadow-md hover:bg-gray-100 dark:hover:bg-gray-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+              className="p-2 rounded-lg bg-card border border-border hover:bg-muted disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
             >
-              <ChevronRight className="h-6 w-6 text-gray-900 dark:text-white" />
+              <ChevronRight className="h-6 w-6 text-foreground" />
             </motion.button>
           </div>
         </motion.div>
@@ -106,11 +106,10 @@ export default function FeaturedProductsSection() {
             <button
               key={index}
               onClick={() => setCurrentIndex(index)}
-              className={`h-2 w-2 rounded-full transition-all ${
-                currentIndex === index
-                  ? 'bg-wso2-orange w-8'
-                  : 'bg-gray-300 dark:bg-gray-600'
-              }`}
+              className={`h-2 w-2 rounded-full transition-all ${currentIndex === index
+                  ? 'bg-primary w-8'
+                  : 'bg-muted-foreground/30'
+                }`}
             />
           ))}
         </div>
diff --git a/app/components/home/HeroSection.tsx b/app/components/home/HeroSection.tsx
index 8cbbb20..8bf70e7 100644
--- a/app/components/home/HeroSection.tsx
+++ b/app/components/home/HeroSection.tsx
@@ -1,137 +1,155 @@
 'use client';
 
 import { motion } from 'framer-motion';
-import AnimatedButton from '../ui/AnimatedButton';
+import Link from 'next/link';
+import Image from 'next/image';
+import { ArrowRight } from 'lucide-react';
+
 export default function HeroSection() {
-  return (
-    <section className="relative min-h-[500px] sm:min-h-[600px] lg:min-h-[700px] flex items-center justify-center overflow-hidden">
-      {/* Animated Background */}
-      <div className="absolute inset-0 bg-linear-to-br from-gray-100 via-white to-gray-200 dark:from-black dark:via-gray-900 dark:to-gray-800 transition-colors">
-        {/* Animated gradient blobs */}
-        <motion.div
-          animate={{
-            scale: [1, 1.2, 1],
-            rotate: [0, 90, 0],
-            opacity: [0.3, 0.5, 0.3],
-          }}
-          transition={{
-            duration: 20,
-            repeat: Infinity,
-            ease: 'linear',
-          }}
-          className="absolute top-1/4 left-1/4 w-64 h-64 bg-wso2-orange/15 dark:bg-wso2-orange/20 rounded-full blur-3xl"
-        />
-        <motion.div
-          animate={{
-            scale: [1.2, 1, 1.2],
-            rotate: [90, 0, 90],
-            opacity: [0.2, 0.4, 0.2],
-          }}
-          transition={{
-            duration: 25,
-            repeat: Infinity,
-            ease: 'linear',
-          }}
-          className="absolute bottom-1/4 right-1/4 w-96 h-96 bg-wso2-orange/10 dark:bg-wso2-orange/15 rounded-full blur-3xl"
-        />
-        <motion.div
-          animate={{
-            y: [0, -50, 0],
-            opacity: [0.1, 0.3, 0.1],
-          }}
-          transition={{
-            duration: 15,
-            repeat: Infinity,
-            ease: 'easeInOut',
-          }}
-          className="absolute top-1/2 left-1/2 w-72 h-72 bg-orange-400/15 dark:bg-orange-500/20 rounded-full blur-3xl transform -translate-x-1/2 -translate-y-1/2"
-        />
-        
-        {/* Grid overlay */}
-        <div className="absolute inset-0 bg-[linear-gradient(rgba(255,115,0,0.08)_1px,transparent_1px),linear-gradient(90deg,rgba(255,115,0,0.08)_1px,transparent_1px)] dark:bg-[linear-gradient(rgba(255,115,0,0.05)_1px,transparent_1px),linear-gradient(90deg,rgba(255,115,0,0.05)_1px,transparent_1px)] bg-size-[50px_50px] mask-[radial-gradient(ellipse_80%_80%_at_50%_50%,black,transparent)] transition-colors" />
-      </div>
+  const containerVariants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.1,
+      },
+    },
+  };
 
-      {/* Content */}
-      <div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
-        <motion.div
-          initial={{ opacity: 0, y: 30 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.8 }}
-        >
-          <motion.h1
-            className="text-3xl sm:text-4xl md:text-5xl lg:text-7xl font-bold mb-4 sm:mb-6 text-gray-900 dark:text-white px-4 transition-colors drop-shadow-2xl"
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ delay: 0.2, duration: 0.8 }}
-            style={{
-              textShadow: '0 4px 20px rgba(0,0,0,0.3), 0 0 40px rgba(255,115,0,0.2)',
-            }}
-          >
-            Build Your Dream.
-            <br />
-            <span className="text-wso2-orange" style={{ textShadow: '0 0 40px rgba(255,115,0,0.5)' }}>
-              Forge Your Power.
-            </span>
-          </motion.h1>
-          
-          <motion.p
-            className="text-base sm:text-lg md:text-xl lg:text-2xl text-gray-600 dark:text-gray-300 mb-8 sm:mb-12 max-w-3xl mx-auto px-4 transition-colors drop-shadow-lg"
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ delay: 0.4, duration: 0.8 }}
-            style={{
-              textShadow: '0 2px 10px rgba(0,0,0,0.3)',
-            }}
-          >
-            Premium computer components and custom PC builds. Experience unmatched performance with CS02.
-          </motion.p>
+  const itemVariants = {
+    hidden: { opacity: 0, y: 20 },
+    visible: { opacity: 1, y: 0, transition: { duration: 0.5 } },
+  };
 
+  return (
+    <section className="py-6 sm:py-10 px-4 sm:px-6 lg:px-8 max-w-[1440px] mx-auto">
+      <motion.div
+        variants={containerVariants}
+        initial="hidden"
+        animate="visible"
+        className="grid grid-cols-1 lg:grid-cols-3 gap-6 h-auto lg:h-[650px]"
+      >
+        {/* Left Column Group */}
+        <div className="lg:col-span-2 flex flex-col gap-6 h-full">
+          {/* Main Hero Banner */}
           <motion.div
-            className="flex flex-col sm:flex-row gap-3 sm:gap-4 justify-center items-center px-4"
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ delay: 0.6, duration: 0.8 }}
+            variants={itemVariants}
+            className="relative group rounded-3xl overflow-hidden h-[400px] lg:h-[60%] flex-shrink-0"
           >
-            <AnimatedButton href="/builderbot" variant="primary" className="text-base sm:text-lg px-6 sm:px-8 py-3 sm:py-4 w-full sm:w-auto">
-              Try the BuilderBot
-            </AnimatedButton>
-            <AnimatedButton href="/pre-builts" variant="outlineContrast" className="text-base sm:text-lg px-6 sm:px-8 py-3 sm:py-4 w-full sm:w-auto">
-              Shop Pre-Built Rigs
-            </AnimatedButton>
+            <Image
+              src="/images/hero/hero-setup.png"
+              alt="Premium Gaming Setup"
+              fill
+              className="object-cover transition-transform duration-700 group-hover:scale-105"
+              priority
+            />
+            <div className="absolute inset-0 bg-gradient-to-r from-black/60 to-transparent p-8 sm:p-12 flex flex-col justify-center text-white">
+              <span className="inline-block px-3 py-1 bg-primary/20 backdrop-blur-md border border-primary/30 rounded-full text-xs sm:text-sm font-medium text-primary-foreground mb-4 w-fit">
+                New Arrival
+              </span>
+              <h1 className="text-3xl sm:text-4xl md:text-5xl font-heading font-bold mb-4 leading-tight">
+                Ultimate Gaming <br /> Experience
+              </h1>
+              <p className="text-gray-200 mb-8 max-w-md text-sm sm:text-base">
+                Discover our premium collection of custom builds and high-performance components designed for the modern gamer.
+              </p>
+              <Link
+                href="/pre-builts"
+                className="inline-flex items-center gap-2 bg-white text-black px-6 py-3 rounded-full font-bold hover:bg-gray-100 transition-colors w-fit"
+              >
+                Shop Now <ArrowRight size={18} />
+              </Link>
+            </div>
           </motion.div>
-        </motion.div>
 
-        {/* Floating stats */}
-        <motion.div
-          initial={{ opacity: 0, y: 30 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ delay: 0.8, duration: 0.8 }}
-          className="mt-12 sm:mt-16 md:mt-20 grid grid-cols-2 md:grid-cols-4 gap-4 sm:gap-6 md:gap-8 px-4"
-        >
-          {[
-            { value: '10K+', label: 'Builds Delivered' },
-            { value: '500+', label: 'Products' },
-            { value: '98%', label: 'Satisfaction' },
-            { value: '24/7', label: 'Support' },
-          ].map((stat, index) => (
+          {/* Bottom Split Row */}
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-6 h-[auto] lg:h-[40%] flex-grow">
+            {/* Bottom Left: Peripherals */}
+            <motion.div
+              variants={itemVariants}
+              className="relative group rounded-3xl overflow-hidden min-h-[250px] lg:min-h-0 bg-[#F5F5F7] dark:bg-card"
+            >
+              <div className="absolute top-0 left-0 p-6 z-10">
+                <h3 className="text-xl font-bold text-foreground mb-1">Peripherals</h3>
+                <p className="text-muted-foreground text-sm">Click in style</p>
+                <Link
+                  href="/components"
+                  className="mt-4 inline-flex items-center text-sm font-bold text-primary hover:underline"
+                >
+                  View Collection
+                </Link>
+              </div>
+              <div className="absolute inset-0 flex items-center justify-end translate-y-8 translate-x-8 sm:translate-y-0 sm:translate-x-0">
+                <Image
+                  src="/images/hero/hero-peripherals.png"
+                  alt="Gaming User Gear"
+                  width={300}
+                  height={300}
+                  className="object-contain drop-shadow-xl transition-transform duration-500 group-hover:scale-110 group-hover:-rotate-3"
+                />
+              </div>
+            </motion.div>
+
+            {/* Bottom Right: Components */}
             <motion.div
-              key={stat.label}
-              initial={{ opacity: 0, scale: 0.8 }}
-              animate={{ opacity: 1, scale: 1 }}
-              transition={{ delay: 1 + index * 0.1, duration: 0.5 }}
-              whileHover={{ scale: 1.05, y: -5 }}
-              className="text-center backdrop-blur-md bg-white/10 dark:bg-black/20 border border-white/20 dark:border-white/10 rounded-2xl p-4 sm:p-6 shadow-2xl"
+              variants={itemVariants}
+              className="relative group rounded-3xl overflow-hidden min-h-[250px] lg:min-h-0 bg-[#F0F4F8] dark:bg-muted"
             >
-              <div className="text-2xl sm:text-3xl md:text-4xl font-bold text-wso2-orange mb-1 sm:mb-2" style={{ textShadow: '0 0 20px rgba(255,115,0,0.4)' }}>
-                {stat.value}
+              <div className="absolute top-0 right-0 max-w-[60%] p-6 z-10 text-right">
+                <h3 className="text-xl font-bold text-foreground mb-1">Components</h3>
+                <p className="text-muted-foreground text-sm">Power your dream</p>
+                <Link
+                  href="/components"
+                  className="mt-4 inline-flex items-center text-sm font-bold text-primary hover:underline"
+                >
+                  Upgrade Now
+                </Link>
               </div>
-              <div className="text-xs sm:text-sm md:text-base text-gray-700 dark:text-gray-300 font-medium">
-                {stat.label}
+              <div className="absolute bottom-0 left-0 p-4">
+                <Image
+                  src="/images/hero/hero-gpu.png"
+                  alt="High End GPU"
+                  width={280}
+                  height={200}
+                  className="object-contain drop-shadow-2xl transition-transform duration-500 group-hover:scale-105 group-hover:-translate-y-2"
+                />
               </div>
             </motion.div>
-          ))}
+          </div>
+        </div>
+
+        {/* Right Column: Tall Banner */}
+        <motion.div
+          variants={itemVariants}
+          className="lg:col-span-1 relative group rounded-3xl overflow-hidden min-h-[500px] lg:min-h-auto flex flex-col justify-end bg-[#E8E8E8] dark:bg-card"
+        >
+          <Image
+            src="/images/hero/hero-case.png"
+            alt="Sleek PC Case"
+            fill
+            className="object-cover transition-transform duration-700 group-hover:scale-105"
+          />
+          <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent" />
+
+          <div className="relative z-10 p-8 text-white">
+            <span className="text-orange-400 font-bold text-sm tracking-wider uppercase mb-2 block">
+              Limited Edition
+            </span>
+            <h2 className="text-3xl font-heading font-bold mb-3">
+              Compact & <br /> Powerful
+            </h2>
+            <p className="text-gray-300 mb-6 text-sm">
+              Discover the new era of ITX builds. Small footprint, massive performance.
+            </p>
+            <Link
+              href="/pc-builder"
+              className="inline-block w-full text-center bg-primary hover:bg-primary/90 text-white font-bold py-3 rounded-xl transition-all shadow-lg shadow-primary/20"
+            >
+              Start Building
+            </Link>
+          </div>
         </motion.div>
-      </div>
+      </motion.div>
     </section>
   );
 }
diff --git a/app/components/page.tsx b/app/components/page.tsx
index f87ee48..e3017a6 100644
--- a/app/components/page.tsx
+++ b/app/components/page.tsx
@@ -48,7 +48,7 @@ export default function ComponentsPage() {
   }));
 
   return (
-    <div className="min-h-screen bg-white dark:bg-gray-900 py-8 sm:py-10 md:py-12">
+    <div className="min-h-screen bg-background py-8 sm:py-10 md:py-12">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <motion.div
           initial={{ opacity: 0, y: 20 }}
@@ -56,10 +56,10 @@ export default function ComponentsPage() {
           transition={{ duration: 0.6 }}
           className="text-center mb-8 sm:mb-10 md:mb-12"
         >
-          <h1 className="text-2xl sm:text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-3 sm:mb-4">
+          <h1 className="text-2xl sm:text-3xl md:text-4xl font-bold font-heading text-foreground mb-3 sm:mb-4">
             PC Components
           </h1>
-          <p className="text-base sm:text-lg text-gray-600 dark:text-gray-400">
+          <p className="text-base sm:text-lg text-muted-foreground">
             Find the perfect parts for your custom build
           </p>
         </motion.div>
@@ -76,16 +76,16 @@ export default function ComponentsPage() {
                 <motion.div
                   whileHover={{ y: -5, scale: 1.02 }}
                   whileTap={{ scale: 0.98 }}
-                  className="bg-white dark:bg-gray-800 rounded-lg sm:rounded-xl p-4 sm:p-5 md:p-6 shadow-md hover:shadow-xl transition-all border border-gray-200 dark:border-gray-700 group h-full"
+                  className="bg-card text-card-foreground rounded-lg sm:rounded-xl p-4 sm:p-5 md:p-6 shadow-md hover:shadow-xl transition-all border border-border group h-full"
                 >
                   <div className="flex flex-col items-center text-center h-full justify-center">
-                    <div className="p-3 sm:p-4 bg-wso2-orange/10 rounded-full mb-3 sm:mb-4 group-hover:bg-wso2-orange/20 transition-colors">
-                      <category.icon className="h-6 w-6 sm:h-7 sm:w-7 md:h-8 md:w-8 text-wso2-orange" />
+                    <div className="p-3 sm:p-4 bg-primary/10 rounded-full mb-3 sm:mb-4 group-hover:bg-primary/20 transition-colors">
+                      <category.icon className="h-6 w-6 sm:h-7 sm:w-7 md:h-8 md:w-8 text-primary" />
                     </div>
-                    <h3 className="text-base sm:text-lg md:text-xl font-bold text-gray-900 dark:text-white mb-1.5 sm:mb-2">
+                    <h3 className="text-base sm:text-lg md:text-xl font-bold text-foreground mb-1.5 sm:mb-2">
                       {category.name}
                     </h3>
-                    <p className="text-xs sm:text-sm text-gray-600 dark:text-gray-400">
+                    <p className="text-xs sm:text-sm text-muted-foreground">
                       {category.description}
                     </p>
                   </div>
diff --git a/app/components/ui/AnimatedButton.tsx b/app/components/ui/AnimatedButton.tsx
index edbb003..fbec7f4 100644
--- a/app/components/ui/AnimatedButton.tsx
+++ b/app/components/ui/AnimatedButton.tsx
@@ -21,13 +21,13 @@ export default function AnimatedButton({
   type = 'button',
 }: AnimatedButtonProps) {
   const baseClasses = 'px-6 py-3 rounded-lg font-semibold transition-all duration-200';
-  
+
   const variantClasses = {
-    primary: 'bg-wso2-orange text-white hover:bg-wso2-orange-dark shadow-lg hover:shadow-xl',
-    secondary: 'bg-gray-200 dark:bg-gray-800 text-gray-900 dark:text-white hover:bg-gray-300 dark:hover:bg-gray-700',
-    outline: 'border-2 border-wso2-orange text-wso2-orange hover:bg-wso2-orange hover:text-white',
+    primary: 'bg-primary text-primary-foreground hover:bg-primary/90 shadow-lg hover:shadow-xl',
+    secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+    outline: 'border-2 border-primary text-primary hover:bg-primary hover:text-primary-foreground',
     outlineContrast:
-      'border-2 border-wso2-orange text-wso2-orange hover:bg-wso2-orange hover:text-white dark:border-white dark:text-white dark:hover:bg-white dark:hover:text-gray-900',
+      'border-2 border-primary text-primary hover:bg-primary hover:text-primary-foreground dark:border-foreground dark:text-foreground dark:hover:bg-foreground dark:hover:text-background',
   };
 
   const combinedClasses = `${baseClasses} ${variantClasses[variant]} ${className}`;
diff --git a/app/components/ui/Footer.tsx b/app/components/ui/Footer.tsx
index e9ec286..9f1508e 100644
--- a/app/components/ui/Footer.tsx
+++ b/app/components/ui/Footer.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import Link from 'next/link';
-import { Facebook, Twitter, Instagram, Youtube, Mail } from 'lucide-react';
+import { Facebook, Twitter, Instagram, Youtube, Mail, ArrowRight } from 'lucide-react';
 import { motion } from 'framer-motion';
 import { useState } from 'react';
 
@@ -58,21 +58,6 @@ export default function Footer() {
         { href: '/testimonials', label: 'Testimonials' },
       ],
     },
-    {
-      title: 'Services',
-      links: [
-        { href: '/price-match', label: 'Price Match' },
-        { href: '/financing', label: 'Financing' },
-        { href: '/trade-in', label: 'Trade-In' },
-        { href: '/bulk-orders', label: 'Bulk Orders' },
-      ],
-    },
-  ];
-
-  const legalLinks = [
-    { href: '/returns', label: 'Returns & Refunds' },
-    { href: '/privacy', label: 'Privacy Policy' },
-    { href: '/terms', label: 'Terms of Service' },
   ];
 
   const socialLinks = [
@@ -83,41 +68,42 @@ export default function Footer() {
   ];
 
   return (
-    <footer className="bg-gray-100 dark:bg-gray-900 border-t border-gray-200 dark:border-gray-800">
-      {/* Newsletter Section */}
-      <div className="bg-wso2-orange py-8 sm:py-10 md:py-12">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-6">
-            <div className="text-center md:text-left">
-              <h3 className="text-xl sm:text-2xl font-bold text-white mb-2">
-                Stay Updated
+    <footer className="bg-muted/30 border-t border-border mt-auto">
+      {/* Newsletter Section - Cleaner Modern Look */}
+      <div className="border-b border-border">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
+          <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-8">
+            <div className="max-w-xl">
+              <h3 className="text-2xl font-heading font-bold text-foreground mb-3">
+                Join our community
               </h3>
-              <p className="text-sm sm:text-base text-white/90">
-                Subscribe to get special offers, tech news, and more.
+              <p className="text-muted-foreground">
+                Get the latest news on product drops, tech tips, and exclusive deals.
               </p>
             </div>
             <form
               onSubmit={handleNewsletterSubmit}
-              className="flex flex-col sm:flex-row gap-3 max-w-md w-full md:w-auto"
+              className="flex flex-col sm:flex-row gap-3 w-full lg:w-auto min-w-[320px]"
             >
               <div className="relative flex-1">
-                <Mail className="absolute left-3 top-3 h-5 w-5 text-gray-400 dark:text-gray-300" />
                 <input
                   type="email"
                   value={email}
                   onChange={(e) => setEmail(e.target.value)}
                   placeholder="Enter your email"
                   required
-                  className="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-200 dark:border-white/15 bg-white dark:bg-white/5 text-gray-900 dark:text-white placeholder:text-gray-500 dark:placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-wso2-orange focus:border-wso2-orange transition"
+                  className="w-full pl-4 pr-10 py-3 rounded-full border border-input bg-background/50 text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all"
                 />
+                <Mail className="absolute right-3 top-3 h-5 w-5 text-muted-foreground pointer-events-none" />
               </div>
               <motion.button
-                whileHover={{ scale: 1.05 }}
-                whileTap={{ scale: 0.95 }}
+                whileHover={{ scale: 1.02 }}
+                whileTap={{ scale: 0.98 }}
                 type="submit"
-                className="px-6 py-3 bg-white text-wso2-orange font-semibold rounded-lg hover:bg-gray-100 transition-colors whitespace-nowrap"
+                className="px-6 py-3 bg-primary text-primary-foreground font-semibold rounded-full hover:bg-primary/90 transition-colors whitespace-nowrap flex items-center justify-center gap-2"
               >
-                {subscribed ? 'Subscribed!' : 'Subscribe'}
+                {subscribed ? 'Joined!' : 'Subscribe'}
+                {!subscribed && <ArrowRight size={18} />}
               </motion.button>
             </form>
           </div>
@@ -125,19 +111,19 @@ export default function Footer() {
       </div>
 
       {/* Main Footer Content */}
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 sm:py-10 md:py-12">
-        <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-6 sm:gap-8 mb-8 sm:mb-10 md:mb-12">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-8 lg:gap-12 mb-16">
           {footerSections.map((section) => (
             <div key={section.title}>
-              <h4 className="font-bold text-sm sm:text-base text-gray-900 dark:text-white mb-3 sm:mb-4">
+              <h4 className="font-bold text-foreground mb-6">
                 {section.title}
               </h4>
-              <ul className="space-y-1.5 sm:space-y-2">
+              <ul className="space-y-3">
                 {section.links.map((link) => (
                   <li key={link.href}>
                     <Link
                       href={link.href}
-                      className="text-xs sm:text-sm text-gray-600 dark:text-gray-400 hover:text-wso2-orange dark:hover:text-wso2-orange transition-colors block"
+                      className="text-sm text-muted-foreground hover:text-primary transition-colors block"
                     >
                       {link.label}
                     </Link>
@@ -148,45 +134,31 @@ export default function Footer() {
           ))}
         </div>
 
-        {/* Social Links */}
-        <div className="flex justify-center space-x-4 sm:space-x-6 mb-6 sm:mb-8">
-          {socialLinks.map((social) => (
-            <motion.a
-              key={social.label}
-              href={social.href}
-              target="_blank"
-              rel="noopener noreferrer"
-              whileHover={{ scale: 1.1 }}
-              whileTap={{ scale: 0.9 }}
-              className="p-2.5 sm:p-3 bg-gray-200 dark:bg-gray-800 rounded-full hover:bg-wso2-orange dark:hover:bg-wso2-orange hover:text-white transition-colors"
-              aria-label={social.label}
-            >
-              <social.icon className="h-4 w-4 sm:h-5 sm:w-5" />
-            </motion.a>
-          ))}
-        </div>
+        {/* Bottom Section */}
+        <div className="flex flex-col md:flex-row justify-between items-center gap-6 pt-8 border-t border-border">
+          <div className="flex items-center gap-2">
+            <span className="text-xl font-heading font-bold tracking-tight text-foreground">CS02</span>
+            <span className="text-sm text-muted-foreground">© 2025</span>
+          </div>
 
-        {/* Bottom Bar */}
-        <div className="pt-6 sm:pt-8 border-t border-gray-200 dark:border-gray-800">
-          <div className="flex flex-col md:flex-row justify-between items-center space-y-3 md:space-y-0 gap-4">
-            <div className="text-gray-600 dark:text-gray-400 text-xs sm:text-sm text-center md:text-left">
-              <p>© 2025 CS02. All rights reserved.</p>
-            </div>
-            <div className="flex flex-wrap justify-center gap-3 sm:gap-4 text-xs sm:text-sm">
-              {legalLinks.map((link, index) => (
-                <span key={link.href} className="flex items-center">
-                  <Link
-                    href={link.href}
-                    className="text-gray-600 dark:text-gray-400 hover:text-wso2-orange dark:hover:text-wso2-orange transition-colors whitespace-nowrap"
-                  >
-                    {link.label}
-                  </Link>
-                  {index < legalLinks.length - 1 && (
-                    <span className="ml-3 sm:ml-4 text-gray-400">|</span>
-                  )}
-                </span>
-              ))}
-            </div>
+          <div className="flex gap-4">
+            {socialLinks.map((social) => (
+              <a
+                key={social.label}
+                href={social.href}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="p-2 text-muted-foreground hover:text-foreground hover:bg-muted rounded-full transition-colors"
+                aria-label={social.label}
+              >
+                <social.icon size={20} />
+              </a>
+            ))}
+          </div>
+
+          <div className="flex gap-6 text-sm text-muted-foreground">
+            <Link href="/privacy" className="hover:text-foreground transition-colors">Privacy</Link>
+            <Link href="/terms" className="hover:text-foreground transition-colors">Terms</Link>
           </div>
         </div>
       </div>
diff --git a/app/components/ui/LiveChatWidget.tsx b/app/components/ui/LiveChatWidget.tsx
index d22c9f9..5109dc0 100644
--- a/app/components/ui/LiveChatWidget.tsx
+++ b/app/components/ui/LiveChatWidget.tsx
@@ -11,7 +11,7 @@ export default function LiveChatWidget() {
     {
       id: 1,
       type: 'bot',
-          text: 'Hi! Welcome to CS02. How can I help you today?',
+      text: 'Hi! Welcome to CS02. How can I help you today?',
       timestamp: new Date(),
     },
   ]);
@@ -53,7 +53,7 @@ export default function LiveChatWidget() {
         {
           id: prev.length + 1,
           type: 'bot',
-          text: "I&apos;m sorry, I&apos;m having trouble connecting right now.",
+          text: "I'm sorry, I'm having trouble connecting right now.",
           timestamp: new Date(),
         },
       ]);
@@ -72,7 +72,7 @@ export default function LiveChatWidget() {
             whileHover={{ scale: 1.1 }}
             whileTap={{ scale: 0.9 }}
             onClick={() => setIsOpen(true)}
-            className="fixed bottom-6 right-6 z-50 p-4 bg-wso2-orange text-white rounded-full shadow-lg hover:bg-wso2-orange-dark transition-colors"
+            className="fixed bottom-6 right-6 z-50 p-4 bg-primary text-primary-foreground rounded-full shadow-lg hover:bg-primary/90 transition-colors"
             aria-label="Open chat"
           >
             <MessageCircle className="h-6 w-6" />
@@ -87,17 +87,17 @@ export default function LiveChatWidget() {
             initial={{ opacity: 0, y: 20, scale: 0.95 }}
             animate={{ opacity: 1, y: 0, scale: 1 }}
             exit={{ opacity: 0, y: 20, scale: 0.95 }}
-            className="fixed bottom-6 right-6 z-50 w-96 h-[500px] bg-white dark:bg-gray-900 rounded-2xl shadow-2xl flex flex-col overflow-hidden border border-gray-200 dark:border-gray-800"
+            className="fixed bottom-6 right-6 z-50 w-96 h-[500px] bg-card text-card-foreground rounded-2xl shadow-2xl flex flex-col overflow-hidden border border-border"
           >
             {/* Header */}
-            <div className="bg-wso2-orange text-white p-4 flex items-center justify-between">
+            <div className="bg-primary text-primary-foreground p-4 flex items-center justify-between">
               <div>
                 <h3 className="font-bold text-lg">CS02 Support</h3>
-                <p className="text-sm text-white/80">We&apos;re here to help!</p>
+                <p className="text-sm opacity-80">We&apos;re here to help!</p>
               </div>
               <button
                 onClick={() => setIsOpen(false)}
-                className="p-2 hover:bg-white/20 rounded-lg transition-colors"
+                className="p-2 hover:bg-primary-foreground/20 rounded-lg transition-colors"
                 aria-label="Close chat"
               >
                 <X className="h-5 w-5" />
@@ -105,30 +105,27 @@ export default function LiveChatWidget() {
             </div>
 
             {/* Messages */}
-            <div className="flex-1 overflow-y-auto p-4 space-y-4">
+            <div className="flex-1 overflow-y-auto p-4 space-y-4 bg-muted/50">
               {messages.map((message) => (
                 <motion.div
                   key={message.id}
                   initial={{ opacity: 0, y: 10 }}
                   animate={{ opacity: 1, y: 0 }}
-                  className={`flex ${
-                    message.type === 'user' ? 'justify-end' : 'justify-start'
-                  }`}
+                  className={`flex ${message.type === 'user' ? 'justify-end' : 'justify-start'
+                    }`}
                 >
                   <div
-                    className={`max-w-[80%] rounded-lg px-4 py-2 ${
-                      message.type === 'user'
-                        ? 'bg-wso2-orange text-white'
-                        : 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white'
-                    }`}
+                    className={`max-w-[80%] rounded-lg px-4 py-2 ${message.type === 'user'
+                        ? 'bg-primary text-primary-foreground'
+                        : 'bg-card border border-border text-card-foreground'
+                      }`}
                   >
                     <p className="text-sm">{message.text}</p>
                     <p
-                      className={`text-xs mt-1 ${
-                        message.type === 'user'
-                          ? 'text-white/70'
-                          : 'text-gray-500 dark:text-gray-400'
-                      }`}
+                      className={`text-xs mt-1 ${message.type === 'user'
+                          ? 'opacity-70'
+                          : 'text-muted-foreground'
+                        }`}
                     >
                       {message.timestamp.toLocaleTimeString([], {
                         hour: '2-digit',
@@ -143,7 +140,7 @@ export default function LiveChatWidget() {
             {/* Input */}
             <form
               onSubmit={handleSendMessage}
-              className="p-4 border-t border-gray-200 dark:border-gray-800"
+              className="p-4 border-t border-border bg-card"
             >
               <div className="flex space-x-2">
                 <input
@@ -151,13 +148,13 @@ export default function LiveChatWidget() {
                   value={inputMessage}
                   onChange={(e) => setInputMessage(e.target.value)}
                   placeholder="Type your message..."
-                  className="flex-1 px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-wso2-orange"
+                  className="flex-1 px-4 py-2 rounded-lg border border-input bg-background/50 text-foreground focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary"
                 />
                 <motion.button
                   whileHover={{ scale: 1.05 }}
                   whileTap={{ scale: 0.95 }}
                   type="submit"
-                  className="p-2 bg-wso2-orange text-white rounded-lg hover:bg-wso2-orange-dark transition-colors"
+                  className="p-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors"
                   aria-label="Send message"
                 >
                   <Send className="h-5 w-5" />
diff --git a/app/components/ui/Navigation.tsx b/app/components/ui/Navigation.tsx
index 3e1b8bf..937c3d5 100644
--- a/app/components/ui/Navigation.tsx
+++ b/app/components/ui/Navigation.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import Link from 'next/link';
-import { motion } from 'framer-motion';
+import { motion, AnimatePresence } from 'framer-motion';
 import {
   Search,
   ShoppingCart,
@@ -11,12 +11,13 @@ import {
   Sun,
   Menu,
   X,
+  Cpu,
 } from 'lucide-react';
 import { useThemeStore } from '@/lib/store/themeStore';
 import { useCartStore } from '@/lib/store/cartStore';
 import { useWishlistStore } from '@/lib/store/wishlistStore';
 import { useUserStore } from '@/lib/store/userStore';
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 
 export default function Navigation() {
   const { theme, toggleTheme } = useThemeStore();
@@ -25,6 +26,15 @@ export default function Navigation() {
   const user = useUserStore((state) => state.user);
   const [searchQuery, setSearchQuery] = useState('');
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+  const [isScrolled, setIsScrolled] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      setIsScrolled(window.scrollY > 20);
+    };
+    window.addEventListener('scroll', handleScroll);
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
 
   const handleSearch = (e: React.FormEvent) => {
     e.preventDefault();
@@ -39,169 +49,168 @@ export default function Navigation() {
     { href: '/pc-builder', label: 'PC Builder' },
     { href: '/builderbot', label: 'BuilderBot' },
     { href: '/deals', label: 'Deals' },
-    { href: '/gallery', label: 'Build Gallery' },
+    { href: '/gallery', label: 'Gallery' },
   ];
 
   return (
-    <nav className="sticky top-0 z-50 bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 shadow-md">
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-        <div className="flex items-center justify-between h-16">
-          {/* Logo */}
-          <Link href="/" className="flex items-center space-x-2">
-            <motion.div
-              whileHover={{ scale: 1.05 }}
-              whileTap={{ scale: 0.95 }}
-              className="text-2xl font-bold"
-            >
-              <span className="text-gray-900 dark:text-white">CS</span>
-              <span className="text-wso2-orange">02</span>
-            </motion.div>
-          </Link>
-
-          {/* Desktop Navigation Links */}
-          <div className="hidden lg:flex items-center space-x-6">
-            {navLinks.map((link) => (
-              <Link
-                key={link.href}
-                href={link.href}
-                className="text-gray-700 dark:text-gray-300 hover:text-wso2-orange dark:hover:text-wso2-orange transition-colors font-medium"
+    <>
+      <nav
+        className={`fixed top-0 left-0 right-0 z-50 transition-all duration-500 ease-in-out ${isScrolled
+          ? 'py-4'
+          : 'py-6'
+          }`}
+      >
+        <div
+          className={`mx-auto px-6 transition-all duration-500 ${isScrolled
+            ? 'max-w-7xl bg-background/70 backdrop-blur-xl border border-white/10 shadow-lg rounded-2xl'
+            : 'max-w-[1440px] bg-background/10 backdrop-blur-md border-b border-white/5'
+            }`}
+        >
+          <div className="flex items-center justify-between h-14 sm:h-16">
+            {/* Logo */}
+            <Link href="/" className="flex items-center space-x-2 group">
+              <motion.div
+                whileHover={{ rotate: 180 }}
+                transition={{ duration: 0.5 }}
+                className="text-primary"
               >
-                {link.label}
-              </Link>
-            ))}
-          </div>
+                <Cpu size={28} strokeWidth={2.5} />
+              </motion.div>
+              <div className="flex flex-col">
+                <span className="text-xl font-heading font-bold tracking-tight leading-none group-hover:text-primary transition-colors">
+                  CS02
+                </span>
+                <span className="text-[0.6rem] font-bold tracking-widest uppercase text-muted-foreground group-hover:text-primary/80 transition-colors">
+                  Systems
+                </span>
+              </div>
+            </Link>
 
-          {/* Search Bar */}
-          <form
-            onSubmit={handleSearch}
-            className="hidden md:flex flex-1 max-w-md mx-8"
-          >
-            <div className="relative w-full">
-              <input
-                type="text"
-                value={searchQuery}
-                onChange={(e) => setSearchQuery(e.target.value)}
-                placeholder="Search products..."
-                className="w-full px-4 py-2 pl-10 rounded-lg border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-wso2-orange"
-              />
-              <Search className="absolute left-3 top-2.5 h-5 w-5 text-gray-400" />
+            {/* Desktop Navigation Links */}
+            <div className="hidden lg:flex items-center space-x-1">
+              {navLinks.map((link) => (
+                <Link
+                  key={link.href}
+                  href={link.href}
+                  className="px-4 py-2 text-sm font-medium text-muted-foreground hover:text-foreground hover:bg-muted/50 rounded-full transition-all duration-200"
+                >
+                  {link.label}
+                </Link>
+              ))}
             </div>
-          </form>
 
-          {/* Right Side Icons */}
-          <div className="flex items-center space-x-4">
-            {/* Theme Toggle */}
-            <motion.button
-              whileHover={{ scale: 1.1 }}
-              whileTap={{ scale: 0.9 }}
-              onClick={toggleTheme}
-              className="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
-              aria-label="Toggle theme"
-            >
-              {theme === 'light' ? (
-                <Moon className="h-5 w-5 text-gray-700 dark:text-gray-300" />
-              ) : (
-                <Sun className="h-5 w-5 text-gray-700 dark:text-gray-300" />
-              )}
-            </motion.button>
+            {/* Search Bar (Desktop) */}
+            <div className="hidden md:flex flex-1 max-w-xs mx-6">
+              <form onSubmit={handleSearch} className="relative w-full group">
+                <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                  <Search className="h-4 w-4 text-muted-foreground group-focus-within:text-primary transition-colors" />
+                </div>
+                <input
+                  type="text"
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                  placeholder="Search..."
+                  className="block w-full pl-10 pr-3 py-1.5 border border-input rounded-full leading-5 bg-secondary/50 text-foreground placeholder-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary focus:bg-background transition-all duration-200 sm:text-sm"
+                />
+              </form>
+            </div>
 
-            {/* Wishlist */}
-            <Link href="/wishlist">
-              <motion.div
-                whileHover={{ scale: 1.1 }}
-                whileTap={{ scale: 0.9 }}
-                className="relative p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
+            {/* Right Side Icons */}
+            <div className="flex items-center space-x-2">
+              {/* Theme Toggle */}
+              <button
+                onClick={toggleTheme}
+                className="p-2 rounded-full text-muted-foreground hover:text-foreground hover:bg-muted transition-all"
+                aria-label="Toggle theme"
               >
-                <Heart className="h-5 w-5 text-gray-700 dark:text-gray-300" />
-                {wishlistItems > 0 && (
-                  <span className="absolute -top-1 -right-1 bg-wso2-orange text-white text-xs rounded-full h-5 w-5 flex items-center justify-center font-bold">
-                    {wishlistItems}
-                  </span>
-                )}
-              </motion.div>
-            </Link>
+                {theme === 'light' ? <Moon size={20} /> : <Sun size={20} />}
+              </button>
 
-            {/* Cart */}
-            <Link href="/cart">
-              <motion.div
-                whileHover={{ scale: 1.1 }}
-                whileTap={{ scale: 0.9 }}
-                className="relative p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
-              >
-                <ShoppingCart className="h-5 w-5 text-gray-700 dark:text-gray-300" />
-                {cartItems > 0 && (
-                  <span className="absolute -top-1 -right-1 bg-wso2-orange text-white text-xs rounded-full h-5 w-5 flex items-center justify-center font-bold">
-                    {cartItems}
-                  </span>
-                )}
-              </motion.div>
-            </Link>
+              {/* Wishlist */}
+              <Link href="/wishlist">
+                <div className="relative p-2 rounded-full text-muted-foreground hover:text-foreground hover:bg-muted transition-all">
+                  <Heart size={20} />
+                  {wishlistItems > 0 && (
+                    <span className="absolute top-0 right-0 inline-flex items-center justify-center px-1.5 py-0.5 text-xs font-bold leading-none text-primary-foreground transform translate-x-1/4 -translate-y-1/4 bg-primary rounded-full">
+                      {wishlistItems}
+                    </span>
+                  )}
+                </div>
+              </Link>
 
-            {/* User Account */}
-            <Link href={user ? '/account' : '/login'}>
-              <motion.div
-                whileHover={{ scale: 1.1 }}
-                whileTap={{ scale: 0.9 }}
-                className="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
-              >
-                <User className="h-5 w-5 text-gray-700 dark:text-gray-300" />
-              </motion.div>
-            </Link>
+              {/* Cart */}
+              <Link href="/cart">
+                <div className="relative p-2 rounded-full text-muted-foreground hover:text-foreground hover:bg-muted transition-all">
+                  <ShoppingCart size={20} />
+                  {cartItems > 0 && (
+                    <span className="absolute top-0 right-0 inline-flex items-center justify-center px-1.5 py-0.5 text-xs font-bold leading-none text-primary-foreground transform translate-x-1/4 -translate-y-1/4 bg-primary rounded-full">
+                      {cartItems}
+                    </span>
+                  )}
+                </div>
+              </Link>
 
-            {/* Mobile Menu Toggle */}
-            <button
-              onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
-              className="lg:hidden p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
-              aria-label="Toggle mobile menu"
-            >
-              {isMobileMenuOpen ? (
-                <X className="h-6 w-6 text-gray-700 dark:text-gray-300" />
-              ) : (
-                <Menu className="h-6 w-6 text-gray-700 dark:text-gray-300" />
-              )}
-            </button>
-          </div>
-        </div>
+              {/* User Account */}
+              <Link href={user ? '/account' : '/login'}>
+                <div className="p-2 rounded-full text-muted-foreground hover:text-foreground hover:bg-muted transition-all">
+                  <User size={20} />
+                </div>
+              </Link>
 
-        {/* Mobile Search */}
-        <div className="md:hidden py-3">
-          <form onSubmit={handleSearch}>
-            <div className="relative">
-              <input
-                type="text"
-                value={searchQuery}
-                onChange={(e) => setSearchQuery(e.target.value)}
-                placeholder="Search products..."
-                className="w-full px-4 py-2 pl-10 rounded-lg border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-wso2-orange"
-              />
-              <Search className="absolute left-3 top-2.5 h-5 w-5 text-gray-400" />
+              {/* Mobile Menu Toggle */}
+              <button
+                onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
+                className="lg:hidden p-2 rounded-full text-muted-foreground hover:text-foreground hover:bg-muted transition-all"
+              >
+                {isMobileMenuOpen ? <X size={24} /> : <Menu size={24} />}
+              </button>
             </div>
-          </form>
+          </div>
         </div>
-      </div>
 
-      {/* Mobile Menu */}
-      {isMobileMenuOpen && (
-        <motion.div
-          initial={{ opacity: 0, y: -20 }}
-          animate={{ opacity: 1, y: 0 }}
-          exit={{ opacity: 0, y: -20 }}
-          className="lg:hidden border-t border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900"
-        >
-          <div className="px-4 py-6 space-y-4">
-            {navLinks.map((link) => (
-              <Link
-                key={link.href}
-                href={link.href}
-                className="block text-gray-700 dark:text-gray-300 hover:text-wso2-orange dark:hover:text-wso2-orange transition-colors font-medium py-2"
-                onClick={() => setIsMobileMenuOpen(false)}
-              >
-                {link.label}
-              </Link>
-            ))}
-          </div>
-        </motion.div>
-      )}
-    </nav>
+        {/* Mobile Menu */}
+        <AnimatePresence>
+          {isMobileMenuOpen && (
+            <motion.div
+              initial={{ opacity: 0, height: 0 }}
+              animate={{ opacity: 1, height: 'auto' }}
+              exit={{ opacity: 0, height: 0 }}
+              className="lg:hidden border-t border-border bg-background/95 backdrop-blur-md overflow-hidden"
+            >
+              <div className="px-4 pt-4 pb-6 space-y-4">
+                {/* Mobile Search */}
+                <form onSubmit={handleSearch} className="relative">
+                  <input
+                    type="text"
+                    value={searchQuery}
+                    onChange={(e) => setSearchQuery(e.target.value)}
+                    placeholder="Search products..."
+                    className="w-full px-4 py-3 rounded-xl border border-input bg-secondary/50 text-foreground focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition-all"
+                  />
+                  <Search className="absolute right-3 top-3.5 h-5 w-5 text-muted-foreground" />
+                </form>
+
+                <div className="space-y-1">
+                  {navLinks.map((link) => (
+                    <Link
+                      key={link.href}
+                      href={link.href}
+                      className="block px-4 py-3 text-base font-medium text-foreground hover:bg-muted rounded-xl transition-colors"
+                      onClick={() => setIsMobileMenuOpen(false)}
+                    >
+                      {link.label}
+                    </Link>
+                  ))}
+                </div>
+              </div>
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </nav>
+      {/* Spacer to prevent content jump when nav becomes fixed/sticky relative to content flow if needed, 
+          but here we use fixed nav so we might need padding on body or main. 
+          The layout has 'pt-16' or similar usually, or we can add a div here. 
+      */}
+    </>
   );
 }
diff --git a/app/components/ui/ProductCard.tsx b/app/components/ui/ProductCard.tsx
index 3e249a5..476f1eb 100644
--- a/app/components/ui/ProductCard.tsx
+++ b/app/components/ui/ProductCard.tsx
@@ -41,115 +41,112 @@ export default function ProductCard({ product, showCompare = false }: ProductCar
 
   return (
     <motion.div
-      whileHover={{ y: -5 }}
-      className="group bg-white dark:bg-gray-800 rounded-xl shadow-md hover:shadow-xl transition-all duration-300 overflow-hidden border border-gray-200 dark:border-gray-700"
+      whileHover={{ y: -8 }}
+      className="group relative bg-card rounded-2xl overflow-hidden transition-all duration-300 hover:shadow-[0_8px_30px_rgb(0,0,0,0.12)] dark:hover:shadow-[0_8px_30px_rgb(255,255,255,0.1)]"
     >
-      <Link href={`/product/${product.id}`}>
-        <div className="relative aspect-square overflow-hidden bg-gray-100 dark:bg-gray-700">
+      <Link href={`/product/${product.id}`} className="block">
+        <div className="relative aspect-square overflow-hidden bg-[#F8F9FA] dark:bg-zinc-900/50">
           <Image
             src={product.imageUrl || '/placeholder-product.png'}
             alt={product.name}
             fill
-            className="object-cover group-hover:scale-110 transition-transform duration-300"
+            className="object-contain p-6 transition-transform duration-500 group-hover:scale-110"
             unoptimized
           />
+
+          {/* Badges */}
+          <div className="absolute top-3 left-3 flex flex-col gap-2">
+            {product.stockLevel > 0 && product.stockLevel < 10 && (
+              <span className="bg-orange-500/90 backdrop-blur-sm text-white px-2.5 py-1 rounded-full text-[10px] font-bold uppercase tracking-wider shadow-sm">
+                Low Stock
+              </span>
+            )}
+            {product.tags?.includes('best-seller') && (
+              <span className="bg-primary/90 backdrop-blur-sm text-white px-2.5 py-1 rounded-full text-[10px] font-bold uppercase tracking-wider shadow-sm">
+                Best Seller
+              </span>
+            )}
+          </div>
+
+          {/* Quick Actions Overlay (Desktop) */}
+          <div className="absolute right-3 top-3 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col gap-2 translate-x-4 group-hover:translate-x-0">
+            <button
+              onClick={handleToggleWishlist}
+              className={`p-2.5 rounded-full shadow-lg backdrop-blur-md transition-all ${isInWishlist
+                ? 'bg-destructive text-white'
+                : 'bg-white/90 text-gray-700 hover:bg-white dark:bg-black/50 dark:text-white'
+                }`}
+              aria-label="Add to wishlist"
+            >
+              <Heart className="h-4 w-4" fill={isInWishlist ? 'currentColor' : 'none'} />
+            </button>
+            {showCompare && (
+              <button
+                onClick={handleToggleCompare}
+                className={`p-2.5 rounded-full shadow-lg backdrop-blur-md transition-all ${isInCompare
+                  ? 'bg-primary text-white'
+                  : 'bg-white/90 text-gray-700 hover:bg-white dark:bg-black/50 dark:text-white'
+                  }`}
+              >
+                {isInCompare ? '✓' : '+'}
+              </button>
+            )}
+          </div>
+
           {product.stockLevel === 0 && (
-            <div className="absolute inset-0 bg-black/60 flex items-center justify-center">
-              <span className="text-white font-bold text-lg">Out of Stock</span>
-            </div>
-          )}
-          {product.stockLevel > 0 && product.stockLevel < 10 && (
-            <div className="absolute top-2 left-2 bg-red-500 text-white px-2 py-1 rounded text-xs font-semibold">
-              Only {product.stockLevel} left!
-            </div>
-          )}
-          {product.tags?.includes('best-seller') && (
-            <div className="absolute top-2 right-2 bg-wso2-orange text-white px-2 py-1 rounded text-xs font-semibold">
-              Best Seller
+            <div className="absolute inset-0 bg-background/60 backdrop-blur-[1px] flex items-center justify-center">
+              <span className="bg-black text-white px-4 py-2 rounded-full font-bold text-sm">Out of Stock</span>
             </div>
           )}
         </div>
 
-        <div className="p-3 sm:p-4">
-          <div className="mb-2">
-            <span className="text-xs text-gray-500 dark:text-gray-400 uppercase">
+        <div className="p-5">
+          <div className="mb-1">
+            <span className="text-[10px] font-bold tracking-widest text-primary uppercase">
               {product.brand}
             </span>
           </div>
-          <h3 className="font-semibold text-sm sm:text-base text-gray-900 dark:text-white mb-2 line-clamp-2 h-10 sm:h-12">
+          <h3 className="font-heading font-semibold text-base text-foreground mb-2 line-clamp-2 leading-snug group-hover:text-primary transition-colors">
             {product.name}
           </h3>
-          
-          {product.rating && (
-            <div className="flex items-center mb-2">
-              <div className="flex text-yellow-400 text-sm sm:text-base">
-                {'★'.repeat(Math.floor(product.rating))}
-                {'☆'.repeat(5 - Math.floor(product.rating))}
-              </div>
-              <span className="text-xs text-gray-500 dark:text-gray-400 ml-2">
-                ({product.reviewCount})
+
+          <div className="flex items-end justify-between mt-4">
+            <div className="flex flex-col">
+              <span className="text-xs text-muted-foreground mb-0.5">Price</span>
+              <span className="text-lg font-bold text-foreground">
+                LKR {product.price.toLocaleString()}
               </span>
             </div>
-          )}
 
-          <div className="flex items-center justify-between mb-3 sm:mb-4">
-            <span className="text-xl sm:text-2xl font-bold text-wso2-orange">
-              LKR {product.price.toLocaleString()}
-            </span>
+            {/* Small rating if available */}
+            {(product.rating ?? 0) > 0 && (
+              <div className="flex items-center gap-1 text-xs font-medium bg-secondary/50 px-2 py-1 rounded-md">
+                <span className="text-orange-400">★</span> {product.rating}
+              </div>
+            )}
           </div>
         </div>
       </Link>
 
-      <div className="px-3 sm:px-4 pb-3 sm:pb-4 flex gap-2">
+      {/* Add to Cart Button */}
+      <div className="px-5 pb-5 pt-0">
         {product.stockLevel > 0 ? (
           <motion.button
-            whileHover={{ scale: 1.02 }}
             whileTap={{ scale: 0.98 }}
             onClick={handleAddToCart}
-            className="flex-1 bg-wso2-orange text-white py-2 rounded-lg font-semibold hover:bg-wso2-orange-dark transition-colors flex items-center justify-center gap-1 sm:gap-2 text-sm sm:text-base"
+            className="w-full bg-foreground text-background dark:bg-primary dark:text-primary-foreground py-2.5 rounded-xl font-bold text-sm hover:opacity-90 transition-opacity flex items-center justify-center gap-2"
           >
             <ShoppingCart className="h-4 w-4" />
-            <span className="hidden sm:inline">Add to Cart</span>
-            <span className="sm:hidden">Add</span>
+            Add to Cart
           </motion.button>
         ) : (
           <button
             disabled
-            className="flex-1 bg-gray-300 dark:bg-gray-700 text-gray-500 dark:text-gray-400 py-2 rounded-lg font-semibold cursor-not-allowed text-sm sm:text-base"
+            className="w-full bg-muted text-muted-foreground py-2.5 rounded-xl font-bold text-sm cursor-not-allowed border border-border"
           >
-            <span className="hidden sm:inline">Out of Stock</span>
-            <span className="sm:hidden">Sold Out</span>
+            Sold Out
           </button>
         )}
-        
-        <motion.button
-          whileHover={{ scale: 1.1 }}
-          whileTap={{ scale: 0.9 }}
-          onClick={handleToggleWishlist}
-          className={`p-2 rounded-lg transition-colors ${
-            isInWishlist
-              ? 'bg-red-500 text-white'
-              : 'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300'
-          }`}
-          aria-label="Add to wishlist"
-        >
-          <Heart className="h-5 w-5" fill={isInWishlist ? 'currentColor' : 'none'} />
-        </motion.button>
-        
-        {showCompare && (
-          <motion.button
-            whileHover={{ scale: 1.1 }}
-            whileTap={{ scale: 0.9 }}
-            onClick={handleToggleCompare}
-            className={`p-2 rounded-lg transition-colors text-xs font-semibold ${
-              isInCompare
-                ? 'bg-wso2-orange text-white'
-                : 'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300'
-            }`}
-          >
-            {isInCompare ? '✓' : '+'}
-          </motion.button>
-        )}
       </div>
     </motion.div>
   );
diff --git a/app/deals/page.tsx b/app/deals/page.tsx
index 8d3779f..02ce678 100644
--- a/app/deals/page.tsx
+++ b/app/deals/page.tsx
@@ -17,19 +17,19 @@ export default function DealsPage() {
   }, [fetchDeals, fetchBundles]);
 
   return (
-    <div className="min-h-screen bg-linear-to-b from-white to-gray-50 dark:from-gray-900 dark:to-black py-24">
+    <div className="min-h-screen bg-background py-24">
       <div className="container mx-auto px-4">
-        
+
         {/* Header */}
         <motion.div
           initial={{ opacity: 0, y: -20 }}
           animate={{ opacity: 1, y: 0 }}
           className="text-center mb-12"
         >
-          <h1 className="text-5xl font-bold mb-4 bg-linear-to-r from-orange-600 to-orange-500 bg-clip-text text-transparent">
+          <h1 className="text-5xl font-bold font-heading mb-4 bg-gradient-to-r from-primary to-orange-500 bg-clip-text text-transparent">
             Deals & Promotions
           </h1>
-          <p className="text-xl text-gray-600 dark:text-gray-400">
+          <p className="text-xl text-muted-foreground">
             Save big on top components and bundles
           </p>
         </motion.div>
@@ -41,11 +41,11 @@ export default function DealsPage() {
           className="mb-12"
         >
           <div className="flex items-center justify-between mb-6">
-            <h2 className="text-3xl font-bold text-gray-900 dark:text-white flex items-center gap-3">
-              <Tag className="w-8 h-8 text-orange-500" />
+            <h2 className="text-3xl font-bold font-heading text-foreground flex items-center gap-3">
+              <Tag className="w-8 h-8 text-primary" />
               Flash Deals
             </h2>
-            <div className="flex items-center gap-2 text-orange-600 dark:text-orange-500 font-semibold">
+            <div className="flex items-center gap-2 text-primary font-semibold">
               <Clock className="w-5 h-5" />
               <span>Limited Time Only</span>
             </div>
@@ -58,9 +58,9 @@ export default function DealsPage() {
                 initial={{ opacity: 0, scale: 0.95 }}
                 animate={{ opacity: 1, scale: 1 }}
                 whileHover={{ y: -5 }}
-                className="bg-white dark:bg-gray-800 rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700 p-6 relative overflow-hidden"
+                className="bg-card text-card-foreground rounded-2xl shadow-lg border border-border p-6 relative overflow-hidden"
               >
-                <div className="absolute top-4 right-4 bg-red-500 text-white px-3 py-1 rounded-full text-sm font-bold">
+                <div className="absolute top-4 right-4 bg-destructive text-destructive-foreground px-3 py-1 rounded-full text-sm font-bold">
                   -{deal.discountPercentage}%
                 </div>
 
@@ -72,25 +72,25 @@ export default function DealsPage() {
                   className="w-full h-48 object-cover rounded-lg mb-4"
                 />
 
-                <span className="text-xs bg-orange-100 dark:bg-orange-900/30 text-orange-600 dark:text-orange-500 px-2 py-1 rounded-full font-semibold">
+                <span className="text-xs bg-primary/10 text-primary px-2 py-1 rounded-full font-semibold">
                   {deal.category}
                 </span>
 
-                <h3 className="text-lg font-bold text-gray-900 dark:text-white mt-3 mb-2">
+                <h3 className="text-lg font-bold text-card-foreground mt-3 mb-2">
                   {deal.name}
                 </h3>
 
                 <div className="flex items-center gap-2 mb-3">
-                  <span className="text-2xl font-bold text-orange-600 dark:text-orange-500">
+                  <span className="text-2xl font-bold text-primary">
                     ${deal.salePrice}
                   </span>
-                  <span className="text-sm text-gray-500 dark:text-gray-400 line-through">
+                  <span className="text-sm text-muted-foreground line-through">
                     ${deal.price}
                   </span>
                 </div>
 
                 <div className="flex items-center justify-between text-sm mb-4">
-                  <span className="text-gray-600 dark:text-gray-400">
+                  <span className="text-muted-foreground">
                     Ends in {deal.saleEndDate ? new Date(deal.saleEndDate).toLocaleDateString() : 'Soon'}
                   </span>
                   <span className="text-green-600 dark:text-green-500 font-semibold">
@@ -100,7 +100,7 @@ export default function DealsPage() {
 
                 <Link
                   href={`/product/${deal.id}`}
-                  className="block w-full py-3 bg-linear-to-r from-orange-600 to-orange-500 text-white rounded-lg font-semibold hover:shadow-lg transition text-center"
+                  className="block w-full py-3 bg-primary text-primary-foreground rounded-lg font-semibold hover:bg-primary/90 hover:shadow-lg transition text-center"
                 >
                   View Deal
                 </Link>
@@ -115,8 +115,8 @@ export default function DealsPage() {
           animate={{ opacity: 1, y: 0 }}
           transition={{ delay: 0.2 }}
         >
-          <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-6 flex items-center gap-3">
-            <Package className="w-8 h-8 text-orange-500" />
+          <h2 className="text-3xl font-bold font-heading text-foreground mb-6 flex items-center gap-3">
+            <Package className="w-8 h-8 text-primary" />
             Bundle Deals
           </h2>
 
@@ -127,31 +127,31 @@ export default function DealsPage() {
                 initial={{ opacity: 0, x: -20 }}
                 animate={{ opacity: 1, x: 0 }}
                 whileHover={{ scale: 1.02 }}
-                className="bg-linear-to-br from-orange-50 to-orange-100 dark:from-orange-900/20 dark:to-gray-800 rounded-2xl shadow-lg border-2 border-orange-200 dark:border-orange-800 p-8"
+                className="bg-card text-card-foreground rounded-2xl shadow-lg border-2 border-primary/20 p-8"
               >
                 <div className="flex items-start justify-between mb-4">
                   <div>
-                    <h3 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">
+                    <h3 className="text-2xl font-bold text-card-foreground mb-2">
                       {bundle.name}
                     </h3>
-                    <p className="text-gray-700 dark:text-gray-300">{bundle.description}</p>
+                    <p className="text-muted-foreground">{bundle.description}</p>
                   </div>
-                  <div className="bg-orange-500 text-white px-4 py-2 rounded-full font-bold">
+                  <div className="bg-primary text-primary-foreground px-4 py-2 rounded-full font-bold">
                     {bundle.items} Items
                   </div>
                 </div>
 
                 <div className="flex items-center gap-4 mb-6">
                   <div>
-                    <p className="text-sm text-gray-600 dark:text-gray-400">Individual Price</p>
-                    <p className="text-xl text-gray-500 dark:text-gray-400 line-through">
+                    <p className="text-sm text-muted-foreground">Individual Price</p>
+                    <p className="text-xl text-muted-foreground line-through">
                       ${bundle.originalPrice}
                     </p>
                   </div>
-                  <div className="text-4xl text-orange-500">→</div>
+                  <div className="text-4xl text-primary">→</div>
                   <div>
-                    <p className="text-sm text-gray-600 dark:text-gray-400">Bundle Price</p>
-                    <p className="text-3xl font-bold text-orange-600 dark:text-orange-500">
+                    <p className="text-sm text-muted-foreground">Bundle Price</p>
+                    <p className="text-3xl font-bold text-primary">
                       ${bundle.bundlePrice}
                     </p>
                   </div>
@@ -164,7 +164,7 @@ export default function DealsPage() {
                   </p>
                 </div>
 
-                <button className="w-full py-3 bg-linear-to-r from-orange-600 to-orange-500 text-white rounded-lg font-semibold hover:shadow-lg transition">
+                <button className="w-full py-3 bg-primary text-primary-foreground rounded-lg font-semibold hover:bg-primary/90 hover:shadow-lg transition">
                   Add Bundle to Cart
                 </button>
               </motion.div>
diff --git a/app/globals.css b/app/globals.css
index 6e4f7d7..b431259 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -3,37 +3,120 @@
 @theme {
   --color-wso2-orange: #FF7300;
   --color-wso2-orange-dark: #E66800;
+
+  --color-background: hsl(var(--background));
+  --color-foreground: hsl(var(--foreground));
+
+  --color-card: hsl(var(--card));
+  --color-card-foreground: hsl(var(--card-foreground));
+
+  --color-popover: hsl(var(--popover));
+  --color-popover-foreground: hsl(var(--popover-foreground));
+
+  --color-primary: hsl(var(--primary));
+  --color-primary-foreground: hsl(var(--primary-foreground));
+
+  --color-secondary: hsl(var(--secondary));
+  --color-secondary-foreground: hsl(var(--secondary-foreground));
+
+  --color-muted: hsl(var(--muted));
+  --color-muted-foreground: hsl(var(--muted-foreground));
+
+  --color-accent: hsl(var(--accent));
+  --color-accent-foreground: hsl(var(--accent-foreground));
+
+  --color-destructive: hsl(var(--destructive));
+  --color-destructive-foreground: hsl(var(--destructive-foreground));
+
+  --color-border: hsl(var(--border));
+  --color-input: hsl(var(--input));
+  --color-ring: hsl(var(--ring));
+
+  --radius-lg: var(--radius);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-sm: calc(var(--radius) - 4px);
+
+  --font-heading: var(--font-outfit), sans-serif;
+  --font-body: var(--font-inter), sans-serif;
 }
 
 @layer base {
   :root {
-    --background: #ffffff;
-    --foreground: #1f2937;
-    --panel: #f3f4f6;
-  }
+    --background: 0 0% 100%;
+    --foreground: 240 10% 3.9%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 240 10% 3.9%;
+
+    --popover: 0 0% 100%;
+    --popover-foreground: 240 10% 3.9%;
+
+    --primary: 27 100% 50%;
+    --primary-foreground: 0 0% 98%;
+
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
 
-  @media (prefers-color-scheme: dark) {
-    :root {
-      --background: #111827;
-      --foreground: #d1d5db;
-      --panel: #1f2937;
-    }
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
+
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+    --ring: 240 5.9% 10%;
+
+    --radius: 0.5rem;
   }
 
   .dark {
-    --background: #111827;
-    --foreground: #d1d5db;
-    --panel: #1f2937;
+    --background: 240 10% 3.9%;
+    --foreground: 0 0% 98%;
+
+    --card: 240 10% 3.9%;
+    --card-foreground: 0 0% 98%;
+
+    --popover: 240 10% 3.9%;
+    --popover-foreground: 0 0% 98%;
+
+    --primary: 27 100% 50%;
+    --primary-foreground: 0 0% 98%;
+
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+
+    --muted: 240 3.7% 15.9%;
+    --muted-foreground: 240 5% 64.9%;
+
+    --accent: 240 3.7% 15.9%;
+    --accent-foreground: 0 0% 98%;
+
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 240 4.9% 83.9%;
   }
 }
 
 @layer base {
   body {
-    background-color: var(--background);
-    color: var(--foreground);
-    font-family: 'Inter', sans-serif;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
+    @apply bg-background text-foreground font-body antialiased;
+    font-feature-settings: "rlig" 1, "calt" 1;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    @apply font-heading tracking-tight;
   }
 
   html {
@@ -42,22 +125,17 @@
 
   /* Custom scrollbar */
   ::-webkit-scrollbar {
-    width: 10px;
-    height: 10px;
+    width: 8px;
+    height: 8px;
   }
 
   ::-webkit-scrollbar-track {
-    background: var(--panel);
+    @apply bg-transparent;
   }
 
   ::-webkit-scrollbar-thumb {
-    background: #FF7300; /* wso2-orange */
-    border-radius: 5px;
-  }
-
-  ::-webkit-scrollbar-thumb:hover {
-    background: #E66800; /* wso2-orange-dark */
+    @apply bg-muted-foreground/30 rounded-full hover:bg-muted-foreground/50 transition-colors;
   }
 }
 
-@variant dark (&:where(.dark, .dark *));
+@variant dark (&:where(.dark, .dark *));
\ No newline at end of file
diff --git a/app/layout.tsx b/app/layout.tsx
index 7093d4f..9230011 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,10 +1,23 @@
 import type { Metadata } from "next";
+import { Inter, Outfit } from 'next/font/google';
 import "./globals.css";
 import Navigation from "./components/ui/Navigation";
 import Footer from "./components/ui/Footer";
 import LiveChatWidget from "./components/ui/LiveChatWidget";
 import ThemeProvider from "./components/providers/ThemeProvider";
 
+const inter = Inter({
+  subsets: ["latin"],
+  variable: "--font-inter",
+  display: 'swap',
+});
+
+const outfit = Outfit({
+  subsets: ["latin"],
+  variable: "--font-outfit",
+  display: 'swap',
+});
+
 export const metadata: Metadata = {
   title: "CS02 - Build Your Dream PC",
   description: "Premium computer components and custom PC builds. Build your dream. Forge your power.",
@@ -16,13 +29,9 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en" suppressHydrationWarning>
+    <html lang="en" suppressHydrationWarning className={`${inter.variable} ${outfit.variable}`}>
       <head>
         <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" />
-        <link rel="preconnect" href="https://fonts.googleapis.com" />
-        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
-        {/* eslint-disable-next-line @next/next/no-page-custom-font */}
-        <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet" />
         <script
           dangerouslySetInnerHTML={{
             __html: `
@@ -45,10 +54,10 @@ export default function RootLayout({
           }}
         />
       </head>
-      <body className="antialiased">
+      <body className="antialiased min-h-screen flex flex-col bg-background text-foreground selection:bg-primary/20">
         <ThemeProvider>
           <Navigation />
-          <main className="min-h-screen w-full">
+          <main className="flex-1 w-full pt-28">
             {children}
           </main>
           <Footer />
diff --git a/app/login/page.tsx b/app/login/page.tsx
index c500dc1..398f4f5 100644
--- a/app/login/page.tsx
+++ b/app/login/page.tsx
@@ -63,7 +63,7 @@ export default function LoginPage() {
         email: formData.email,
         password: formData.password,
       });
-      
+
       // Check role for redirection
       const user = useUserStore.getState().user;
       if (user?.role === 'ADMIN') {
@@ -83,7 +83,7 @@ export default function LoginPage() {
   };
 
   return (
-    <div className="min-h-screen bg-linear-to-br from-gray-50 via-white to-gray-100 dark:from-gray-950 dark:via-gray-900 dark:to-black py-10">
+    <div className="min-h-screen bg-background py-10">
       <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
         <div className="grid lg:grid-cols-2 gap-10 lg:gap-16 items-center">
           {/* Intro Section */}
@@ -93,14 +93,14 @@ export default function LoginPage() {
             transition={{ duration: 0.6 }}
             className="order-2 lg:order-1"
           >
-            <div className="inline-flex items-center gap-2 bg-wso2-orange/10 text-wso2-orange px-3 py-1 rounded-full text-sm font-semibold mb-6">
+            <div className="inline-flex items-center gap-2 bg-primary/10 text-primary px-3 py-1 rounded-full text-sm font-semibold mb-6">
               <ShieldCheck className="h-4 w-4" />
               Secure sign-in
             </div>
-            <h1 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white mb-4">
-              Welcome back to <span className="text-wso2-orange">CS02</span>
+            <h1 className="text-3xl sm:text-4xl lg:text-5xl font-bold font-heading text-foreground mb-4">
+              Welcome back to <span className="text-primary">CS02</span>
             </h1>
-            <p className="text-base sm:text-lg text-gray-600 dark:text-gray-400 leading-relaxed mb-8">
+            <p className="text-base sm:text-lg text-muted-foreground leading-relaxed mb-8">
               Sign in to manage your custom PC builds, review past orders, and earn LKR rewards on every purchase. Your dashboard keeps everything organized for an effortless experience in Sri Lanka.
             </p>
 
@@ -109,17 +109,17 @@ export default function LoginPage() {
               initial={{ opacity: 0, y: 10 }}
               animate={{ opacity: 1, y: 0 }}
               transition={{ duration: 0.4 }}
-              className="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl p-6 shadow-lg"
+              className="bg-card border border-border rounded-2xl p-6 shadow-lg text-card-foreground"
             >
-              <h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
+              <h2 className="text-lg font-semibold text-foreground mb-2">
                 Why log in?
               </h2>
-              <p className="text-sm sm:text-base text-gray-600 dark:text-gray-400 mb-4">
+              <p className="text-sm sm:text-base text-muted-foreground mb-4">
                 {tips[tipIndex]}
               </p>
               <button
                 onClick={handleNextTip}
-                className="text-sm font-semibold text-wso2-orange hover:text-wso2-orange-dark transition-colors"
+                className="text-sm font-semibold text-primary hover:text-primary/80 transition-colors"
               >
                 Show another benefit →
               </button>
@@ -127,25 +127,25 @@ export default function LoginPage() {
 
             <div className="mt-8 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
               <div className="flex items-center gap-3">
-                <div className="h-12 w-12 rounded-full bg-wso2-orange/10 flex items-center justify-center text-wso2-orange">
+                <div className="h-12 w-12 rounded-full bg-primary/10 flex items-center justify-center text-primary">
                   <Smartphone className="h-5 w-5" />
                 </div>
                 <div>
-                  <p className="text-sm text-gray-500 dark:text-gray-400 font-medium">Need help signing in?</p>
+                  <p className="text-sm text-muted-foreground font-medium">Need help signing in?</p>
                   <Link
                     href="/contact"
-                    className="text-sm font-semibold text-wso2-orange hover:text-wso2-orange-dark"
+                    className="text-sm font-semibold text-primary hover:text-primary/80"
                   >
                     Contact Colombo support →
                   </Link>
                 </div>
               </div>
 
-              <div className="text-sm text-gray-500 dark:text-gray-400">
+              <div className="text-sm text-muted-foreground">
                 New to CS02?
                 <Link
                   href="/signup"
-                  className="ml-2 font-semibold text-wso2-orange hover:text-wso2-orange-dark"
+                  className="ml-2 font-semibold text-primary hover:text-primary/80"
                 >
                   Create an account
                 </Link>
@@ -160,14 +160,14 @@ export default function LoginPage() {
             transition={{ duration: 0.6 }}
             className="order-1 lg:order-2"
           >
-            <div className="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-3xl shadow-2xl p-6 sm:p-8 lg:p-10">
+            <div className="bg-card border border-border rounded-3xl shadow-2xl p-6 sm:p-8 lg:p-10 text-card-foreground">
               <form onSubmit={handleSubmit} className="space-y-6">
                 <div>
-                  <label htmlFor="email" className="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
+                  <label htmlFor="email" className="block text-sm font-semibold text-foreground mb-2">
                     Email address
                   </label>
                   <div className="relative">
-                    <Mail className="h-5 w-5 text-gray-400 absolute left-3 top-1/2 -translate-y-1/2" />
+                    <Mail className="h-5 w-5 text-muted-foreground absolute left-3 top-1/2 -translate-y-1/2" />
                     <input
                       id="email"
                       name="email"
@@ -176,17 +176,17 @@ export default function LoginPage() {
                       value={formData.email}
                       onChange={handleChange}
                       placeholder="you@example.com"
-                      className="w-full pl-10 pr-4 py-3 rounded-xl border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-wso2-orange transition"
+                      className="w-full pl-10 pr-4 py-3 rounded-xl border border-input bg-background/50 text-foreground focus:outline-none focus:ring-2 focus:ring-primary transition"
                     />
                   </div>
                 </div>
 
                 <div>
-                  <label htmlFor="password" className="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
+                  <label htmlFor="password" className="block text-sm font-semibold text-foreground mb-2">
                     Password
                   </label>
                   <div className="relative">
-                    <Lock className="h-5 w-5 text-gray-400 absolute left-3 top-1/2 -translate-y-1/2" />
+                    <Lock className="h-5 w-5 text-muted-foreground absolute left-3 top-1/2 -translate-y-1/2" />
                     <input
                       id="password"
                       name="password"
@@ -195,29 +195,29 @@ export default function LoginPage() {
                       value={formData.password}
                       onChange={handleChange}
                       placeholder="Enter your password"
-                      className="w-full pl-10 pr-4 py-3 rounded-xl border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-wso2-orange transition"
+                      className="w-full pl-10 pr-4 py-3 rounded-xl border border-input bg-background/50 text-foreground focus:outline-none focus:ring-2 focus:ring-primary transition"
                     />
                   </div>
                 </div>
 
                 <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
-                  <label className="flex items-center text-sm text-gray-600 dark:text-gray-400">
+                  <label className="flex items-center text-sm text-muted-foreground">
                     <input
                       type="checkbox"
                       name="remember"
                       checked={formData.remember}
                       onChange={handleChange}
-                      className="mr-2 accent-wso2-orange"
+                      className="mr-2 accent-primary"
                     />
                     Remember me on this device
                   </label>
-                  <Link href="/support" className="text-sm font-semibold text-wso2-orange hover:text-wso2-orange-dark">
+                  <Link href="/support" className="text-sm font-semibold text-primary hover:text-primary/80">
                     Forgot password?
                   </Link>
                 </div>
 
                 {error && (
-                  <div className="bg-red-50 dark:bg-red-900/30 text-red-600 dark:text-red-300 text-sm rounded-xl p-3">
+                  <div className="bg-destructive/10 text-destructive text-sm rounded-xl p-3">
                     {error}
                   </div>
                 )}
@@ -227,7 +227,7 @@ export default function LoginPage() {
                   whileTap={{ scale: 0.98 }}
                   type="submit"
                   disabled={loading}
-                  className="w-full flex items-center justify-center gap-2 bg-wso2-orange text-white py-3.5 rounded-xl font-semibold shadow-lg hover:bg-wso2-orange-dark transition disabled:opacity-70"
+                  className="w-full flex items-center justify-center gap-2 bg-primary text-primary-foreground py-3.5 rounded-xl font-semibold shadow-lg hover:bg-primary/90 transition disabled:opacity-70"
                 >
                   {loading ? (
                     <>
@@ -244,7 +244,7 @@ export default function LoginPage() {
 
                 {/* Demo Logins - credentials synced with backend DataSeeder */}
                 <div className="space-y-2">
-                  <p className="text-sm text-gray-500 dark:text-gray-400 text-center font-medium">Or try demo accounts:</p>
+                  <p className="text-sm text-muted-foreground text-center font-medium">Or try demo accounts:</p>
                   <div className="grid grid-cols-2 gap-2">
                     <button
                       type="button"
@@ -269,16 +269,16 @@ export default function LoginPage() {
               </form>
 
               <div className="mt-8 grid gap-4">
-                <div className="flex items-center gap-3 text-sm text-gray-500 dark:text-gray-400">
-                  <span className="h-px flex-1 bg-gray-200 dark:bg-gray-800" />
+                <div className="flex items-center gap-3 text-sm text-muted-foreground">
+                  <span className="h-px flex-1 bg-border" />
                   Or sign in with
-                  <span className="h-px flex-1 bg-gray-200 dark:bg-gray-800" />
+                  <span className="h-px flex-1 bg-border" />
                 </div>
                 <div className="grid grid-cols-2 gap-3">
                   {['Google', 'Microsoft'].map((provider) => (
                     <button
                       key={provider}
-                      className="border border-gray-300 dark:border-gray-700 rounded-xl py-2 text-sm font-semibold text-gray-700 dark:text-gray-300 hover:border-wso2-orange hover:text-wso2-orange transition"
+                      className="border border-input rounded-xl py-2 text-sm font-semibold text-foreground hover:border-primary hover:text-primary transition"
                       type="button"
                     >
                       {provider}
diff --git a/app/page.tsx b/app/page.tsx
index 738ea9e..8620ab7 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -2,46 +2,60 @@ import HeroSection from './components/home/HeroSection';
 import CategoriesSection from './components/home/CategoriesSection';
 import FeaturedProductsSection from './components/home/FeaturedProductsSection';
 
+
 export default function Home() {
   return (
     <div>
       <HeroSection />
       <CategoriesSection />
       <FeaturedProductsSection />
-      
+
       {/* Additional sections can be added here */}
-      <section className="py-12 sm:py-16 md:py-20 bg-white dark:bg-gray-900">
+      <section className="py-12 sm:py-16 md:py-20 bg-background">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
-          <h2 className="text-2xl sm:text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-4 sm:mb-6">
+          <h2 className="text-2xl sm:text-3xl md:text-4xl font-heading font-bold text-foreground mb-4 sm:mb-6">
             Why Choose CS02?
           </h2>
-          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 sm:gap-8 mt-8 sm:mt-10 md:mt-12">
-            <div className="p-4 sm:p-6">
-              <div className="text-4xl sm:text-5xl mb-3 sm:mb-4">🚀</div>
-              <h3 className="text-lg sm:text-xl font-bold text-gray-900 dark:text-white mb-2 sm:mb-3">
-                Expert Guidance
-              </h3>
-              <p className="text-sm sm:text-base text-gray-600 dark:text-gray-400">
-                Our BuilderBot and experts help you choose the perfect components for your needs
-              </p>
-            </div>
-            <div className="p-4 sm:p-6">
-              <div className="text-4xl sm:text-5xl mb-3 sm:mb-4">⚡</div>
-              <h3 className="text-lg sm:text-xl font-bold text-gray-900 dark:text-white mb-2 sm:mb-3">
-                Premium Quality
-              </h3>
-              <p className="text-sm sm:text-base text-gray-600 dark:text-gray-400">
-                Only the best components from trusted brands with full warranties
-              </p>
+          <div className="grid grid-cols-1 lg:grid-cols-12 gap-6 mt-16">
+            {/* Feature 1 (Large) */}
+            <div className="lg:col-span-8 group relative overflow-hidden rounded-3xl bg-gradient-to-br from-card to-secondary/10 border border-primary/10 hover:border-primary/50 transition-all duration-500">
+              <div className="absolute inset-0 bg-primary/5 opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
+              <div className="relative p-8 h-full flex flex-col justify-between">
+                <div className="flex items-start justify-end">
+                  <div className="text-9xl font-bold text-foreground/5 font-heading absolute -right-4 -bottom-8 select-none z-0">
+                    01
+                  </div>
+                </div>
+                <div className="mt-8 z-10">
+                  <h3 className="text-3xl font-bold text-foreground mb-4 group-hover:text-primary transition-colors">Expert Guidance</h3>
+                  <p className="text-muted-foreground text-lg leading-relaxed max-w-xl">
+                    Our AI-powered BuilderBot and team of expert technicians work together to ensure you choose the absolute perfect components for your specific needs and budget. No bottlenecks, just performance.
+                  </p>
+                </div>
+              </div>
             </div>
-            <div className="p-4 sm:p-6">
-              <div className="text-4xl sm:text-5xl mb-3 sm:mb-4">💯</div>
-              <h3 className="text-lg sm:text-xl font-bold text-gray-900 dark:text-white mb-2 sm:mb-3">
-                Full Support
-              </h3>
-              <p className="text-sm sm:text-base text-gray-600 dark:text-gray-400">
-                24/7 customer support and lifetime technical assistance on all builds
-              </p>
+
+            {/* Feature 2 & 3 (Stacked Column) */}
+            <div className="lg:col-span-4 flex flex-col gap-6">
+              <div className="flex-1 group relative overflow-hidden rounded-3xl bg-gradient-to-br from-card to-secondary/10 border border-primary/10 hover:border-primary/50 transition-all duration-500 p-8">
+                <div className="absolute inset-0 bg-primary/5 opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
+                <div className="mb-4">
+                  <h3 className="text-2xl font-bold text-foreground group-hover:text-primary transition-colors mb-2">Premium Quality</h3>
+                </div>
+                <p className="text-muted-foreground">
+                  We verify every component. Only the most reliable hardware from trusted brands makes it into our inventory.
+                </p>
+              </div>
+
+              <div className="flex-1 group relative overflow-hidden rounded-3xl bg-gradient-to-br from-card to-secondary/10 border border-primary/10 hover:border-primary/50 transition-all duration-500 p-8">
+                <div className="absolute inset-0 bg-primary/5 opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
+                <div className="mb-4">
+                  <h3 className="text-2xl font-bold text-foreground group-hover:text-primary transition-colors mb-2">Full Support</h3>
+                </div>
+                <p className="text-muted-foreground">
+                  24/7 priority customer support and comprehensive lifetime technical assistance for your build.
+                </p>
+              </div>
             </div>
           </div>
         </div>
diff --git a/app/pc-builder/page.tsx b/app/pc-builder/page.tsx
index 0c9d45d..1ab95ba 100644
--- a/app/pc-builder/page.tsx
+++ b/app/pc-builder/page.tsx
@@ -47,7 +47,7 @@ export default function PCBuilderPage() {
   const { products, addSavedBuild } = useProductStore();
   const { addItem } = useCartStore();
   const { user } = useUserStore();
-  
+
   const [build, setBuild] = useState<BuildComponent[]>(
     steps.map(s => ({ type: s.type, product: null }))
   );
@@ -55,8 +55,6 @@ export default function PCBuilderPage() {
   const [showModal, setShowModal] = useState(false);
   const [compatibilityIssues, setCompatibilityIssues] = useState<string[]>([]);
 
-  // ... (getAvailableProducts, selectComponent, checkCompatibility, calculateTotalWattage, getTotalPrice remain same)
-
   const addBuildToCart = () => {
     build.forEach(comp => {
       if (comp.product) {
@@ -71,23 +69,20 @@ export default function PCBuilderPage() {
       alert('Please login to save your build');
       return;
     }
-    
+
     const buildName = `My Custom PC - ${new Date().toLocaleDateString()}`;
-    
-    // Construct the build object matching the backend expectation
-    // Note: The backend expects a map for components, but frontend uses array.
-    // We need to adapt it.
+
     const componentsMap: any = {};
     build.forEach(comp => {
-        if (comp.product) {
-            componentsMap[comp.type] = {
-                productId: comp.product.id,
-                name: comp.product.name,
-                price: comp.product.price,
-                imageUrl: comp.product.imageUrl,
-                brand: comp.product.brand
-            };
-        }
+      if (comp.product) {
+        componentsMap[comp.type] = {
+          productId: comp.product.id,
+          name: comp.product.name,
+          price: comp.product.price,
+          imageUrl: comp.product.imageUrl,
+          brand: comp.product.brand
+        };
+      }
     });
 
     const savedBuild = {
@@ -106,29 +101,28 @@ export default function PCBuilderPage() {
     }
   };
 
-  // Get available products for current step
   const getAvailableProducts = (type: ComponentType): Product[] => {
     let available = products.filter(p => p.category === 'Components' && p.subcategory === type);
-    
+
     // Apply compatibility filters
     const cpu = build.find(b => b.type === 'CPU')?.product;
     const motherboard = build.find(b => b.type === 'Motherboard')?.product;
-    
+
     if (type === 'Motherboard' && cpu) {
       const cpuSocket = cpu.specs.socketType as string;
       available = available.filter(p => p.specs.socketType === cpuSocket);
     }
-    
+
     if (type === 'CPU' && motherboard) {
       const mbSocket = motherboard.specs.socketType as string;
       available = available.filter(p => p.specs.socketType === mbSocket);
     }
-    
+
     if (type === 'RAM' && motherboard) {
       const mbRamType = motherboard.specs.memoryType as string;
       available = available.filter(p => p.specs.type === mbRamType);
     }
-    
+
     return available.filter(p => p.stockLevel > 0);
   };
 
@@ -138,8 +132,7 @@ export default function PCBuilderPage() {
     setBuild(newBuild);
     setShowModal(false);
     checkCompatibility(newBuild);
-    
-    // Auto-advance to next step
+
     if (currentStep < steps.length - 1) {
       setCurrentStep(currentStep + 1);
     }
@@ -151,15 +144,13 @@ export default function PCBuilderPage() {
     const motherboard = currentBuild.find(b => b.type === 'Motherboard')?.product;
     const psu = currentBuild.find(b => b.type === 'PSU')?.product;
     const caseItem = currentBuild.find(b => b.type === 'Case')?.product;
-    
-    // Check CPU-Motherboard compatibility
+
     if (cpu && motherboard) {
       if (cpu.specs.socketType !== motherboard.specs.socketType) {
-        issues.push(`CPU socket (${cpu.specs.socketType}) doesn&apos;t match Motherboard socket (${motherboard.specs.socketType})`);
+        issues.push(`CPU socket (${cpu.specs.socketType}) doesn't match Motherboard socket (${motherboard.specs.socketType})`);
       }
     }
-    
-    // Check power requirements
+
     if (psu) {
       const totalWattage = calculateTotalWattage(currentBuild);
       const psuWattage = Number(psu.specs.wattage) || 0;
@@ -167,8 +158,7 @@ export default function PCBuilderPage() {
         issues.push(`PSU ${psuWattage}W insufficient. System requires ~${totalWattage}W (recommended: ${Math.ceil(totalWattage * 1.2)}W)`);
       }
     }
-    
-    // Check case form factor
+
     if (motherboard && caseItem) {
       const mbFormFactor = motherboard.specs.formFactor as string;
       const caseFormFactors = caseItem.specs.formFactor as string;
@@ -176,7 +166,7 @@ export default function PCBuilderPage() {
         issues.push(`Motherboard form factor (${mbFormFactor}) may not fit in case`);
       }
     }
-    
+
     setCompatibilityIssues(issues);
   };
 
@@ -184,11 +174,11 @@ export default function PCBuilderPage() {
     let total = 0;
     const cpu = currentBuild.find(b => b.type === 'CPU')?.product;
     const gpu = currentBuild.find(b => b.type === 'GPU')?.product;
-    
+
     if (cpu) total += Number(cpu.specs.tdp) || 65;
     if (gpu) total += Number(gpu.specs.powerRequirement) || 150;
-    total += 50; // Base system (motherboard, RAM, storage, fans)
-    
+    total += 50; // Base system
+
     return Math.ceil(total * 1.2); // 20% headroom
   };
 
@@ -206,25 +196,25 @@ export default function PCBuilderPage() {
   const allRequiredComplete = steps.every((s, idx) => !s.required || build[idx].product);
 
   return (
-    <div className="min-h-screen bg-linear-to-b from-white to-gray-50 dark:from-gray-900 dark:to-black py-24">
+    <div className="min-h-screen bg-background py-24">
       <div className="container mx-auto px-4">
-        
+
         {/* Header */}
         <motion.div
           initial={{ opacity: 0, y: -20 }}
           animate={{ opacity: 1, y: 0 }}
           className="text-center mb-12"
         >
-          <h1 className="text-5xl font-bold mb-4 bg-linear-to-r from-orange-600 to-orange-500 bg-clip-text text-transparent">
+          <h1 className="text-5xl font-heading font-bold mb-4 bg-gradient-to-r from-primary to-orange-500 bg-clip-text text-transparent">
             Custom PC Builder
           </h1>
-          <p className="text-xl text-gray-600 dark:text-gray-400">
+          <p className="text-xl text-muted-foreground">
             Build your dream PC step by step with real-time compatibility checking
           </p>
         </motion.div>
 
         <div className="grid lg:grid-cols-3 gap-8 max-w-7xl mx-auto">
-          
+
           {/* Left: Steps & Components */}
           <div className="lg:col-span-2 space-y-6">
             {steps.map((step, index) => {
@@ -232,42 +222,39 @@ export default function PCBuilderPage() {
               const component = build[index];
               const isActive = index === currentStep;
               const isComplete = isStepComplete(index);
-              
+
               return (
                 <motion.div
                   key={step.type}
                   initial={{ opacity: 0, x: -20 }}
                   animate={{ opacity: 1, x: 0 }}
                   transition={{ delay: index * 0.1 }}
-                  className={`bg-white dark:bg-gray-800 rounded-2xl shadow-lg border-2 transition-all ${
-                    isActive
-                      ? 'border-orange-500 ring-4 ring-orange-500/20'
+                  className={`bg-card text-card-foreground rounded-2xl shadow-lg border-2 transition-all ${isActive
+                      ? 'border-primary ring-4 ring-primary/20'
                       : isComplete
-                      ? 'border-green-500'
-                      : 'border-gray-200 dark:border-gray-700'
-                  } ${!isActive && 'opacity-70 hover:opacity-100'}`}
+                        ? 'border-green-500/50'
+                        : 'border-border'
+                    } ${!isActive && 'opacity-70 hover:opacity-100'}`}
                 >
                   <div className="p-6">
                     <div className="flex items-center justify-between mb-4">
                       <div className="flex items-center gap-4">
-                        <div className={`p-3 rounded-xl ${
-                          isComplete ? 'bg-green-100 dark:bg-green-900/30' : 'bg-orange-100 dark:bg-orange-900/30'
-                        }`}>
-                          <Icon className={`w-6 h-6 ${
-                            isComplete ? 'text-green-600 dark:text-green-500' : 'text-orange-600 dark:text-orange-500'
-                          }`} />
+                        <div className={`p-3 rounded-xl ${isComplete ? 'bg-green-100 dark:bg-green-900/30' : 'bg-primary/10'
+                          }`}>
+                          <Icon className={`w-6 h-6 ${isComplete ? 'text-green-600 dark:text-green-500' : 'text-primary'
+                            }`} />
                         </div>
                         <div>
-                          <h3 className="text-xl font-bold text-gray-900 dark:text-white flex items-center gap-2">
+                          <h3 className="text-xl font-bold text-foreground flex items-center gap-2">
                             {step.type}
-                            {!step.required && <span className="text-xs text-gray-500 font-normal">(Optional)</span>}
+                            {!step.required && <span className="text-xs text-muted-foreground font-normal">(Optional)</span>}
                           </h3>
-                          <p className="text-sm text-gray-500 dark:text-gray-400">
+                          <p className="text-sm text-muted-foreground">
                             Step {index + 1} of {steps.length}
                           </p>
                         </div>
                       </div>
-                      
+
                       {isComplete ? (
                         <Check className="w-8 h-8 text-green-500" />
                       ) : (
@@ -276,33 +263,33 @@ export default function PCBuilderPage() {
                             setCurrentStep(index);
                             setShowModal(true);
                           }}
-                          className="px-6 py-2 bg-linear-to-r from-orange-600 to-orange-500 text-white rounded-lg font-semibold hover:shadow-lg transition"
+                          className="px-6 py-2 bg-gradient-to-r from-primary to-orange-500 text-white rounded-lg font-semibold hover:shadow-lg transition"
                         >
                           Choose
                         </button>
                       )}
                     </div>
-                    
+
                     {component.product ? (
-                      <div className="flex items-center gap-4 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-xl">
+                      <div className="flex items-center gap-4 p-4 bg-muted/50 rounded-xl">
                         <Image
-                          src={component.product.imageUrl}
+                          src={component.product.imageUrl || '/placeholder-product.png'}
                           alt={component.product.name}
                           width={80}
                           height={80}
                           className="object-cover rounded-lg"
                         />
                         <div className="flex-1">
-                          <h4 className="font-semibold text-gray-900 dark:text-white">
+                          <h4 className="font-semibold text-foreground">
                             {component.product.name}
                           </h4>
-                          <p className="text-sm text-gray-600 dark:text-gray-400">
+                          <p className="text-sm text-muted-foreground">
                             {component.product.brand}
                           </p>
                         </div>
                         <div className="text-right">
-                          <p className="text-xl font-bold text-orange-600 dark:text-orange-500">
-                            ${component.product.price.toLocaleString()}
+                          <p className="text-xl font-bold text-primary">
+                            LKR {component.product.price.toLocaleString()}
                           </p>
                           <button
                             onClick={() => {
@@ -311,15 +298,15 @@ export default function PCBuilderPage() {
                               setBuild(newBuild);
                               checkCompatibility(newBuild);
                             }}
-                            className="text-sm text-red-500 hover:underline"
+                            className="text-sm text-destructive hover:underline"
                           >
                             Remove
                           </button>
                         </div>
                       </div>
                     ) : (
-                      <div className="p-8 border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-xl text-center">
-                        <p className="text-gray-500 dark:text-gray-400">
+                      <div className="p-8 border-2 border-dashed border-border rounded-xl text-center">
+                        <p className="text-muted-foreground">
                           No {step.type.toLowerCase()} selected
                         </p>
                       </div>
@@ -336,50 +323,50 @@ export default function PCBuilderPage() {
             <motion.div
               initial={{ opacity: 0, x: 20 }}
               animate={{ opacity: 1, x: 0 }}
-              className="bg-white dark:bg-gray-800 rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700 p-6 sticky top-24"
+              className="bg-card text-card-foreground rounded-2xl shadow-lg border border-border p-6 sticky top-24"
             >
-              <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-6">Build Summary</h2>
-              
+              <h2 className="text-2xl font-bold text-foreground mb-6">Build Summary</h2>
+
               <div className="space-y-4 mb-6">
                 {steps.map((step, idx) => {
                   const comp = build[idx];
                   return (
                     <div key={step.type} className="flex items-center justify-between text-sm">
-                      <span className="text-gray-600 dark:text-gray-400">{step.type}</span>
+                      <span className="text-muted-foreground">{step.type}</span>
                       {comp.product ? (
-                        <span className="font-semibold text-gray-900 dark:text-white">
-                          ${comp.product.price.toLocaleString()}
+                        <span className="font-semibold text-foreground">
+                          LKR {comp.product.price.toLocaleString()}
                         </span>
                       ) : (
-                        <span className="text-gray-400">-</span>
+                        <span className="text-muted-foreground/50">-</span>
                       )}
                     </div>
                   );
                 })}
               </div>
-              
-              <div className="border-t border-gray-200 dark:border-gray-700 pt-4 mb-6">
+
+              <div className="border-t border-border pt-4 mb-6">
                 <div className="flex items-center justify-between text-lg font-bold">
-                  <span className="text-gray-900 dark:text-white">Total</span>
-                  <span className="text-orange-600 dark:text-orange-500">
-                    ${getTotalPrice().toLocaleString()}
+                  <span className="text-foreground">Total</span>
+                  <span className="text-primary">
+                    LKR {getTotalPrice().toLocaleString()}
                   </span>
                 </div>
-                <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
+                <p className="text-xs text-muted-foreground mt-1">
                   Estimated wattage: {calculateTotalWattage(build)}W
                 </p>
               </div>
-              
+
               {/* Compatibility Status */}
               {compatibilityIssues.length > 0 && (
-                <div className="bg-red-50 dark:bg-red-900/20 rounded-xl p-4 mb-4 border-l-4 border-red-500">
+                <div className="bg-destructive/10 rounded-xl p-4 mb-4 border-l-4 border-destructive">
                   <div className="flex items-start gap-2">
-                    <AlertCircle className="w-5 h-5 text-red-500 shrink-0 mt-0.5" />
+                    <AlertCircle className="w-5 h-5 text-destructive shrink-0 mt-0.5" />
                     <div>
-                      <h3 className="font-semibold text-red-700 dark:text-red-400 mb-2">
+                      <h3 className="font-semibold text-destructive mb-2">
                         Compatibility Issues
                       </h3>
-                      <ul className="text-sm text-red-600 dark:text-red-300 space-y-1">
+                      <ul className="text-sm text-destructive/90 space-y-1">
                         {compatibilityIssues.map((issue, idx) => (
                           <li key={idx}>• {issue}</li>
                         ))}
@@ -388,9 +375,9 @@ export default function PCBuilderPage() {
                   </div>
                 </div>
               )}
-              
+
               {allRequiredComplete && compatibilityIssues.length === 0 && (
-                <div className="bg-green-50 dark:bg-green-900/20 rounded-xl p-4 mb-4 border-l-4 border-green-500">
+                <div className="bg-green-500/10 rounded-xl p-4 mb-4 border-l-4 border-green-500">
                   <div className="flex items-center gap-2">
                     <Check className="w-5 h-5 text-green-500" />
                     <span className="font-semibold text-green-700 dark:text-green-400">
@@ -399,30 +386,30 @@ export default function PCBuilderPage() {
                   </div>
                 </div>
               )}
-              
+
               {/* Actions */}
               <div className="space-y-3">
                 <button
                   onClick={addBuildToCart}
                   disabled={!allRequiredComplete || compatibilityIssues.length > 0}
-                  className="w-full py-3 bg-linear-to-r from-orange-600 to-orange-500 text-white rounded-lg font-semibold hover:shadow-lg transition disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
+                  className="w-full py-3 bg-gradient-to-r from-primary to-orange-500 text-primary-foreground rounded-lg font-semibold hover:shadow-lg transition disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
                 >
                   <ShoppingCart className="w-5 h-5" />
                   Add Build to Cart
                 </button>
-                
+
                 <button
                   onClick={() => alert('Build saved!')}
                   disabled={build.every(b => !b.product)}
-                  className="w-full py-3 border-2 border-orange-500 text-orange-600 dark:text-orange-500 rounded-lg font-semibold hover:bg-orange-50 dark:hover:bg-orange-900/20 transition disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
+                  className="w-full py-3 border-2 border-primary text-primary rounded-lg font-semibold hover:bg-primary/10 transition disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
                 >
                   <Save className="w-5 h-5" />
                   Save Build
                 </button>
-                
+
                 <button
                   onClick={resetBuild}
-                  className="w-full py-3 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition flex items-center justify-center gap-2"
+                  className="w-full py-3 text-muted-foreground hover:text-foreground transition flex items-center justify-center gap-2"
                 >
                   <RefreshCw className="w-5 h-5" />
                   Reset Build
@@ -448,20 +435,20 @@ export default function PCBuilderPage() {
               animate={{ scale: 1, opacity: 1 }}
               exit={{ scale: 0.9, opacity: 0 }}
               onClick={(e) => e.stopPropagation()}
-              className="bg-white dark:bg-gray-800 rounded-2xl shadow-2xl max-w-4xl w-full max-h-[80vh] overflow-hidden"
+              className="bg-card text-card-foreground rounded-2xl shadow-2xl max-w-4xl w-full max-h-[80vh] overflow-hidden border border-border"
             >
-              <div className="p-6 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
-                <h2 className="text-2xl font-bold text-gray-900 dark:text-white">
+              <div className="p-6 border-b border-border flex items-center justify-between">
+                <h2 className="text-2xl font-bold text-foreground">
                   Choose {steps[currentStep]?.type}
                 </h2>
                 <button
                   onClick={() => setShowModal(false)}
-                  className="p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition"
+                  className="p-2 hover:bg-muted rounded-lg transition"
                 >
                   <X className="w-6 h-6" />
                 </button>
               </div>
-              
+
               <div className="p-6 overflow-y-auto max-h-[calc(80vh-120px)]">
                 <div className="grid md:grid-cols-2 gap-4">
                   {getAvailableProducts(steps[currentStep]?.type).map(product => (
@@ -469,26 +456,26 @@ export default function PCBuilderPage() {
                       key={product.id}
                       whileHover={{ scale: 1.02 }}
                       onClick={() => selectComponent(product)}
-                      className="p-4 border-2 border-gray-200 dark:border-gray-700 rounded-xl hover:border-orange-500 cursor-pointer transition"
+                      className="p-4 border-2 border-border rounded-xl hover:border-primary cursor-pointer transition bg-background"
                     >
                       <Image
-                        src={product.imageUrl}
+                        src={product.imageUrl || '/placeholder-product.png'}
                         alt={product.name}
                         width={200}
                         height={200}
                         className="w-full h-40 object-cover rounded-lg mb-3"
                       />
-                      <h3 className="font-semibold text-gray-900 dark:text-white mb-1">
+                      <h3 className="font-semibold text-foreground mb-1">
                         {product.name}
                       </h3>
-                      <p className="text-sm text-gray-600 dark:text-gray-400 mb-2">
+                      <p className="text-sm text-muted-foreground mb-2">
                         {product.brand}
                       </p>
                       <div className="flex items-center justify-between">
-                        <span className="text-xl font-bold text-orange-600 dark:text-orange-500">
-                          ${product.price.toLocaleString()}
+                        <span className="text-xl font-bold text-primary">
+                          LKR {product.price.toLocaleString()}
                         </span>
-                        <button className="px-4 py-2 bg-orange-500 text-white rounded-lg text-sm font-semibold hover:bg-orange-600 transition flex items-center gap-1">
+                        <button className="px-4 py-2 bg-primary text-primary-foreground rounded-lg text-sm font-semibold hover:bg-primary/90 transition flex items-center gap-1">
                           Select
                           <ArrowRight className="w-4 h-4" />
                         </button>
@@ -496,11 +483,11 @@ export default function PCBuilderPage() {
                     </motion.div>
                   ))}
                 </div>
-                
+
                 {getAvailableProducts(steps[currentStep]?.type).length === 0 && (
                   <div className="text-center py-12">
-                    <AlertCircle className="w-16 h-16 text-gray-400 mx-auto mb-4" />
-                    <p className="text-gray-500 dark:text-gray-400">
+                    <AlertCircle className="w-16 h-16 text-muted-foreground mx-auto mb-4" />
+                    <p className="text-muted-foreground">
                       No compatible products available for this selection.
                     </p>
                   </div>
diff --git a/app/pre-builts/page.tsx b/app/pre-builts/page.tsx
index bd44a2a..34a1091 100644
--- a/app/pre-builts/page.tsx
+++ b/app/pre-builts/page.tsx
@@ -13,17 +13,17 @@ export default function PreBuiltsPage() {
   );
 
   return (
-    <div className="min-h-screen bg-white dark:bg-gray-900 py-8 sm:py-10 md:py-12">
+    <div className="min-h-screen bg-background py-8 sm:py-10 md:py-12">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <motion.div
           initial={{ opacity: 0, y: 20 }}
           animate={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.6 }}
         >
-          <h1 className="text-2xl sm:text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-3 sm:mb-4">
+          <h1 className="text-2xl sm:text-3xl md:text-4xl font-bold font-heading text-foreground mb-3 sm:mb-4">
             Pre-Built Gaming PCs
           </h1>
-          <p className="text-base sm:text-lg text-gray-600 dark:text-gray-400 mb-6 sm:mb-8">
+          <p className="text-base sm:text-lg text-muted-foreground mb-6 sm:mb-8">
             Ready to ship, expertly built systems for gaming and productivity
           </p>
         </motion.div>
@@ -43,7 +43,7 @@ export default function PreBuiltsPage() {
 
         {products.length === 0 && (
           <div className="text-center py-16 sm:py-20">
-            <p className="text-gray-500 dark:text-gray-400 text-base sm:text-lg">
+            <p className="text-muted-foreground text-base sm:text-lg">
               No pre-built systems available at the moment
             </p>
           </div>
diff --git a/app/product/[id]/page.tsx b/app/product/[id]/page.tsx
index 81adcba..0217213 100644
--- a/app/product/[id]/page.tsx
+++ b/app/product/[id]/page.tsx
@@ -6,7 +6,7 @@ import { useCartStore } from '@/lib/store/cartStore';
 import { useWishlistStore } from '@/lib/store/wishlistStore';
 import { useUserStore } from '@/lib/store/userStore';
 import { ShoppingCart, Heart, Star, Check, AlertCircle } from 'lucide-react';
-import { useState, useEffect, useMemo } from 'react';
+import { useState, useEffect } from 'react';
 import Link from 'next/link';
 import Image from 'next/image';
 import { useParams } from 'next/navigation';
@@ -16,17 +16,17 @@ export default function ProductDetailsPage() {
   const paramValue = params?.id;
   const productId = Array.isArray(paramValue) ? paramValue[0] : paramValue;
 
-  const { 
-    selectedProduct, 
-    fetchProductById, 
-    isLoading, 
-    fetchReviewsByProductId, 
+  const {
+    selectedProduct,
+    fetchProductById,
+    isLoading,
+    fetchReviewsByProductId,
     fetchRelatedProducts,
     currentProductReviews,
     relatedProducts: storeRelatedProducts,
     addReview
   } = useProductStore();
-  
+
   useEffect(() => {
     if (productId) {
       fetchProductById(productId);
@@ -36,7 +36,7 @@ export default function ProductDetailsPage() {
   }, [productId, fetchProductById, fetchReviewsByProductId, fetchRelatedProducts]);
 
   const product = selectedProduct;
-  
+
   const reviews = currentProductReviews;
   const relatedProducts = storeRelatedProducts;
   const addToCart = useCartStore((state) => state.addItem);
@@ -58,21 +58,21 @@ export default function ProductDetailsPage() {
 
   if (isLoading) {
     return (
-      <div className="min-h-screen bg-white dark:bg-gray-900 py-12 flex justify-center items-center">
-        <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-wso2-orange"></div>
+      <div className="min-h-screen bg-background py-12 flex justify-center items-center">
+        <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-primary"></div>
       </div>
     );
   }
 
   if (!productId || !product) {
     return (
-      <div className="min-h-screen bg-white dark:bg-gray-900 py-12">
+      <div className="min-h-screen bg-background py-12">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
           <div className="text-center py-20">
-            <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-4">
+            <h2 className="text-3xl font-heading font-bold text-foreground mb-4">
               Product not found
             </h2>
-            <Link href="/" className="text-wso2-orange hover:underline">
+            <Link href="/" className="text-primary hover:underline">
               Return to home
             </Link>
           </div>
@@ -92,15 +92,15 @@ export default function ProductDetailsPage() {
     : product.rating || 0;
 
   return (
-    <div className="min-h-screen bg-white dark:bg-gray-900 py-12">
+    <div className="min-h-screen bg-background py-12">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         {/* Breadcrumb */}
-        <div className="mb-8 text-sm text-gray-500 dark:text-gray-400">
-          <Link href="/" className="hover:text-wso2-orange">Home</Link>
+        <div className="mb-8 text-sm text-muted-foreground">
+          <Link href="/" className="hover:text-primary">Home</Link>
           <span className="mx-2">/</span>
-          <Link href="/components" className="hover:text-wso2-orange">{product.category}</Link>
+          <Link href="/components" className="hover:text-primary">{product.category}</Link>
           <span className="mx-2">/</span>
-          <span className="text-gray-900 dark:text-white">{product.name}</span>
+          <span className="text-foreground">{product.name}</span>
         </div>
 
         {/* Product Main Section */}
@@ -111,7 +111,7 @@ export default function ProductDetailsPage() {
             animate={{ opacity: 1, x: 0 }}
             transition={{ duration: 0.6 }}
           >
-            <div className="relative aspect-square bg-gray-100 dark:bg-gray-800 rounded-xl overflow-hidden">
+            <div className="relative aspect-square bg-muted rounded-xl overflow-hidden border border-border">
               <Image
                 src={product.imageUrl || '/placeholder-product.png'}
                 alt={product.name}
@@ -129,16 +129,16 @@ export default function ProductDetailsPage() {
             animate={{ opacity: 1, x: 0 }}
             transition={{ duration: 0.6 }}
           >
-            <p className="text-sm text-gray-500 dark:text-gray-400 uppercase mb-2">
+            <p className="text-sm text-muted-foreground uppercase mb-2">
               {product.brand}
             </p>
-            <h1 className="text-4xl font-bold text-gray-900 dark:text-white mb-4">
+            <h1 className="text-4xl font-heading font-bold text-foreground mb-4">
               {product.name}
             </h1>
 
             {/* Rating */}
             <div className="flex items-center gap-4 mb-6">
-              <div className="flex text-yellow-400 text-lg">
+              <div className="flex text-yellow-500 text-lg">
                 {Array.from({ length: 5 }).map((_, i) => (
                   <Star
                     key={i}
@@ -146,14 +146,14 @@ export default function ProductDetailsPage() {
                   />
                 ))}
               </div>
-              <span className="text-gray-600 dark:text-gray-400">
+              <span className="text-muted-foreground">
                 {avgRating.toFixed(1)} ({reviews.length} reviews)
               </span>
             </div>
 
             {/* Price */}
             <div className="mb-6">
-              <span className="text-5xl font-bold text-wso2-orange">
+              <span className="text-5xl font-bold text-primary">
                 LKR {product.price.toLocaleString()}
               </span>
             </div>
@@ -161,7 +161,7 @@ export default function ProductDetailsPage() {
             {/* Stock Status */}
             <div className="mb-6">
               {product.stockLevel === 0 ? (
-                <div className="flex items-center gap-2 text-red-500">
+                <div className="flex items-center gap-2 text-destructive">
                   <AlertCircle className="h-5 w-5" />
                   <span className="font-semibold">Out of Stock</span>
                 </div>
@@ -179,26 +179,26 @@ export default function ProductDetailsPage() {
             </div>
 
             {/* Description */}
-            <p className="text-gray-600 dark:text-gray-400 mb-8 leading-relaxed">
+            <p className="text-muted-foreground mb-8 leading-relaxed">
               {product.description}
             </p>
 
             {/* Quantity & Add to Cart */}
             {product.stockLevel > 0 && (
               <div className="flex gap-4 mb-6">
-                <div className="flex items-center border border-gray-300 dark:border-gray-600 rounded-lg">
+                <div className="flex items-center border border-border rounded-lg bg-card text-card-foreground">
                   <button
                     onClick={() => setQuantity(Math.max(1, quantity - 1))}
-                    className="px-4 py-3 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
+                    className="px-4 py-3 hover:bg-muted transition-colors"
                   >
                     -
                   </button>
-                  <span className="px-6 py-3 border-x border-gray-300 dark:border-gray-600 font-semibold">
+                  <span className="px-6 py-3 border-x border-border font-semibold">
                     {quantity}
                   </span>
                   <button
                     onClick={() => setQuantity(Math.min(product.stockLevel, quantity + 1))}
-                    className="px-4 py-3 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
+                    className="px-4 py-3 hover:bg-muted transition-colors"
                   >
                     +
                   </button>
@@ -208,7 +208,7 @@ export default function ProductDetailsPage() {
                   whileHover={{ scale: 1.02 }}
                   whileTap={{ scale: 0.98 }}
                   onClick={handleAddToCart}
-                  className="flex-1 bg-wso2-orange text-white py-3 rounded-lg font-semibold hover:bg-wso2-orange-dark transition-colors flex items-center justify-center gap-2"
+                  className="flex-1 bg-primary text-primary-foreground py-3 rounded-lg font-semibold hover:bg-primary/90 transition-colors flex items-center justify-center gap-2"
                 >
                   <ShoppingCart className="h-5 w-5" />
                   Add to Cart
@@ -219,7 +219,7 @@ export default function ProductDetailsPage() {
             {product.stockLevel === 0 && (
               <button
                 disabled
-                className="w-full bg-gray-300 dark:bg-gray-700 text-gray-500 dark:text-gray-400 py-3 rounded-lg font-semibold cursor-not-allowed mb-6"
+                className="w-full bg-muted text-muted-foreground py-3 rounded-lg font-semibold cursor-not-allowed mb-6"
               >
                 Out of Stock
               </button>
@@ -230,11 +230,10 @@ export default function ProductDetailsPage() {
               whileHover={{ scale: 1.02 }}
               whileTap={{ scale: 0.98 }}
               onClick={() => toggleWishlist(product.id)}
-              className={`w-full py-3 rounded-lg font-semibold transition-colors flex items-center justify-center gap-2 ${
-                isInWishlist
-                  ? 'bg-red-50 dark:bg-red-900/20 text-red-500 border-2 border-red-500'
-                  : 'border-2 border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:border-wso2-orange dark:hover:border-wso2-orange'
-              }`}
+              className={`w-full py-3 rounded-lg font-semibold transition-colors flex items-center justify-center gap-2 ${isInWishlist
+                  ? 'bg-destructive/10 text-destructive border-2 border-destructive'
+                  : 'border-2 border-border text-foreground hover:border-primary hover:text-primary'
+                }`}
             >
               <Heart className="h-5 w-5" fill={isInWishlist ? 'currentColor' : 'none'} />
               {isInWishlist ? 'Remove from Wishlist' : 'Add to Wishlist'}
@@ -244,25 +243,23 @@ export default function ProductDetailsPage() {
 
         {/* Tabs Section */}
         <div className="mb-16">
-          <div className="border-b border-gray-200 dark:border-gray-700 mb-8">
+          <div className="border-b border-border mb-8">
             <div className="flex gap-8">
               <button
                 onClick={() => setActiveTab('specs')}
-                className={`pb-4 font-semibold transition-colors ${
-                  activeTab === 'specs'
-                    ? 'text-wso2-orange border-b-2 border-wso2-orange'
-                    : 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300'
-                }`}
+                className={`pb-4 font-semibold transition-colors ${activeTab === 'specs'
+                    ? 'text-primary border-b-2 border-primary'
+                    : 'text-muted-foreground hover:text-foreground'
+                  }`}
               >
                 Detailed Specs
               </button>
               <button
                 onClick={() => setActiveTab('reviews')}
-                className={`pb-4 font-semibold transition-colors ${
-                  activeTab === 'reviews'
-                    ? 'text-wso2-orange border-b-2 border-wso2-orange'
-                    : 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300'
-                }`}
+                className={`pb-4 font-semibold transition-colors ${activeTab === 'reviews'
+                    ? 'text-primary border-b-2 border-primary'
+                    : 'text-muted-foreground hover:text-foreground'
+                  }`}
               >
                 Reviews ({reviews.length})
               </button>
@@ -274,21 +271,21 @@ export default function ProductDetailsPage() {
               initial={{ opacity: 0, y: 20 }}
               animate={{ opacity: 1, y: 0 }}
               transition={{ duration: 0.5 }}
-              className="bg-white dark:bg-gray-800 rounded-xl p-8 border border-gray-200 dark:border-gray-700"
+              className="bg-card text-card-foreground rounded-xl p-8 border border-border"
             >
-              <h3 className="text-2xl font-bold text-gray-900 dark:text-white mb-6">
+              <h3 className="text-2xl font-heading font-bold text-foreground mb-6">
                 Technical Specifications
               </h3>
               <div className="grid md:grid-cols-2 gap-4">
                 {Object.entries(product.specs).map(([key, value]) => (
                   <div
                     key={key}
-                    className="flex justify-between py-3 border-b border-gray-200 dark:border-gray-700"
+                    className="flex justify-between py-3 border-b border-border"
                   >
-                    <span className="font-semibold text-gray-700 dark:text-gray-300 capitalize">
+                    <span className="font-semibold text-foreground capitalize">
                       {key.replace(/([A-Z])/g, ' $1').trim()}
                     </span>
-                    <span className="text-gray-600 dark:text-gray-400">{value}</span>
+                    <span className="text-muted-foreground">{value}</span>
                   </div>
                 ))}
               </div>
@@ -303,17 +300,17 @@ export default function ProductDetailsPage() {
             >
               <div className="space-y-6">
                 {/* Write a Review Section */}
-                <div className="bg-gray-50 dark:bg-gray-800/50 rounded-xl p-6 border border-gray-200 dark:border-gray-700 mb-8">
-                  <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">Write a Review</h3>
+                <div className="bg-muted/30 rounded-xl p-6 border border-border mb-8">
+                  <h3 className="text-lg font-semibold text-foreground mb-4">Write a Review</h3>
                   <div className="space-y-4">
                     <div>
-                      <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Rating</label>
+                      <label className="block text-sm font-medium text-foreground mb-1">Rating</label>
                       <div className="flex gap-2">
                         {[1, 2, 3, 4, 5].map((star) => (
                           <button
                             key={star}
                             onClick={() => setReviewForm({ ...reviewForm, rating: star })}
-                            className={`text-2xl ${star <= reviewForm.rating ? 'text-yellow-400' : 'text-gray-300 dark:text-gray-600'}`}
+                            className={`text-2xl ${star <= reviewForm.rating ? 'text-yellow-500' : 'text-muted-foreground/30'}`}
                           >
                             ★
                           </button>
@@ -321,21 +318,21 @@ export default function ProductDetailsPage() {
                       </div>
                     </div>
                     <div>
-                      <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Title</label>
+                      <label className="block text-sm font-medium text-foreground mb-1">Title</label>
                       <input
                         type="text"
                         value={reviewForm.title}
                         onChange={(e) => setReviewForm({ ...reviewForm, title: e.target.value })}
-                        className="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
+                        className="w-full px-4 py-2 rounded-lg border border-input bg-background/50 text-foreground focus:ring-2 focus:ring-primary/20 focus:border-primary focus:outline-none"
                         placeholder="Summarize your experience"
                       />
                     </div>
                     <div>
-                      <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Review</label>
+                      <label className="block text-sm font-medium text-foreground mb-1">Review</label>
                       <textarea
                         value={reviewForm.comment}
                         onChange={(e) => setReviewForm({ ...reviewForm, comment: e.target.value })}
-                        className="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white h-32"
+                        className="w-full px-4 py-2 rounded-lg border border-input bg-background/50 text-foreground h-32 focus:ring-2 focus:ring-primary/20 focus:border-primary focus:outline-none"
                         placeholder="Tell us what you liked or disliked"
                       />
                     </div>
@@ -343,10 +340,10 @@ export default function ProductDetailsPage() {
                       onClick={async () => {
                         if (!reviewForm.title || !reviewForm.comment) return;
                         await addReview({
-                          id: Date.now().toString(), // Temporary ID generation
+                          id: Date.now().toString(),
                           productId: product.id,
-                          userId: 'current-user-id', // Should get from userStore
-                          userName: 'Current User', // Should get from userStore
+                          userId: 'current-user-id',
+                          userName: 'Current User',
                           rating: reviewForm.rating,
                           title: reviewForm.title,
                           comment: reviewForm.comment,
@@ -356,7 +353,7 @@ export default function ProductDetailsPage() {
                         });
                         setReviewForm({ rating: 5, title: '', comment: '' });
                       }}
-                      className="px-6 py-2 bg-wso2-orange text-white rounded-lg font-semibold hover:bg-wso2-orange-dark transition"
+                      className="px-6 py-2 bg-primary text-primary-foreground rounded-lg font-semibold hover:bg-primary/90 transition"
                     >
                       Submit Review
                     </button>
@@ -366,27 +363,27 @@ export default function ProductDetailsPage() {
                 {reviews.map((review) => (
                   <div
                     key={review.id}
-                    className="bg-white dark:bg-gray-800 rounded-xl p-6 border border-gray-200 dark:border-gray-700"
+                    className="bg-card text-card-foreground rounded-xl p-6 border border-border"
                   >
                     <div className="flex items-start justify-between mb-4">
                       <div>
-                        <h4 className="font-semibold text-gray-900 dark:text-white">
+                        <h4 className="font-semibold text-foreground">
                           {review.userName}
                         </h4>
-                        <div className="flex text-yellow-400 text-sm mt-1">
+                        <div className="flex text-yellow-500 text-sm mt-1">
                           {'★'.repeat(review.rating)}{'☆'.repeat(5 - review.rating)}
                         </div>
                       </div>
-                      <span className="text-sm text-gray-500 dark:text-gray-400">
+                      <span className="text-sm text-muted-foreground">
                         {new Date(review.createdAt).toLocaleDateString()}
                       </span>
                     </div>
-                    <h5 className="font-semibold text-gray-900 dark:text-white mb-2">
+                    <h5 className="font-semibold text-foreground mb-2">
                       {review.title}
                     </h5>
-                    <p className="text-gray-600 dark:text-gray-400">{review.comment}</p>
+                    <p className="text-muted-foreground">{review.comment}</p>
                     {review.verified && (
-                      <span className="inline-block mt-3 text-xs bg-green-100 dark:bg-green-900/20 text-green-700 dark:text-green-400 px-2 py-1 rounded">
+                      <span className="inline-block mt-3 text-xs bg-green-500/10 text-green-600 dark:text-green-400 px-2 py-1 rounded">
                         Verified Purchase
                       </span>
                     )}
@@ -394,8 +391,8 @@ export default function ProductDetailsPage() {
                 ))}
 
                 {reviews.length === 0 && (
-                  <div className="text-center py-12 bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700">
-                    <p className="text-gray-500 dark:text-gray-400">
+                  <div className="text-center py-12 bg-card text-card-foreground rounded-xl border border-border">
+                    <p className="text-muted-foreground">
                       No reviews yet. Be the first to review this product!
                     </p>
                   </div>
@@ -408,7 +405,7 @@ export default function ProductDetailsPage() {
         {/* Related Products */}
         {relatedProducts.length > 0 && (
           <div>
-            <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-8">
+            <h2 className="text-3xl font-heading font-bold text-foreground mb-8">
               Related Products
             </h2>
             <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
@@ -416,9 +413,9 @@ export default function ProductDetailsPage() {
                 <Link key={relatedProduct.id} href={`/product/${relatedProduct.id}`}>
                   <motion.div
                     whileHover={{ y: -5 }}
-                    className="bg-white dark:bg-gray-800 rounded-xl shadow-md hover:shadow-xl transition-all border border-gray-200 dark:border-gray-700 overflow-hidden"
+                    className="bg-card text-card-foreground rounded-xl shadow-md hover:shadow-xl transition-all border border-border overflow-hidden"
                   >
-                    <div className="aspect-square bg-gray-100 dark:bg-gray-700">
+                    <div className="aspect-square bg-muted">
                       {/* eslint-disable-next-line @next/next/no-img-element */}
                       <img
                         src={relatedProduct.imageUrl}
@@ -430,10 +427,10 @@ export default function ProductDetailsPage() {
                       />
                     </div>
                     <div className="p-4">
-                      <h3 className="font-semibold text-gray-900 dark:text-white mb-2 line-clamp-2">
+                      <h3 className="font-semibold text-foreground mb-2 line-clamp-2">
                         {relatedProduct.name}
                       </h3>
-                      <p className="text-xl font-bold text-wso2-orange">
+                      <p className="text-xl font-bold text-primary">
                         LKR {relatedProduct.price.toLocaleString()}
                       </p>
                     </div>
diff --git a/app/signup/page.tsx b/app/signup/page.tsx
index b36532d..b6f0a45 100644
--- a/app/signup/page.tsx
+++ b/app/signup/page.tsx
@@ -111,7 +111,7 @@ export default function SignupPage() {
   };
 
   return (
-    <div className="min-h-screen bg-linear-to-br from-gray-50 via-white to-gray-100 dark:from-gray-950 dark:via-gray-900 dark:to-black py-10">
+    <div className="min-h-screen bg-background py-10">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div className="grid lg:grid-cols-2 gap-10 lg:gap-16 items-center">
           {/* Left column */}
@@ -121,14 +121,14 @@ export default function SignupPage() {
             transition={{ duration: 0.6 }}
             className="space-y-6"
           >
-            <div className="inline-flex items-center gap-2 bg-wso2-orange/10 text-wso2-orange px-3 py-1 rounded-full text-sm font-semibold">
+            <div className="inline-flex items-center gap-2 bg-primary/10 text-primary px-3 py-1 rounded-full text-sm font-semibold">
               <UserPlus className="h-4 w-4" />
               Join the CS02 community
             </div>
-            <h1 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white">
-              Create your <span className="text-wso2-orange">CS02</span> account
+            <h1 className="text-3xl sm:text-4xl lg:text-5xl font-bold font-heading text-foreground">
+              Create your <span className="text-primary">CS02</span> account
             </h1>
-            <p className="text-base sm:text-lg text-gray-600 dark:text-gray-400 leading-relaxed">
+            <p className="text-base sm:text-lg text-muted-foreground leading-relaxed">
               Sign up to unlock personalised build recommendations, manage orders, and earn LKR rewards every time you upgrade your gear.
             </p>
 
@@ -136,13 +136,13 @@ export default function SignupPage() {
               {[1, 2, 3, 4].map((step) => (
                 <div
                   key={step}
-                  className="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl p-4 shadow-md"
+                  className="bg-card border border-border rounded-2xl p-4 shadow-md text-card-foreground"
                 >
                   <div className="flex items-center gap-3">
-                    <div className="h-10 w-10 rounded-full bg-wso2-orange/10 flex items-center justify-center text-wso2-orange font-semibold">
+                    <div className="h-10 w-10 rounded-full bg-primary/10 flex items-center justify-center text-primary font-semibold">
                       {step}
                     </div>
-                    <div className="text-sm text-gray-600 dark:text-gray-400">
+                    <div className="text-sm text-muted-foreground">
                       {step === 1 && 'Choose your preferred CS02 showroom'}
                       {step === 2 && 'Save builds with compatibility guidance'}
                       {step === 3 && 'Earn LKR rewards on every purchase'}
@@ -153,27 +153,27 @@ export default function SignupPage() {
               ))}
             </div>
 
-            <div className="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl p-6 shadow-lg">
-              <h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">CS02 member perks</h2>
-              <ul className="space-y-2 text-sm text-gray-600 dark:text-gray-400">
+            <div className="bg-card border border-border rounded-2xl p-6 shadow-lg text-card-foreground">
+              <h2 className="text-lg font-semibold text-foreground mb-3">CS02 member perks</h2>
+              <ul className="space-y-2 text-sm text-muted-foreground">
                 <li className="flex items-start gap-2">
-                  <CheckCircle2 className="h-4 w-4 mt-1 text-wso2-orange" />
+                  <CheckCircle2 className="h-4 w-4 mt-1 text-primary" />
                   Exclusive launch offers for Sri Lankan customers
                 </li>
                 <li className="flex items-start gap-2">
-                  <CheckCircle2 className="h-4 w-4 mt-1 text-wso2-orange" />
+                  <CheckCircle2 className="h-4 w-4 mt-1 text-primary" />
                   Free tune-ups on custom rigs purchased in Colombo, Kandy, or Galle
                 </li>
                 <li className="flex items-start gap-2">
-                  <CheckCircle2 className="h-4 w-4 mt-1 text-wso2-orange" />
+                  <CheckCircle2 className="h-4 w-4 mt-1 text-primary" />
                   Faster warranty claims and service appointments
                 </li>
               </ul>
             </div>
 
-            <div className="text-sm text-gray-500 dark:text-gray-400">
+            <div className="text-sm text-muted-foreground">
               Already have an account?
-              <Link href="/login" className="ml-2 font-semibold text-wso2-orange hover:text-wso2-orange-dark">
+              <Link href="/login" className="ml-2 font-semibold text-primary hover:text-primary/80">
                 Sign in here
               </Link>
             </div>
@@ -185,15 +185,15 @@ export default function SignupPage() {
             animate={{ opacity: 1, x: 0 }}
             transition={{ duration: 0.6 }}
           >
-            <div className="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-3xl shadow-2xl p-6 sm:p-8 lg:p-10">
+            <div className="bg-card border border-border rounded-3xl shadow-2xl p-6 sm:p-8 lg:p-10 text-card-foreground">
               <form onSubmit={handleSubmit} className="space-y-6">
                 <div className="grid sm:grid-cols-2 gap-4">
                   <div>
-                    <label className="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
+                    <label className="block text-sm font-semibold text-foreground mb-2">
                       Full name
                     </label>
                     <div className="relative">
-                      <Sparkles className="h-5 w-5 text-gray-400 absolute left-3 top-1/2 -translate-y-1/2" />
+                      <Sparkles className="h-5 w-5 text-muted-foreground absolute left-3 top-1/2 -translate-y-1/2" />
                       <input
                         name="fullName"
                         type="text"
@@ -201,17 +201,17 @@ export default function SignupPage() {
                         value={formData.fullName}
                         onChange={handleChange}
                         placeholder="Dinuka Perera"
-                        className="w-full pl-10 pr-4 py-3 rounded-xl border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-wso2-orange transition"
+                        className="w-full pl-10 pr-4 py-3 rounded-xl border border-input bg-background/50 text-foreground focus:outline-none focus:ring-2 focus:ring-primary transition"
                       />
                     </div>
                   </div>
 
                   <div>
-                    <label className="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
+                    <label className="block text-sm font-semibold text-foreground mb-2">
                       Phone number
                     </label>
                     <div className="relative">
-                      <Phone className="h-5 w-5 text-gray-400 absolute left-3 top-1/2 -translate-y-1/2" />
+                      <Phone className="h-5 w-5 text-muted-foreground absolute left-3 top-1/2 -translate-y-1/2" />
                       <input
                         name="phone"
                         type="tel"
@@ -219,18 +219,18 @@ export default function SignupPage() {
                         value={formData.phone}
                         onChange={handleChange}
                         placeholder="+94 77 123 4567"
-                        className="w-full pl-10 pr-4 py-3 rounded-xl border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-wso2-orange transition"
+                        className="w-full pl-10 pr-4 py-3 rounded-xl border border-input bg-background/50 text-foreground focus:outline-none focus:ring-2 focus:ring-primary transition"
                       />
                     </div>
                   </div>
                 </div>
 
                 <div>
-                  <label className="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
+                  <label className="block text-sm font-semibold text-foreground mb-2">
                     Email address
                   </label>
                   <div className="relative">
-                    <Mail className="h-5 w-5 text-gray-400 absolute left-3 top-1/2 -translate-y-1/2" />
+                    <Mail className="h-5 w-5 text-muted-foreground absolute left-3 top-1/2 -translate-y-1/2" />
                     <input
                       name="email"
                       type="email"
@@ -238,18 +238,18 @@ export default function SignupPage() {
                       value={formData.email}
                       onChange={handleChange}
                       placeholder="you@example.com"
-                      className="w-full pl-10 pr-4 py-3 rounded-xl border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-wso2-orange transition"
+                      className="w-full pl-10 pr-4 py-3 rounded-xl border border-input bg-background/50 text-foreground focus:outline-none focus:ring-2 focus:ring-primary transition"
                     />
                   </div>
                 </div>
 
                 <div className="grid sm:grid-cols-2 gap-4">
                   <div>
-                    <label className="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
+                    <label className="block text-sm font-semibold text-foreground mb-2">
                       Password
                     </label>
                     <div className="relative">
-                      <Lock className="h-5 w-5 text-gray-400 absolute left-3 top-1/2 -translate-y-1/2" />
+                      <Lock className="h-5 w-5 text-muted-foreground absolute left-3 top-1/2 -translate-y-1/2" />
                       <input
                         name="password"
                         type="password"
@@ -257,45 +257,44 @@ export default function SignupPage() {
                         value={formData.password}
                         onChange={handleChange}
                         placeholder="Create a password"
-                        className="w-full pl-10 pr-4 py-3 rounded-xl border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-wso2-orange transition"
+                        className="w-full pl-10 pr-4 py-3 rounded-xl border border-input bg-background/50 text-foreground focus:outline-none focus:ring-2 focus:ring-primary transition"
                       />
                     </div>
-                    <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
+                    <p className="text-xs text-muted-foreground mt-1">
                       Minimum 8 characters with a number and symbol recommended.
                     </p>
                     {formData.password && (
                       <div className="mt-3 space-y-2">
                         <div className="flex items-center justify-between mb-1">
-                          <span className="text-xs font-medium text-gray-600 dark:text-gray-400">
+                          <span className="text-xs font-medium text-muted-foreground">
                             Password Strength:
                           </span>
                           <span className={`text-xs font-bold ${getPasswordStrength(formData.password).color}`}>
                             {getPasswordStrength(formData.password).label}
                           </span>
                         </div>
-                        <div className="w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
+                        <div className="w-full h-2 bg-muted rounded-full overflow-hidden">
                           <motion.div
                             initial={{ width: 0 }}
                             animate={{ width: `${(getPasswordStrength(formData.password).strength / 4) * 100}%` }}
-                            className={`h-full transition-all ${
-                              getPasswordStrength(formData.password).strength === 1 ? 'bg-red-500' :
+                            className={`h-full transition-all ${getPasswordStrength(formData.password).strength === 1 ? 'bg-destructive' :
                               getPasswordStrength(formData.password).strength === 2 ? 'bg-yellow-500' :
-                              getPasswordStrength(formData.password).strength === 3 ? 'bg-blue-500' :
-                              'bg-green-500'
-                            }`}
+                                getPasswordStrength(formData.password).strength === 3 ? 'bg-blue-500' :
+                                  'bg-green-500'
+                              }`}
                           />
                         </div>
                         <ul className="text-xs space-y-1 mt-2">
-                          <li className={`flex items-center gap-1 ${formData.password.length >= 8 ? 'text-green-600 dark:text-green-400' : 'text-gray-500 dark:text-gray-400'}`}>
+                          <li className={`flex items-center gap-1 ${formData.password.length >= 8 ? 'text-green-600' : 'text-muted-foreground'}`}>
                             {formData.password.length >= 8 ? '✓' : '○'} At least 8 characters
                           </li>
-                          <li className={`flex items-center gap-1 ${formData.password.match(/[a-z]/) && formData.password.match(/[A-Z]/) ? 'text-green-600 dark:text-green-400' : 'text-gray-500 dark:text-gray-400'}`}>
+                          <li className={`flex items-center gap-1 ${formData.password.match(/[a-z]/) && formData.password.match(/[A-Z]/) ? 'text-green-600' : 'text-muted-foreground'}`}>
                             {formData.password.match(/[a-z]/) && formData.password.match(/[A-Z]/) ? '✓' : '○'} Upper and lowercase letters
                           </li>
-                          <li className={`flex items-center gap-1 ${formData.password.match(/[0-9]/) ? 'text-green-600 dark:text-green-400' : 'text-gray-500 dark:text-gray-400'}`}>
+                          <li className={`flex items-center gap-1 ${formData.password.match(/[0-9]/) ? 'text-green-600' : 'text-muted-foreground'}`}>
                             {formData.password.match(/[0-9]/) ? '✓' : '○'} At least one number
                           </li>
-                          <li className={`flex items-center gap-1 ${formData.password.match(/[^a-zA-Z0-9]/) ? 'text-green-600 dark:text-green-400' : 'text-gray-500 dark:text-gray-400'}`}>
+                          <li className={`flex items-center gap-1 ${formData.password.match(/[^a-zA-Z0-9]/) ? 'text-green-600' : 'text-muted-foreground'}`}>
                             {formData.password.match(/[^a-zA-Z0-9]/) ? '✓' : '○'} Special character (!@#$%^&*)
                           </li>
                         </ul>
@@ -304,11 +303,11 @@ export default function SignupPage() {
                   </div>
 
                   <div>
-                    <label className="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
+                    <label className="block text-sm font-semibold text-foreground mb-2">
                       Confirm password
                     </label>
                     <div className="relative">
-                      <Lock className="h-5 w-5 text-gray-400 absolute left-3 top-1/2 -translate-y-1/2" />
+                      <Lock className="h-5 w-5 text-muted-foreground absolute left-3 top-1/2 -translate-y-1/2" />
                       <input
                         name="confirmPassword"
                         type="password"
@@ -316,23 +315,23 @@ export default function SignupPage() {
                         value={formData.confirmPassword}
                         onChange={handleChange}
                         placeholder="Repeat password"
-                        className="w-full pl-10 pr-4 py-3 rounded-xl border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-wso2-orange transition"
+                        className="w-full pl-10 pr-4 py-3 rounded-xl border border-input bg-background/50 text-foreground focus:outline-none focus:ring-2 focus:ring-primary transition"
                       />
                     </div>
                   </div>
                 </div>
 
                 <div>
-                  <label className="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
+                  <label className="block text-sm font-semibold text-foreground mb-2">
                     Preferred showroom
                   </label>
                   <div className="relative">
-                    <Building2 className="h-5 w-5 text-gray-400 absolute left-3 top-1/2 -translate-y-1/2" />
+                    <Building2 className="h-5 w-5 text-muted-foreground absolute left-3 top-1/2 -translate-y-1/2" />
                     <select
                       name="preferredStore"
                       value={formData.preferredStore}
                       onChange={handleChange}
-                      className="w-full pl-10 pr-4 py-3 rounded-xl border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-wso2-orange transition"
+                      className="w-full pl-10 pr-4 py-3 rounded-xl border border-input bg-background/50 text-foreground focus:outline-none focus:ring-2 focus:ring-primary transition"
                     >
                       <option value="colombo">Colombo - Flagship Store</option>
                       <option value="kandy">Kandy - Central Hub</option>
@@ -341,13 +340,13 @@ export default function SignupPage() {
                   </div>
                 </div>
 
-                <label className="flex items-start gap-3 text-sm text-gray-600 dark:text-gray-400">
+                <label className="flex items-start gap-3 text-sm text-muted-foreground">
                   <input
                     type="checkbox"
                     name="newsletter"
                     checked={formData.newsletter}
                     onChange={handleChange}
-                    className="mt-1 accent-wso2-orange"
+                    className="mt-1 accent-primary"
                   />
                   <span>
                     Keep me updated about CS02 launches, trade-in events, and LKR exclusive deals. (We send a maximum of two emails per month.)
@@ -355,7 +354,7 @@ export default function SignupPage() {
                 </label>
 
                 {error && (
-                  <div className="bg-red-50 dark:bg-red-900/30 text-red-600 dark:text-red-300 text-sm rounded-xl p-3">
+                  <div className="bg-destructive/10 text-destructive text-sm rounded-xl p-3">
                     {error}
                   </div>
                 )}
@@ -365,7 +364,7 @@ export default function SignupPage() {
                   whileTap={{ scale: 0.98 }}
                   type="submit"
                   disabled={loading}
-                  className="w-full flex items-center justify-center gap-2 bg-wso2-orange text-white py-3.5 rounded-xl font-semibold shadow-lg hover:bg-wso2-orange-dark transition disabled:opacity-70"
+                  className="w-full flex items-center justify-center gap-2 bg-primary text-primary-foreground py-3.5 rounded-xl font-semibold shadow-lg hover:bg-primary/90 transition disabled:opacity-70"
                 >
                   {loading ? (
                     <>
diff --git a/package-lock.json b/package-lock.json
index 2d0f021..5a6d407 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -76,7 +76,6 @@
       "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.27.1",
         "@babel/generator": "^7.28.5",
@@ -1334,7 +1333,6 @@
       "resolved": "https://registry.npmjs.org/@react-three/fiber/-/fiber-9.4.2.tgz",
       "integrity": "sha512-H4B4+FDNHpvIb4FmphH4ubxOfX5bxmfOw0+3pkQwR9u9wFiyMS7wUDkNn0m4RqQuiLWeia9jfN1eBvtyAVGEog==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.17.8",
         "@types/react-reconciler": "^0.32.0",
@@ -1732,7 +1730,6 @@
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.7.tgz",
       "integrity": "sha512-MWtvHrGZLFttgeEj28VXHxpmwYbor/ATPYbBfSFZEIRK0ecCFLl2Qo55z52Hss+UV9CRN7trSeq1zbgx7YDWWg==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "csstype": "^3.2.2"
       }
@@ -1767,7 +1764,6 @@
       "resolved": "https://registry.npmjs.org/@types/three/-/three-0.181.0.tgz",
       "integrity": "sha512-MLF1ks8yRM2k71D7RprFpDb9DOX0p22DbdPqT/uAkc6AtQXjxWCVDjCy23G9t1o8HcQPk7woD2NIyiaWcWPYmA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@dimforge/rapier3d-compat": "~0.12.0",
         "@tweenjs/tween.js": "~23.1.3",
@@ -1830,7 +1826,6 @@
       "integrity": "sha512-jCzKdm/QK0Kg4V4IK/oMlRZlY+QOcdjv89U2NgKHZk1CYTj82/RVSx1mV/0gqCVMJ/DA+Zf/S4NBWNF8GQ+eqQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.48.0",
         "@typescript-eslint/types": "8.48.0",
@@ -2341,7 +2336,6 @@
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -2729,7 +2723,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.8.25",
         "caniuse-lite": "^1.0.30001754",
@@ -3380,7 +3373,6 @@
       "integrity": "sha512-BhHmn2yNOFA9H9JmmIVKJmd288g9hrVRDkdoIgRCRuSySRUHH7r/DI6aAXW9T1WwUuY3DFgrcaqB+deURBLR5g==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -3566,7 +3558,6 @@
       "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@rtsao/scc": "^1.1.0",
         "array-includes": "^3.1.9",
@@ -5993,7 +5984,6 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.2.1.tgz",
       "integrity": "sha512-DGrYcCWK7tvYMnWh79yrPHt+vdx9tY+1gPZa7nJQtO/p8bLTDaHp4dzwEhQB7pZ4Xe3ok4XKuEPrVuc+wlpkmw==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -6003,7 +5993,6 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.1.tgz",
       "integrity": "sha512-ibrK8llX2a4eOskq1mXKu/TGZj9qzomO+sNfO98M6d9zIPOEhlBkMkBUBLd1vgS0gQsLDBzA+8jJBVXDnfHmJg==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "scheduler": "^0.27.0"
       },
@@ -6723,8 +6712,7 @@
       "version": "0.181.2",
       "resolved": "https://registry.npmjs.org/three/-/three-0.181.2.tgz",
       "integrity": "sha512-k/CjiZ80bYss6Qs7/ex1TBlPD11whT9oKfT8oTGiHa34W4JRd1NiH/Tr1DbHWQ2/vMUypxksLnF2CfmlmM5XFQ==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/three-mesh-bvh": {
       "version": "0.8.3",
@@ -6799,7 +6787,6 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -7029,7 +7016,6 @@
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "dev": true,
       "license": "Apache-2.0",
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -7333,7 +7319,6 @@
       "integrity": "sha512-AvvthqfqrAhNH9dnfmrfKzX5upOdjUVJYFqNSlkmGf64gRaTzlPwz99IHYnVs28qYAybvAlBV+H7pn0saFY4Ig==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }
diff --git a/package.json b/package.json
index c8ee0dd..b0abd2c 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,9 @@
     "lint": "eslint .",
     "prepare": "husky"
   },
+  "engines": {
+    "node": ">=20.9.0"
+  },
   "dependencies": {
     "@react-three/drei": "^10.7.6",
     "@react-three/fiber": "^9.4.0",
diff --git a/public/images/hero/hero-case.png b/public/images/hero/hero-case.png
new file mode 100644
index 0000000..d366ea5
Binary files /dev/null and b/public/images/hero/hero-case.png differ
diff --git a/public/images/hero/hero-gpu.png b/public/images/hero/hero-gpu.png
new file mode 100644
index 0000000..8506d93
Binary files /dev/null and b/public/images/hero/hero-gpu.png differ
diff --git a/public/images/hero/hero-peripherals.png b/public/images/hero/hero-peripherals.png
new file mode 100644
index 0000000..30a5df8
Binary files /dev/null and b/public/images/hero/hero-peripherals.png differ
diff --git a/public/images/hero/hero-setup.png b/public/images/hero/hero-setup.png
new file mode 100644
index 0000000..97f780d
Binary files /dev/null and b/public/images/hero/hero-setup.png differ
diff --git a/sonar-project.properties b/sonar-project.properties
new file mode 100644
index 0000000..f84889d
--- /dev/null
+++ b/sonar-project.properties
@@ -0,0 +1,11 @@
+sonar.projectKey=<INSERT_PROJECT_KEY>
+sonar.organization=<INSERT_ORGANIZATION_KEY>
+sonar.host.url=https://sonarcloud.io
+
+# Source code
+sonar.sources=.
+sonar.exclusions=**/node_modules/**,**/.next/**,**/out/**,**/coverage/**,**/*.spec.ts,**/*.test.ts,**/*.config.js,**/*.config.ts
+
+# Tests
+sonar.tests=.
+sonar.test.inclusions=**/*.spec.ts,**/*.test.ts
diff --git a/tailwind.config.ts b/tailwind.config.ts
index afd0145..3f187f6 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -12,9 +12,29 @@ const config: Config = {
       colors: {
         background: "hsl(var(--background))",
         foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "#FF7300",
+          foreground: "#FFFFFF",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
         "wso2-orange": "#FF7300",
         "wso2-orange-dark": "#E66800",
       },
+      fontFamily: {
+        heading: ["var(--font-outfit)", "sans-serif"],
+        body: ["var(--font-inter)", "sans-serif"],
+      },
     },
   },
   plugins: [],