diff --git a/apps/backend/index.ts b/apps/backend/index.ts
index 313b4ea..cb0fc92 100644
--- a/apps/backend/index.ts
+++ b/apps/backend/index.ts
@@ -276,6 +276,89 @@ app.get("/models", authMiddleware, async (req, res) => {
   });
 });
 
+app.post("/toggle-like", authMiddleware, async (req, res) => {
+  try {
+    const { imageId } = req.body;
+
+    if (!imageId) {
+      res.status(400).json({
+        success: false,
+        error: "Image ID is required",
+      });
+      return;
+    }
+
+    const image = await prismaClient.outputImages.findUnique({
+      where: { id: imageId, userId: req.userId },
+    });
+
+    if (!image) {
+      res.status(404).json({
+        success: false,
+        error: "Image not found",
+      });
+      return;
+    }
+
+    const updatedImage = await prismaClient.outputImages.update({
+      where: { id: imageId },
+      data: {
+        likedImage: image.likedImage === "like" ? "unlike" : "like",
+      },
+    });
+
+    res.json({
+      success: true,
+      message: `Image ${updatedImage.likedImage === "like" ? "liked" : "unliked"}`,
+      likedStatus: updatedImage.likedImage,
+    });
+  } catch (error) {
+    console.error("Error toggling like:", error);
+    res.status(500).json({
+      success: false,
+      error: "Failed to toggle like status",
+    });
+  }
+});
+
+app.get("/liked/bulk", authMiddleware, async (req, res) => {
+  try {
+    const likedImages = await prismaClient.outputImages.findMany({
+      where: {
+        userId: req.userId,
+        likedImage: 'like'
+      },
+      select: {
+        id: true,
+        imageUrl: true,
+        modelId: true,
+        prompt: true,
+        likedImage:true,
+        createdAt: true,
+        model: {
+          select: {
+            name: true
+          }
+        }
+      },
+      orderBy: {
+        createdAt: 'desc'
+      }
+    });
+
+    res.json({
+      success: true,
+      images:likedImages
+    });
+  } catch (error) {
+    console.error("Error fetching liked images:", error);
+    res.status(500).json({
+      success: false,
+      error: "Failed to fetch liked images"
+    });
+  }
+});
+
 app.post("/fal-ai/webhook/train", async (req, res) => {
   console.log("====================Received training webhook====================");
   console.log("Received training webhook:", req.body);
diff --git a/apps/web/app/dashboard/page.tsx b/apps/web/app/dashboard/page.tsx
index 3141987..4c8fc58 100644
--- a/apps/web/app/dashboard/page.tsx
+++ b/apps/web/app/dashboard/page.tsx
@@ -5,6 +5,7 @@ import { Packs } from "@/components/Packs";
 import { Camera } from "@/components/Camera";
 import { redirect } from "next/navigation";
 import { auth } from "@clerk/nextjs/server";
+import Saved from "@/components/Saved";
 export const dynamic = "force-dynamic";
 
 export default async function DashboardPage() {
@@ -43,6 +44,12 @@ export default async function DashboardPage() {
             >
               Train<span className="md:block hidden pl-1">Model</span>
             </TabsTrigger>
+            <TabsTrigger
+              value="saved"
+              className="data-[state=active]:bg-pink-500/70 backdrop-blur-sm data-[state=active]:text-pink-50 cursor-pointer px-3 py-1.5"
+            >
+              Saved
+            </TabsTrigger>
           </TabsList>
 
           <div className="mt-8 bg-card rounded-lg">
@@ -70,6 +77,12 @@ export default async function DashboardPage() {
             >
               <Train />
             </TabsContent>
+            <TabsContent
+              value="saved"
+              className="mt-0 focus-visible:outline-none"
+            >
+              <Saved />
+            </TabsContent>
           </div>
         </Tabs>
       </div>
diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx
index bf5c6db..1acd4ea 100644
--- a/apps/web/app/layout.tsx
+++ b/apps/web/app/layout.tsx
@@ -5,6 +5,7 @@ import { Appbar } from "@/components/Appbar";
 import { Providers } from "@/components/providers/Providers";
 import { Footer } from "@/components/Footer";
 import Script from "next/script";
+import { Toaster } from "@/components/ui/sonner"
 
 const geistSans = localFont({
   src: "./fonts/GeistVF.woff",
@@ -44,6 +45,7 @@ export default function RootLayout({
             <Appbar />
             <main className="flex-1">{children}</main>
             <Footer />
+            <Toaster position="bottom-right" richColors closeButton />
           </div>
         </Providers>
       </body>
diff --git a/apps/web/components/Camera.tsx b/apps/web/components/Camera.tsx
index 47110d0..efe84a0 100644
--- a/apps/web/components/Camera.tsx
+++ b/apps/web/components/Camera.tsx
@@ -8,8 +8,8 @@ import { ImageCard } from "./ImageCard";
 import { motion } from "framer-motion";
 import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
 import { Button } from "./ui/button";
-import { Download, ChevronLeft, ChevronRight } from "lucide-react";
-import Image from "next/image";
+import { Download, ChevronLeft, ChevronRight, Copy } from "lucide-react";
+import { toast } from "sonner";
 
 export interface TImage {
   id: string;
@@ -17,6 +17,7 @@ export interface TImage {
   modelId: string;
   userId: string;
   prompt: string;
+  likedImage: string;
   falAiRequestId: string;
   status: string;
   createdAt: string;
@@ -28,19 +29,8 @@ export function Camera() {
   const [imagesLoading, setImagesLoading] = useState(true);
   const [selectedImage, setSelectedImage] = useState<TImage | null>(null);
   const [currentImageIndex, setCurrentImageIndex] = useState<number>(0);
-  const [isDownloading, setIsDownloading] = useState(false);
   const { getToken } = useAuth();
 
-  const formatDate = (dateString: string) => {
-    return new Date(dateString).toLocaleString("en-US", {
-      year: "numeric",
-      month: "long",
-      day: "numeric",
-      hour: "2-digit",
-      minute: "2-digit",
-    });
-  };
-
   const fetchImages = async () => {
     try {
       const token = await getToken();
@@ -55,46 +45,84 @@ export function Camera() {
     }
   };
 
-  useEffect(() => {
-    fetchImages();
-  }, []);
-
-  const handleImageClick = (image: TImage, index: number) => {
-    setSelectedImage(image);
-    setCurrentImageIndex(index);
+  const togglelike = async (id: string) => {
+    try {
+      setImagesLoading(true);
+      const token = await getToken();
+      const response = await axios.post(
+        `${BACKEND_URL}/toggle-like`,
+        { imageId: id },
+        {
+          headers: { Authorization: `Bearer ${token}` },
+        }
+      );
+      toast(`${response.data.message} Successfully`);
+      await fetchImages();
+      setImagesLoading(false);
+    } catch (error) {
+      console.error("Failed to Save image:", error);
+    }
   };
 
-  const handleDownload = async (imageUrl: string, imageName: string) => {
-    if (!imageUrl) return;
+  const copytoclipboard = async (prompt: string) => {
+    try {
+      await navigator.clipboard.writeText(prompt);
+      toast("Prompt Copied Successfully");
+    } catch (e) {
+      console.error("Failed to copy prompt: ", e);
+    }
+  };
 
+  const downloadImage = async (imageUrl: string, fileName: string = "image") => {
     try {
-      setIsDownloading(true);
       const response = await fetch(imageUrl);
+      if (!response.ok) throw new Error(`Failed to fetch: ${response.status}`);
       const blob = await response.blob();
       const url = window.URL.createObjectURL(blob);
-      const a = document.createElement("a");
-      a.href = url;
-      a.download = `${imageName}.png`;
-      document.body.appendChild(a);
-      a.click();
-      window.URL.revokeObjectURL(url);
-      document.body.removeChild(a);
+      const link = document.createElement("a");
+      link.href = url;
+      const extension = "png";
+
+      link.download = `${fileName.replace(/[^a-z0-9]/gi, "_")}.${extension}`;
+      document.body.appendChild(link);
+      link.click();
+      toast("Image Downloaded Successfully")
+      setTimeout(() => {
+        document.body.removeChild(link);
+        window.URL.revokeObjectURL(url);
+      }, 100);
     } catch (error) {
-      console.error("Error downloading image:", error);
-    } finally {
-      setIsDownloading(false);
+      console.error("Download failed:", error);
+      alert("Download failed. Please try again.");
     }
   };
 
-  const handleNavigation = (direction: "previous" | "next") => {
-    const newIndex =
-      direction === "previous" ? currentImageIndex - 1 : currentImageIndex + 1;
-    if (newIndex >= 0 && newIndex < images.length) {
+  const handleImageClick = (image: TImage) => {
+    const index = images.findIndex((img) => img.id === image.id);
+    setCurrentImageIndex(index);
+    setSelectedImage(image);
+  };
+
+  const handlePrev = () => {
+    if (currentImageIndex > 0) {
+      const newIndex = currentImageIndex - 1;
       setCurrentImageIndex(newIndex);
-      setSelectedImage(images[newIndex] || null);
+      setSelectedImage(images[newIndex] ?? null);
     }
   };
 
+  const handleNext = () => {
+    if (currentImageIndex < images.length - 1) {
+      const newIndex = currentImageIndex + 1;
+      setCurrentImageIndex(newIndex);
+      setSelectedImage(images[newIndex] ?? null);
+    }
+  };
+
+  useEffect(() => {
+    fetchImages();
+  }, []);
+
   return (
     <div className="space-y-4">
       <div className="flex items-center justify-between">
@@ -105,7 +133,7 @@ export function Camera() {
       </div>
 
       <motion.div
-        className="columns-1 md:columns-3 lg:columns-3 gap-4"
+        className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4"
         initial={{ opacity: 0, y: 20 }}
         animate={{ opacity: 1, y: 0 }}
         transition={{ duration: 0.5 }}
@@ -119,18 +147,22 @@ export function Camera() {
             ))
           : images.map((image, index) => (
               <div
-                key={image.id +index}
+                key={image.id + index}
                 className="cursor-pointer transition-transform mb-4 hover:scale-[1.02]"
-                onClick={() => handleImageClick(image, index)}
+                onClick={() => handleImageClick(image)}
               >
                 <ImageCard
                   id={image.id}
                   status={image.status}
                   imageUrl={image.imageUrl}
-                  onClick={() => handleImageClick(image, index)}
+                  onClickSave={() => togglelike(image.id)}
+                  onCopyClick={() => copytoclipboard(image.prompt)}
+                  onDownloadClick={() => downloadImage(image.imageUrl)}
+                  onImageClick={() => handleImageClick(image)}
                   modelId={image.modelId}
                   userId={image.userId}
                   prompt={image.prompt}
+                  likedImage={image.likedImage}
                   falAiRequestId={image.falAiRequestId}
                   createdAt={image.createdAt}
                   updatedAt={image.updatedAt}
@@ -151,82 +183,102 @@ export function Camera() {
         </motion.div>
       )}
 
-      {selectedImage && (
-        <Dialog
-          open={!!selectedImage}
-          onOpenChange={(open) => !open && setSelectedImage(null)}
-        >
-          <DialogContent className="max-w-5xl p-10 overflow-hidden bg-black/90 backdrop-blur-xl">
-            <DialogTitle className="sr-only">Image Preview</DialogTitle>
-            <motion.div
-              initial={{ opacity: 0 }}
-              animate={{ opacity: 1 }}
-              exit={{ opacity: 0 }}
-              transition={{ duration: 0.2 }}
-              className="relative w-full h-full flex flex-col items-center justify-center"
-            >
-              <div className="absolute top-4 left-4 right-4 text-white">
-                <p className="text-lg font-medium truncate">
-                  {selectedImage?.prompt}
-                </p>
-                <p className="text-sm">{formatDate(selectedImage.createdAt)}</p>
-              </div>
+      <Dialog
+        open={!!selectedImage}
+        onOpenChange={(open) => {
+          if (!open) setSelectedImage(null);
+        }}
+      >
+        <DialogContent className="max-w-6xl w-[60vw] h-[90vh] p-0 overflow-hidden">
+          {selectedImage && (
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-0 h-full">
+              <div className="relative h-full w-full bg-transparent flex items-center justify-center">
+                <div className="w-full h-full relative">
+                  {/* Navigation Arrows */}
+                  <button
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      handlePrev();
+                    }}
+                    disabled={currentImageIndex === 0}
+                    className={`absolute left-4 top-1/2 -translate-y-1/2 z-10 p-2 rounded-full bg-black/50 hover:bg-black/70 text-white ${
+                      currentImageIndex === 0 ? "opacity-50 cursor-not-allowed" : ""
+                    }`}
+                  >
+                    <ChevronLeft className="h-6 w-6" />
+                  </button>
 
-              <div className="relative aspect-square w-full">
-                <Image
-                  src={selectedImage.imageUrl}
-                  alt={selectedImage.prompt || "Generated image"}
-                  fill
-                  className="object-contain"
-                  priority
-                  quality={100}
-                  sizes="(max-width: 768px) 85vw, (max-width: 1200px) 80vw, 1200px"
-                />
+                  <img
+                    src={selectedImage.imageUrl}
+                    alt={selectedImage.prompt}
+                    className="object-contain w-full h-full max-h-[90vh]"
+                    loading="lazy"
+                  />
+                  
+                  <button
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      handleNext();
+                    }}
+                    disabled={currentImageIndex === images.length - 1}
+                    className={`absolute right-4 top-1/2 -translate-y-1/2 z-10 p-2 rounded-full bg-black/50 hover:bg-black/70 text-white ${
+                      currentImageIndex === images.length - 1 ? "opacity-50 cursor-not-allowed" : ""
+                    }`}
+                  >
+                    <ChevronRight className="h-6 w-6" />
+                  </button>
+                  
+                  <div className="absolute bottom-4 left-1/2 -translate-x-1/2 bg-black/50 text-white px-3 py-1 rounded-full text-sm">
+                    {currentImageIndex + 1} / {images.length}
+                  </div>
+                </div>
               </div>
 
-              <div className="absolute bottom-4 left-0 right-0 flex justify-center">
-                <Button
-                  variant="default"
-                  onClick={() =>
-                    handleDownload(
-                      selectedImage.imageUrl,
-                      selectedImage.prompt || "generated-image"
-                    )
-                  }
-                  disabled={isDownloading || !selectedImage.imageUrl}
-                  className="relative z-10 hover:cursor-pointer"
-                >
-                  <Download className="h-4 w-4 mr-2" />
-                  Download Image
-                </Button>
-              </div>
+              <div className="p-6 space-y-6 overflow-y-auto">
+                <DialogTitle className="text-xl font-semibold">
+                  Image Details
+                </DialogTitle>
+
+                <div className="space-y-2">
+                  <h3 className="text-sm font-medium text-muted-foreground">
+                    Prompt
+                  </h3>
+                  <p className="text-sm">{selectedImage.prompt}</p>
+                </div>
+
+                <div className="space-y-2">
+                  <h3 className="text-sm font-medium text-muted-foreground">
+                    Created At
+                  </h3>
+                  <p className="text-sm">
+                    {new Date(selectedImage.createdAt).toLocaleString()}
+                  </p>
+                </div>
 
-              <div className="absolute inset-0 flex items-center justify-between p-4">
-                {currentImageIndex > 0 && (
+                <div className="flex flex-wrap gap-2 pt-4">
                   <Button
-                    variant="ghost"
-                    size="icon"
-                    onClick={() => handleNavigation("previous")}
-                    className="h-10 w-10 rounded-full bg-black/50 hover:bg-black/70 hover:cursor-pointer"
+                    variant="outline"
+                    className="gap-2"
+                    onClick={() => downloadImage(selectedImage.imageUrl)}
                   >
-                    <ChevronLeft className="h-6 w-6" />
+                    <Download className="h-4 w-4" />
+                    Download
                   </Button>
-                )}
-                {currentImageIndex < images.length - 1 && (
                   <Button
-                    variant="ghost"
-                    size="icon"
-                    onClick={() => handleNavigation("next")}
-                    className="h-10 w-10 rounded-full bg-black/50 hover:bg-black/70 hover:cursor-pointer"
+                    variant="outline"
+                    className="gap-2"
+                    onClick={() => copytoclipboard(selectedImage.prompt)}
                   >
-                    <ChevronRight className="h-6 w-6" />
+                    <Copy className="h-4 w-4" />
+                    Copy Prompt
                   </Button>
-                )}
+
+                </div>
               </div>
-            </motion.div>
-          </DialogContent>
-        </Dialog>
-      )}
+            </div>
+          )}
+        </DialogContent>
+      </Dialog>
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/apps/web/components/ImageCard.tsx b/apps/web/components/ImageCard.tsx
index 66b2734..b8257c0 100644
--- a/apps/web/components/ImageCard.tsx
+++ b/apps/web/components/ImageCard.tsx
@@ -1,16 +1,48 @@
-import { ArrowDown } from "lucide-react";
-import { Skeleton } from "./ui/skeleton";
+"use client"
+
+import { Heart, Copy, ArrowDownToLine } from "lucide-react";
 import Image from "next/image";
+import { useEffect, useState } from "react";
+import { Button } from "./ui/button";
 import { TImage } from "./Camera";
 
 interface ImageCardProps extends TImage {
-  onClick: () => void;
+  onClickSave: () => void;
+  onCopyClick: () => void;
+  onDownloadClick: () => void;
+  onImageClick: () => void;
 }
-export function ImageCard({ id, status, imageUrl, onClick ,prompt}: ImageCardProps) {
+
+export function ImageCard({
+  id,
+  status,
+  imageUrl,
+  likedImage,
+  prompt,
+  onClickSave,
+  onCopyClick,
+  onDownloadClick,
+  onImageClick
+}: ImageCardProps) {
+  const [liked, setLiked] = useState(likedImage);
   if (!imageUrl) return null;
 
+  useEffect(() => {
+    if (likedImage !== undefined && likedImage !== null) {
+      setLiked(likedImage);
+    }
+  }, [likedImage]);
+
+  const handleButtonClick = (e: React.MouseEvent, callback: () => void) => {
+    e.stopPropagation();
+    callback();
+  };
+  
   return (
-    <div onClick={onClick} className="group relative rounded-none overflow-hidden max-w-[400px] cursor-zoom-in">
+    <div
+      className="group relative rounded-none overflow-hidden max-w-[300px] cursor-zoom-in"
+      onClick={onImageClick}
+    >
       <div className="flex gap-4 min-h-32">
         <Image
           key={id}
@@ -22,21 +54,37 @@ export function ImageCard({ id, status, imageUrl, onClick ,prompt}: ImageCardPro
           priority
         />
       </div>
-      <div className="opacity-0 absolute transition-normal duration-200 group-hover:opacity-100 flex items-center justify-between bottom-0 left-0 right-0 p-4 bg-opacity-70 text-white line-clamp-1 ">
-        <p>{prompt}</p>
-        <span className="flex items-center justify-between bg-primary-foreground text-muted-foreground rounded-md px-2 py-1">
-          <ArrowDown />
-        </span>
-      </div>
-    </div>
-  );
-}
 
-export function ImageCardSkeleton() {
-  return (
-    <div className="rounded-none mb-4 overflow-hidden max-w-[400px] cursor-pointer">
-      <div className="flex gap-4 min-h-32">
-        <Skeleton className={`w-full h-[300px] rounded-none`} />
+      <div
+        className={`absolute bottom-4 left-4 transition-opacity flex gap-[1vw] duration-300 ${
+          liked == "liked" ? "opacity-100" : "opacity-0 group-hover:opacity-100"
+        }`}
+      >
+        <Button
+          variant={"link"}
+          onClick={(e) => handleButtonClick(e, onClickSave)}
+          className={`w-[3vw] h-[6vh] border rounded-full transition-all
+            ${liked == "like"
+              ? "bg-red-500 text-white border-red-500"
+              : "bg-transparent text-white border-white"}
+          `}
+        >
+          <Heart fill={liked ? "white" : "none"} />
+        </Button>
+        <Button
+          variant={"secondary"}
+          onClick={(e) => handleButtonClick(e, onCopyClick)}
+          className={`w-[3vw] h-[6vh] border rounded-full transition-all bg-transparent text-white border-white`}
+        >
+          <Copy className="h-4 w-4" />
+        </Button>
+        <Button
+          variant={"secondary"}
+          onClick={(e) => handleButtonClick(e, onDownloadClick)}
+          className={`w-[3vw] h-[6vh] border rounded-full transition-all bg-transparent text-white border-white`}
+        >
+          <ArrowDownToLine className="h-4 w-4" />
+        </Button>
       </div>
     </div>
   );
diff --git a/apps/web/components/PackCard.tsx b/apps/web/components/PackCard.tsx
index 6cf652f..916b908 100644
--- a/apps/web/components/PackCard.tsx
+++ b/apps/web/components/PackCard.tsx
@@ -92,16 +92,15 @@ export function PackCard(props: TPack & { selectedModelId: string }) {
                   Autoplay({
                     delay: 4000,
                   }),
-                ]} className="w-full">
+                ]} className="w-[25vw]">
                   <CarouselContent>
                     {images.map((imageUrl, index) => (
                       <CarouselItem key={index}>
-                        <div className="relative aspect-square">
-                          <Image
+                        <div className="relative aspect-square flex items-center justify-center">
+                          <img
                             src={imageUrl!}
                             alt={`${props.name} preview ${index + 1}`}
-                            fill
-                            className="object-cover"
+                            className="object-fill"
                           />
                         </div>
                       </CarouselItem>
diff --git a/apps/web/components/Saved.tsx b/apps/web/components/Saved.tsx
new file mode 100644
index 0000000..b1a274f
--- /dev/null
+++ b/apps/web/components/Saved.tsx
@@ -0,0 +1,273 @@
+"use client";
+
+import { useAuth } from "@clerk/nextjs";
+import { BACKEND_URL } from "@/app/config";
+import axios from "axios";
+import { useEffect, useState } from "react";
+import SavedImageCard from "./SavedImageCard";
+import { motion } from "framer-motion";
+import { toast } from "sonner"
+import { ChevronLeft, ChevronRight, Copy, Download } from "lucide-react";
+import { Button } from "./ui/button";
+import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
+
+export interface savedimageprops {
+  id: string;
+  imageUrl: string;
+  modelId: string;
+  userId: string;
+  likedImage:string;
+  prompt: string;
+  createdAt: string;
+}
+
+function Saved() {
+    const [images, setImages] = useState<savedimageprops[]>([]);
+    const [imagesLoading, setImagesLoading] = useState(true);
+    const [selectedImage, setSelectedImage] = useState<savedimageprops | null>(null);
+    const [currentImageIndex, setCurrentImageIndex] = useState<number>(0);
+    const { getToken } = useAuth();
+
+  const fetchImages = async () => {
+    try {
+      const token = await getToken();
+      const response = await axios.get(`${BACKEND_URL}/liked/bulk`, {
+        headers: { Authorization: `Bearer ${token}` },
+      });
+      setImages(response.data.images);
+      setImagesLoading(false);
+    } catch (error) {
+      console.error("Failed to fetch images:", error);
+      setImagesLoading(false);
+    }
+  };
+
+  const removeFromSaved = async (id:string) => {
+    try {
+        setImagesLoading(true);
+        const token = await getToken();
+        const response = await axios.post(`${BACKEND_URL}/toggle-like`,{ imageId : id }, {
+            headers: { Authorization: `Bearer ${token}` },
+        });
+        toast(`${response.data.message} Successfully`)
+        await fetchImages();
+        setImagesLoading(false);
+        } catch (error) {
+            console.error("Failed to remove saved image:", error);
+        }
+}
+
+const copyToClipBoard = async (prompt:string) => {
+  try {
+    await navigator.clipboard.writeText(prompt);
+    toast("Prompt Copied Successfully")
+  }catch(e) {
+    console.error('Failed to copy prompt: ', e);
+  }
+}
+
+const downloadImage = async (imageUrl: string, fileName: string = "image") => {
+  try {
+    const response = await fetch(imageUrl);
+    if (!response.ok) throw new Error(`Failed to fetch: ${response.status}`);
+    const blob = await response.blob();
+    const url = window.URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+    const extension = 'png';
+    
+    link.download = `${fileName.replace(/[^a-z0-9]/gi, '_')}.${extension}`;
+    document.body.appendChild(link);
+    toast("Image Downloaded Successfully")
+    link.click();
+    setTimeout(() => {
+      document.body.removeChild(link);
+      window.URL.revokeObjectURL(url);
+    }, 100);
+    
+  } catch (error) {
+    console.error('Download failed:', error);
+    alert('Download failed. Please try again.');
+  }
+};
+
+  const handleImageClick = (image: savedimageprops) => {
+    const index = images.findIndex((img) => img.id === image.id);
+    setCurrentImageIndex(index);
+    setSelectedImage(image);
+  };
+
+  const handlePrev = () => {
+    if (currentImageIndex > 0) {
+      const newIndex = currentImageIndex - 1;
+      setCurrentImageIndex(newIndex);
+      setSelectedImage(images[newIndex] ?? null);
+    }
+  };
+
+  const handleNext = () => {
+    if (currentImageIndex < images.length - 1) {
+      const newIndex = currentImageIndex + 1;
+      setCurrentImageIndex(newIndex);
+      setSelectedImage(images[newIndex] ?? null);
+    }
+  };
+
+  useEffect(() => {
+    fetchImages()
+  },[])
+
+  return (
+    <div className="space-y-4" >
+        <div className="flex items-center justify-between">
+          <h2 className="text-2xl font-semibold">Saved Gallery</h2>
+          <span className="text-xs select-none bg-secondary/40 font-semibold border border-secondary text-muted-foreground px-2 py-1 rounded-full">
+            {images.length} images
+          </span>
+        </div>
+        <motion.div
+            className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4"
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.5 }}
+        >
+            {imagesLoading
+              ? [...Array(8)].map((_, i) => (
+                  <motion.div
+                    key={i}
+                    className="bg-neutral-300 h-48 rounded-lg animate-pulse"
+                  />
+                ))
+              :images.map(image => (
+                  <div
+                    key={image.id}
+                    className="cursor-pointer transition-transform mb-4 hover:scale-[1.02]"
+                  >
+                      <SavedImageCard
+                        id={image.id}
+                        imageUrl={image.imageUrl}
+                        modelId={image.modelId}
+                        likedImage={image.likedImage}
+                        prompt={image.prompt}
+                        userId={image.userId}
+                        onClick={ () => removeFromSaved(image.id)}
+                        onCopyClick = { () => copyToClipBoard(image.prompt) }
+                        onDownloadClick = { () => downloadImage(image.imageUrl) }
+                        onImageClick={() => handleImageClick(image)}
+                        createdAt={image.createdAt}
+                        />
+                  </div>
+              ))}
+        </motion.div>
+
+        {!imagesLoading && images.length === 0 && (
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          className="text-center py-12"
+        >
+          <p className="text-muted-foreground">
+            No images yet. Start by generating some!
+          </p>
+        </motion.div>
+      )}
+
+<Dialog
+        open={!!selectedImage}
+        onOpenChange={(open) => {
+          if (!open) setSelectedImage(null);
+        }}
+      >
+        <DialogContent className="max-w-6xl w-[60vw] h-[90vh] p-0 overflow-hidden">
+          {selectedImage && (
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-0 h-full">
+              <div className="relative h-full w-full bg-transparent flex items-center justify-center">
+                <div className="w-full h-full relative">
+                  <button
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      handlePrev();
+                    }}
+                    disabled={currentImageIndex === 0}
+                    className={`absolute left-4 top-1/2 -translate-y-1/2 z-10 p-2 rounded-full bg-black/50 hover:bg-black/70 text-white ${
+                      currentImageIndex === 0 ? "opacity-50 cursor-not-allowed" : ""
+                    }`}
+                  >
+                    <ChevronLeft className="h-6 w-6" />
+                  </button>
+                  
+                  <img
+                    src={selectedImage.imageUrl}
+                    alt={selectedImage.prompt}
+                    className="object-contain w-full h-full max-h-[90vh]"
+                    loading="lazy"
+                  />
+                  
+                  <button
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      handleNext();
+                    }}
+                    disabled={currentImageIndex === images.length - 1}
+                    className={`absolute right-4 top-1/2 -translate-y-1/2 z-10 p-2 rounded-full bg-black/50 hover:bg-black/70 text-white ${
+                      currentImageIndex === images.length - 1 ? "opacity-50 cursor-not-allowed" : ""
+                    }`}
+                  >
+                    <ChevronRight className="h-6 w-6" />
+                  </button>
+                  
+                  <div className="absolute bottom-4 left-1/2 -translate-x-1/2 bg-black/50 text-white px-3 py-1 rounded-full text-sm">
+                    {currentImageIndex + 1} / {images.length}
+                  </div>
+                </div>
+              </div>
+
+              <div className="p-6 space-y-6 overflow-y-auto">
+                <DialogTitle className="text-xl font-semibold">
+                  Image Details
+                </DialogTitle>
+
+                <div className="space-y-2">
+                  <h3 className="text-sm font-medium text-muted-foreground">
+                    Prompt
+                  </h3>
+                  <p className="text-sm">{selectedImage.prompt}</p>
+                </div>
+
+                <div className="space-y-2">
+                  <h3 className="text-sm font-medium text-muted-foreground">
+                    Created At
+                  </h3>
+                  <p className="text-sm">
+                    {new Date(selectedImage.createdAt).toLocaleString()}
+                  </p>
+                </div>
+
+                <div className="flex flex-wrap gap-2 pt-4">
+                  <Button
+                    variant="outline"
+                    className="gap-2"
+                    onClick={() => downloadImage(selectedImage.imageUrl)}
+                  >
+                    <Download className="h-4 w-4" />
+                    Download
+                  </Button>
+                  <Button
+                    variant="outline"
+                    className="gap-2"
+                    onClick={() => copyToClipBoard(selectedImage.prompt)}
+                  >
+                    <Copy className="h-4 w-4" />
+                    Copy Prompt
+                  </Button>
+                </div>
+              </div>
+            </div>
+          )}
+        </DialogContent>
+      </Dialog>
+    </div>
+  )
+}
+
+export default Saved
\ No newline at end of file
diff --git a/apps/web/components/SavedImageCard.tsx b/apps/web/components/SavedImageCard.tsx
new file mode 100644
index 0000000..c6d1e26
--- /dev/null
+++ b/apps/web/components/SavedImageCard.tsx
@@ -0,0 +1,69 @@
+
+import { savedimageprops } from './Saved'
+import Image from 'next/image';
+import { Button } from './ui/button';
+import { Copy, Heart , ArrowDownToLine } from 'lucide-react';
+
+interface savedimagecardprops extends savedimageprops {
+    onClick: () => void;
+    onCopyClick: () => void;
+    onDownloadClick: () => void;
+    onImageClick: () => void;
+}
+
+
+export default function SavedImageCard({ id , imageUrl , onClick , onCopyClick , onImageClick ,  onDownloadClick }:savedimagecardprops) {
+    
+
+    const handleButtonClick = (e: React.MouseEvent, callback: () => void) => {
+        e.stopPropagation();
+        callback();
+    };
+
+    return (
+        <div
+        className="group relative rounded-none overflow-hidden max-w-[300px] cursor-zoom-in"
+        onClick={onImageClick}
+        >
+            <div className="flex gap-4 min-h-32">
+                <Image
+                key={id}
+                src={imageUrl}
+                width={400}
+                height={500}
+                className="w-full"
+                priority
+                alt='image here'
+                />
+            </div>
+
+            <div
+                className={`absolute bottom-4 left-4 transition-opacity flex gap-[1vw] duration-300`}
+            >
+                <Button
+                    variant={"link"}
+                    onClick={(e) => handleButtonClick(e,onClick) }
+                    className={`w-[3vw] h-[6vh] border rounded-full transition-all bg-red-500 text-white border-red-500"`}
+                    >
+                    <Heart fill={"white"} />
+                </Button>
+                <Button
+                    variant={"secondary"}
+                    onClick={(e) => handleButtonClick(e, onCopyClick)}
+                    className={`w-[3vw] h-[6vh] border rounded-full transition-all bg-transparent text-white border-white
+                    `}
+                    >
+                    <Copy className="h-4 w-4" />
+                </Button>
+                <Button
+                    variant={"secondary"}
+                    onClick={(e) => handleButtonClick(e , onDownloadClick)}
+                    className={`w-[3vw] h-[6vh] border rounded-full transition-all bg-transparent text-white border-white
+                    `}
+                    >
+                    <ArrowDownToLine className="h-6 w-6 " />
+                </Button>
+            </div>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/apps/web/components/ui/sonner.tsx b/apps/web/components/ui/sonner.tsx
new file mode 100644
index 0000000..957524e
--- /dev/null
+++ b/apps/web/components/ui/sonner.tsx
@@ -0,0 +1,25 @@
+"use client"
+
+import { useTheme } from "next-themes"
+import { Toaster as Sonner, ToasterProps } from "sonner"
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      style={
+        {
+          "--normal-bg": "var(--popover)",
+          "--normal-text": "var(--popover-foreground)",
+          "--normal-border": "var(--border)",
+        } as React.CSSProperties
+      }
+      {...props}
+    />
+  )
+}
+
+export { Toaster }
diff --git a/apps/web/next.config.js b/apps/web/next.config.js
index c5bb7c7..2da4498 100644
--- a/apps/web/next.config.js
+++ b/apps/web/next.config.js
@@ -1,7 +1,8 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   images: {
-    remotePatterns: [
+    domains: ['static-alter1.vidnoz.com','photoai.com', 'r2-us-west.photoai.com'],
+    remotePatterns:  [
       {
         protocol: "https",
         hostname: "r2-us-west.photoai.com",
diff --git a/apps/web/package.json b/apps/web/package.json
index 2469cc0..355c677 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@clerk/themes": "^2.2.19",
+    "@heroui/card": "^2.2.16",
     "@radix-ui/react-dialog": "^1.1.6",
     "@radix-ui/react-dropdown-menu": "^2.1.6",
     "@radix-ui/react-label": "^2.1.2",
@@ -38,11 +39,12 @@
     "jszip": "^3.10.1",
     "lucide-react": "^0.475.0",
     "next": "^15.1.6",
-    "next-themes": "^0.4.4",
+    "next-themes": "^0.4.6",
     "postcss": "^8.5.2",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-hot-toast": "^2.5.1",
+    "sonner": "^2.0.3",
     "tailwind-merge": "^3.0.1",
     "tailwindcss": "^4.0.6",
     "tailwindcss-animate": "^1.0.7"
diff --git a/bun.lockb b/bun.lockb
index 90f6882..074774c 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/package.json b/package.json
index 93b2874..026685a 100644
--- a/package.json
+++ b/package.json
@@ -22,5 +22,8 @@
   "workspaces": [
     "apps/*",
     "packages/*"
-  ]
+  ],
+  "dependencies": {
+    "lucide": "^0.488.0"
+  }
 }
diff --git a/packages/db/prisma/migrations/20250415044920_added_liked_model/migration.sql b/packages/db/prisma/migrations/20250415044920_added_liked_model/migration.sql
new file mode 100644
index 0000000..e5291b7
--- /dev/null
+++ b/packages/db/prisma/migrations/20250415044920_added_liked_model/migration.sql
@@ -0,0 +1,16 @@
+-- CreateTable
+CREATE TABLE "LikedImages" (
+    "id" TEXT NOT NULL,
+    "imageUrl" TEXT NOT NULL DEFAULT '',
+    "modelId" TEXT NOT NULL,
+    "userId" TEXT NOT NULL,
+    "prompt" TEXT NOT NULL,
+    "outputImagesId" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "LikedImages_pkey" PRIMARY KEY ("id")
+);
+
+-- AddForeignKey
+ALTER TABLE "LikedImages" ADD CONSTRAINT "LikedImages_outputImagesId_fkey" FOREIGN KEY ("outputImagesId") REFERENCES "OutputImages"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
diff --git a/packages/db/prisma/migrations/20250415092457_modifiedliked_images/migration.sql b/packages/db/prisma/migrations/20250415092457_modifiedliked_images/migration.sql
new file mode 100644
index 0000000..0a61035
--- /dev/null
+++ b/packages/db/prisma/migrations/20250415092457_modifiedliked_images/migration.sql
@@ -0,0 +1,20 @@
+/*
+  Warnings:
+
+  - You are about to drop the column `outputImagesId` on the `LikedImages` table. All the data in the column will be lost.
+  - A unique constraint covering the columns `[outputImageId]` on the table `LikedImages` will be added. If there are existing duplicate values, this will fail.
+  - Added the required column `outputImageId` to the `LikedImages` table without a default value. This is not possible if the table is not empty.
+
+*/
+-- DropForeignKey
+ALTER TABLE "LikedImages" DROP CONSTRAINT "LikedImages_outputImagesId_fkey";
+
+-- AlterTable
+ALTER TABLE "LikedImages" DROP COLUMN "outputImagesId",
+ADD COLUMN     "outputImageId" TEXT NOT NULL;
+
+-- CreateIndex
+CREATE UNIQUE INDEX "LikedImages_outputImageId_key" ON "LikedImages"("outputImageId");
+
+-- AddForeignKey
+ALTER TABLE "LikedImages" ADD CONSTRAINT "LikedImages_outputImageId_fkey" FOREIGN KEY ("outputImageId") REFERENCES "OutputImages"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
diff --git a/packages/db/prisma/migrations/20250415094917_removed_likedmodel/migration.sql b/packages/db/prisma/migrations/20250415094917_removed_likedmodel/migration.sql
new file mode 100644
index 0000000..fb6bee0
--- /dev/null
+++ b/packages/db/prisma/migrations/20250415094917_removed_likedmodel/migration.sql
@@ -0,0 +1,17 @@
+/*
+  Warnings:
+
+  - You are about to drop the `LikedImages` table. If the table is not empty, all the data it contains will be lost.
+
+*/
+-- CreateEnum
+CREATE TYPE "OutputImageLiked" AS ENUM ('like', 'unlike');
+
+-- DropForeignKey
+ALTER TABLE "LikedImages" DROP CONSTRAINT "LikedImages_outputImageId_fkey";
+
+-- AlterTable
+ALTER TABLE "OutputImages" ADD COLUMN     "likedImage" "OutputImageLiked" NOT NULL DEFAULT 'unlike';
+
+-- DropTable
+DROP TABLE "LikedImages";
diff --git a/packages/db/prisma/schema.prisma b/packages/db/prisma/schema.prisma
index d420e79..b7472a6 100644
--- a/packages/db/prisma/schema.prisma
+++ b/packages/db/prisma/schema.prisma
@@ -34,7 +34,7 @@ model Model {
   name            String
   type            ModelTypeEnum
   age             Int
-  ethinicity      EthenecityEnum  
+  ethinicity      EthenecityEnum
   eyeColor        EyeColorEnum
   bald            Boolean
   userId          String
@@ -43,6 +43,7 @@ model Model {
   thumbnail       String?
   trainingStatus  ModelTrainingStatusEnum @default(Pending)
   outputImages    OutputImages[]
+  
   createdAt       DateTime   @default(now())
   updatedAt       DateTime   @updatedAt
   falAiRequestId  String?
@@ -57,6 +58,11 @@ enum OutputImageStatusEnum {
   Failed
 }
 
+enum OutputImageLiked {
+  like
+  unlike
+}
+
 model OutputImages {
   id        String  @id   @default(uuid())
   imageUrl  String  @default("")
@@ -66,6 +72,7 @@ model OutputImages {
   falAiRequestId    String?
   status    OutputImageStatusEnum   @default(Pending)
   model     Model   @relation(fields: [modelId], references: [id])
+  likedImage OutputImageLiked  @default(unlike)
   createdAt DateTime @default(now())
   updatedAt DateTime @updatedAt
   @@index([falAiRequestId])