diff --git a/src/app/(investment)/deals/[id]/displayImage.tsx b/src/app/(investment)/deals/[id]/displayImage.tsx
index 7e48f8b..b1b6557 100644
--- a/src/app/(investment)/deals/[id]/displayImage.tsx
+++ b/src/app/(investment)/deals/[id]/displayImage.tsx
@@ -10,26 +10,32 @@ import {
 } from "@/components/ui/dialog";
 import Image from "next/image";
 import { StaticImport } from "next/dist/shared/lib/get-img-props";
-import { it } from "node:test";
 
-const ImageModal = ({ item, width }: { item: { src: string | StaticImport; alt: string;} }, number ) => {
+interface ItemProps {
+  src: string | StaticImport;
+  alt: string;
+  width: number;
+  height: number;
+}
+
+const ImageModal = ({ src, alt, width, height }: ItemProps) => {
   return (
     <Dialog>
       <DialogTrigger asChild>
-        <Image src={item.src} alt={item.alt} width={item.width} height={item.height} className="rounded-lg basis-0" />
+        <Image src={src} alt={alt} width={width} height={height} className="rounded-lg basis-0" />
       </DialogTrigger>
-      <DialogContent className="">
+      <DialogContent>
         <DialogHeader>
           <DialogTitle>Image Preview</DialogTitle>
           <DialogDescription>Click outside to close the image preview.</DialogDescription>
         </DialogHeader>
-        <Image src={item.src} alt={item.alt} width={700} height={400} />
+        <Image src={src} alt={alt} width={700} height={400} />
         <DialogFooter />
       </DialogContent>
     </Dialog>
   );
 };
 
-export function DisplayFullImage({ item }: { item: { src: string | StaticImport; alt: string; width: number; height: number } }) {
-  return <ImageModal item={item} />;
+export function DisplayFullImage({ src, alt, width, height }: ItemProps) {
+  return <ImageModal src={src} alt={alt} width={width} height={height} />;
 }
diff --git a/src/app/(investment)/deals/[id]/page.tsx b/src/app/(investment)/deals/[id]/page.tsx
index 83b7779..cc6dc13 100644
--- a/src/app/(investment)/deals/[id]/page.tsx
+++ b/src/app/(investment)/deals/[id]/page.tsx
@@ -49,7 +49,6 @@ export default async function ProjectDealPage({ params }: { params: { id: number
     alt: `${projectData.project_name} Image`,
   });
 
-
   return (
     <div className="container max-w-screen-xl my-5">
       <div className="flex flex-col gap-y-10">
@@ -92,7 +91,9 @@ export default async function ProjectDealPage({ params }: { params: { id: number
                 <CarouselContent className="flex space-x-1">
                   {carouselData.map((item, index) => (
                     <CarouselItem key={index} className="flex">
-                      <DisplayFullImage item={item} width={200} height={100}/>
+                      <CarouselItem key={index} className="flex">
+                        <DisplayFullImage src="/path/to/image.jpg" alt="Image description" width={300} height={200} />
+                      </CarouselItem>
                     </CarouselItem>
                   ))}
                 </CarouselContent>