diff --git a/src/app/app.config.ts b/src/app/app.config.ts
index 5003afb..4e43668 100644
--- a/src/app/app.config.ts
+++ b/src/app/app.config.ts
@@ -1,9 +1,9 @@
-import { ApplicationConfig, provideBrowserGlobalErrorListeners } from '@angular/core';
-import { provideRouter, withComponentInputBinding } from '@angular/router';
+import { ApplicationConfig, provideBrowserGlobalErrorListeners } from "@angular/core";
+import { provideRouter, withComponentInputBinding } from "@angular/router";
 
-import { routes } from './app.routes';
-import { provideHttpClient, withFetch, withInterceptors } from '@angular/common/http';
-import { csrfInterceptor } from './core/interceptors/csrf-interceptor';
+import { routes } from "./app.routes";
+import { provideHttpClient, withFetch, withInterceptors } from "@angular/common/http";
+import { csrfInterceptor } from "./core/interceptors/csrf-interceptor";
 
 export const appConfig: ApplicationConfig = {
   providers: [
diff --git a/src/app/features/product/show-product/show-product.html b/src/app/features/product/show-product/show-product.html
index cd333a5..8ccf6be 100644
--- a/src/app/features/product/show-product/show-product.html
+++ b/src/app/features/product/show-product/show-product.html
@@ -16,11 +16,11 @@
             alt="Product Image"
             class="w-full h-full object-cover object-center rounded-lg"
           />
-          <button
-            class="absolute top-2 right-2 p-2! rounded-full! btn btn-ghost border-none! bg-gray-50"
-          >
-            <lucide-angular [img]="HeartIcon" class="w-4 h-4" />
-          </button>
+          <app-favorite-button
+            [productId]="product()!.id"
+            class="absolute top-5 right-5"
+            [isFavorite]="product()!.isFavorite"
+          />
           <button
             (click)="prevImage()"
             class="absolute top-45 left-2 p-2! rounded-full! btn btn-ghost"
@@ -37,7 +37,6 @@
 
         <div class="grid grid-cols-4 gap-3">
           @for (image of product()?.productImages; track image) {
-
           <button
             class="card p-2! aspect-square cursor-pointer"
             (click)="this.activeImageIndex.set($index)"
@@ -98,16 +97,6 @@
               <span class="text-3xl font-bold text-gray-900">Rs.{{ product()?.listPrice }}</span>
               <span class="text-xs text-gray-400 ml-1"></span>
             </div>
-            <button class="text-gray-400 hover:text-red-500">
-              <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="1.5"
-                  d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
-                ></path>
-              </svg>
-            </button>
           </div>
 
           <div class="flex mb-6 overflow-hidden">
diff --git a/src/app/features/product/show-product/show-product.ts b/src/app/features/product/show-product/show-product.ts
index 3581d38..dd02023 100644
--- a/src/app/features/product/show-product/show-product.ts
+++ b/src/app/features/product/show-product/show-product.ts
@@ -2,10 +2,11 @@ import { Component, inject, Input, signal, WritableSignal } from "@angular/core"
 import { ProductModel } from "../../../core/models/product.model";
 import { ProductService } from "../services/product-service";
 import { LucideAngularModule, Heart, ArrowRight, ArrowLeft } from "lucide-angular";
+import { FavoriteButton } from "../../../src/app/shared/components/favorite-button/favorite-button";
 
 @Component({
   selector: "app-show-product",
-  imports: [LucideAngularModule],
+  imports: [LucideAngularModule, FavoriteButton],
   templateUrl: "./show-product.html",
   styleUrl: "./show-product.css",
 })