diff --git a/src/app/core/layouts/header/header.html b/src/app/core/layouts/header/header.html
index cc34412..c2c6a7e 100644
--- a/src/app/core/layouts/header/header.html
+++ b/src/app/core/layouts/header/header.html
@@ -3,7 +3,7 @@
     class="bg-gray-50 wrapper py-4 flex gap-x-5 sm:gap-x-10 items-center shadow-lg shadow-gray-400/20"
   >
     <div class="">
-      <a class="px-3 py-1 bg-gray-800 text-white" href="/">eKart</a>
+      <a class="px-3 py-1 bg-blue-600 text-white" href="/">eKart</a>
     </div>
 
     <div class="flex-1 grid grid-cols-[1fr_auto]">
diff --git a/src/app/features/product/components/product-card/product-card.html b/src/app/features/product/components/product-card/product-card.html
index 73f1c6f..6a68712 100644
--- a/src/app/features/product/components/product-card/product-card.html
+++ b/src/app/features/product/components/product-card/product-card.html
@@ -5,15 +5,25 @@
     class="absolute top-5 right-5"
   />
   <!--Product image-->
-  <div class="bg-gray-200 rounded-xl h-40">
+  <div class="bg-gray-200 rounded-xl h-60">
     <img [src]="product.productImages[0]" alt="" class="object-cover rounded-xl w-full h-full" />
   </div>
 
-  <p class="text-gray-400 text-sm truncate">{{ product.title }}</p>
-  <p class="text-gray-400 text-xs">⭐4.5</p>
-  <p class="text-gray-400 text-xs">
-    Price:
-    <span class="line-through italic mr-1">{{ product.actualPrice }}</span>
-    <span class="font-bold">{{ product.listPrice }}/-</span>
-  </p>
+  <div class="flex justify-between mt-4">
+    <p class="text-sm truncate font-medium text-gray-800 hover:text-blue-500">
+      {{ product.title }}
+    </p>
+    <p class="text-gray-400 text-xs">⭐4.5</p>
+  </div>
+  <div class="flex justify-between mt-4">
+    <div class="">
+      <p class="text-gray-400 text-xs line-through italic">Rs. {{ product.listPrice }}</p>
+      <p class="font-medium text-lg">Rs. {{ product.actualPrice }}</p>
+    </div>
+    <div>
+      <button class="btn btn-primary p-3" title="Add to cart">
+        <lucide-angular [img]="ShoppingCartIcon" class="w-4" />
+      </button>
+    </div>
+  </div>
 </div>
diff --git a/src/app/features/product/components/product-card/product-card.ts b/src/app/features/product/components/product-card/product-card.ts
index 04e3263..6abd996 100644
--- a/src/app/features/product/components/product-card/product-card.ts
+++ b/src/app/features/product/components/product-card/product-card.ts
@@ -2,15 +2,17 @@ import { Component, inject, Input } from "@angular/core";
 import { ProductModel } from "../../../../core/models/product.model";
 import { Router } from "@angular/router";
 import { FavoriteButton } from "../../../../shared/components/favorite-button/favorite-button";
+import { LucideAngularModule, ShoppingCart } from "lucide-angular";
 
 @Component({
   selector: "app-product-card",
   standalone: true,
-  imports: [FavoriteButton],
+  imports: [FavoriteButton, LucideAngularModule],
   templateUrl: "./product-card.html",
 })
 export class ProductCard {
   readonly router = inject(Router);
+  readonly ShoppingCartIcon = ShoppingCart;
 
   @Input() product!: ProductModel;
 
diff --git a/src/app/features/product/product.html b/src/app/features/product/product.html
index 67121c9..c94f682 100644
--- a/src/app/features/product/product.html
+++ b/src/app/features/product/product.html
@@ -4,7 +4,7 @@
   <p class="text-3xl text-gray-700 font-sans">Our Product</p>
 </section>
 
-<section class="mt-4 grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-6 gap-4 wrapper">
+<section class="mt-10 grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-5 gap-4 wrapper">
   @for (product of products(); track product) {
   <app-product-card [product]="product" />
   }
diff --git a/src/app/features/product/show-product/show-product.html b/src/app/features/product/show-product/show-product.html
index 8ccf6be..c90e589 100644
--- a/src/app/features/product/show-product/show-product.html
+++ b/src/app/features/product/show-product/show-product.html
@@ -23,15 +23,15 @@
           />
           <button
             (click)="prevImage()"
-            class="absolute top-45 left-2 p-2! rounded-full! btn btn-ghost"
+            class="absolute top-45 left-2 p-2! rounded-full! btn btn-ghost backdrop-blur-xs"
           >
-            <lucide-angular [img]="ArrowLeftIcon" class="w-4 h-4" />
+            <lucide-angular [img]="ArrowLeftIcon" class="w-4 h-4 text-gray-200" />
           </button>
           <button
             (click)="nextImage()"
-            class="absolute top-45 right-2 p-2! rounded-full! btn btn-ghost"
+            class="absolute top-45 right-2 p-2! rounded-full! btn btn-ghost backdrop-blur-xs"
           >
-            <lucide-angular [img]="ArrowRightIcon" class="w-4 h-4" />
+            <lucide-angular [img]="ArrowRightIcon" class="w-4 h-4 text-gray-200" />
           </button>
         </div>
 
@@ -104,7 +104,7 @@
             <input
               type="text"
               value="1"
-              class="w-12 text-center btn btn-ghost rounded-none! border-x-0!"
+              class="w-12 text-center border-y border-gray-300"
               readonly
             />
             <button class="px-4 py-2 btn btn-ghost rounded-l-none!">+</button>
diff --git a/src/styles.css b/src/styles.css
index 4ecbfd4..0f9fd15 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -25,15 +25,15 @@ body {
 }
 
 .btn-ghost {
-  @apply text-gray-600 border border-gray-300 hover:bg-gray-800 hover:text-gray-200;
+  @apply text-gray-600 border border-b-3 border-gray-300 hover:bg-gray-200/70 hover:text-gray-700;
 }
 
 .btn-black {
-  @apply text-gray-100 bg-gray-800 border border-gray-800 hover:bg-gray-200 hover:text-gray-800 hover:border-gray-400;
+  @apply text-gray-100 bg-gray-800 border border-b-3 border-gray-800 hover:bg-gray-200 hover:text-gray-800 hover:border-gray-400;
 }
 
 .btn-primary {
-  @apply text-gray-100 bg-blue-700 border border-blue-800 hover:bg-blue-200 hover:text-blue-800 hover:border-blue-400;
+  @apply text-blue-100 bg-blue-600 border border-b-3 border-blue-900 hover:bg-blue-700;
 }
 
 .card {
@@ -70,7 +70,7 @@ body {
 }
 
 .dropdown li {
-  @apply rounded-lg hover:bg-linear-to-r hover:from-teal-300 hover:to-transparent px-5 py-1;
+  @apply rounded-lg hover:bg-linear-to-r hover:bg-gray-100 px-5 py-1;
 }
 
 h1,