diff --git a/components/main/image-detail.tsx b/components/main/image-detail.tsx
index a42ddc01..5f5b0eee 100644
--- a/components/main/image-detail.tsx
+++ b/components/main/image-detail.tsx
@@ -219,55 +219,95 @@ const DetailImage = (data: any) => {
     await postActivityLog(data);
   }
 
+  // const handleDownload = () => {
+  //   if (downloadProgress === 0) {
+  //     if (!imageSizeSelected) {
+  //       alert("Please select an image size before downloading.");
+  //       return;
+  //     }
+
+  //     if (!userId) {
+  //       router.push("/auth");
+  //     } else {
+  //       sendActivityLog(2);
+  //       sendActivityLog(3);
+
+  //       if (isDownloadAll) {
+  //         let url: string;
+  //         const baseId = slug.split("-")?.[0];
+
+  //         // if (type === "1") {
+  //         // url = `${process.env.NEXT_PUBLIC_API}/media/file/download-zip?id=${baseId}&resolution=${resolutionSelected}`;
+  //         // } else if (type === "2") {
+  //         url = `${process.env.NEXT_PUBLIC_API}/media/file/download-zip?id=${baseId}&resolution=${imageSizeSelected}`;
+  //         // } else {
+  //         //   url = `${process.env.NEXT_PUBLIC_API}/media/file/download-zip?id=${baseId}`;
+  //         // }
+
+  //         downloadFile(url, "FileDownload.zip");
+  //       } else {
+  //         if (isFromSPIT && main?.url?.includes("spit.humas")) {
+  //           downloadFile(`${main?.url}`, `${main.names}`);
+  //         } else {
+  //           // const url = `${process.env.NEXT_PUBLIC_API}/media/view?id=${main?.id}&operation=file&type=video&resolution=${resolutionSelected}p`;
+  //           // downloadFile(url, `${main.names}`);
+  //           const url = `${process.env.NEXT_PUBLIC_API}/media/view?id=${main?.id}&operation=file&type=image&resolution=${imageSizeSelected}`;
+  //           downloadFile(url, `${main.names}`);
+  //         }
+  //       }
+  //       // } else if (type === "1" && resolutionSelected?.length > 0) {
+  //       //   if (isFromSPIT && main?.url?.includes("spit.humas")) {
+  //       //     downloadFile(`${main?.url}`, `${main.names}`);
+  //       //   } else {
+  //       //     const url = `${process.env.NEXT_PUBLIC_API}/media/view?id=${main?.id}&operation=file&type=video&resolution=${resolutionSelected}p`;
+  //       //     downloadFile(url, `${main.names}`);
+  //       //   }
+  //       // } else if (type === "2" && imageSizeSelected?.length > 0) {
+  //       // const url = `${process.env.NEXT_PUBLIC_API}/media/view?id=${main?.id}&operation=file&type=image&resolution=${imageSizeSelected}`;
+  //       // downloadFile(url, `${main.names}`);
+  //       // } else if (type === "3" || type === "4") {
+  //       //   downloadFile(`${main?.url}`, `${main.names}`);
+  //       // }
+  //     }
+  //   }
+  // };
+
   const handleDownload = () => {
-    if (downloadProgress === 0) {
-      if (!imageSizeSelected) {
-        alert("Please select an image size before downloading.");
+    if (downloadProgress !== 0) return;
+
+    if (!imageSizeSelected) {
+      alert("Please select an image size before downloading.");
+      return;
+    }
+
+    if (!userId) {
+      router.push("/auth");
+      return;
+    }
+
+    sendActivityLog(2);
+    sendActivityLog(3);
+
+    if (isDownloadAll) {
+      const baseId = slug.split("-")?.[0];
+      const url = `${process.env.NEXT_PUBLIC_API}/media/file/download-zip?id=${baseId}&resolution=${imageSizeSelected}`;
+      downloadFile(url, "FileDownload.zip");
+    } else {
+      const selectedFile = detailDataImage?.files?.[selectedImage];
+
+      if (!selectedFile) {
+        toast({
+          description: "Gambar tidak ditemukan.",
+          variant: "destructive",
+        });
         return;
       }
 
-      if (!userId) {
-        router.push("/auth");
+      if (isFromSPIT && selectedFile?.url?.includes("spit.humas")) {
+        downloadFile(selectedFile.url, selectedFile.names || "image.jpg");
       } else {
-        sendActivityLog(2);
-        sendActivityLog(3);
-
-        if (isDownloadAll) {
-          let url: string;
-          const baseId = slug.split("-")?.[0];
-
-          // if (type === "1") {
-          // url = `${process.env.NEXT_PUBLIC_API}/media/file/download-zip?id=${baseId}&resolution=${resolutionSelected}`;
-          // } else if (type === "2") {
-          url = `${process.env.NEXT_PUBLIC_API}/media/file/download-zip?id=${baseId}&resolution=${imageSizeSelected}`;
-          // } else {
-          //   url = `${process.env.NEXT_PUBLIC_API}/media/file/download-zip?id=${baseId}`;
-          // }
-
-          downloadFile(url, "FileDownload.zip");
-        } else {
-          if (isFromSPIT && main?.url?.includes("spit.humas")) {
-            downloadFile(`${main?.url}`, `${main.names}`);
-          } else {
-            // const url = `${process.env.NEXT_PUBLIC_API}/media/view?id=${main?.id}&operation=file&type=video&resolution=${resolutionSelected}p`;
-            // downloadFile(url, `${main.names}`);
-            const url = `${process.env.NEXT_PUBLIC_API}/media/view?id=${main?.id}&operation=file&type=image&resolution=${imageSizeSelected}`;
-            downloadFile(url, `${main.names}`);
-          }
-        }
-        // } else if (type === "1" && resolutionSelected?.length > 0) {
-        //   if (isFromSPIT && main?.url?.includes("spit.humas")) {
-        //     downloadFile(`${main?.url}`, `${main.names}`);
-        //   } else {
-        //     const url = `${process.env.NEXT_PUBLIC_API}/media/view?id=${main?.id}&operation=file&type=video&resolution=${resolutionSelected}p`;
-        //     downloadFile(url, `${main.names}`);
-        //   }
-        // } else if (type === "2" && imageSizeSelected?.length > 0) {
-        // const url = `${process.env.NEXT_PUBLIC_API}/media/view?id=${main?.id}&operation=file&type=image&resolution=${imageSizeSelected}`;
-        // downloadFile(url, `${main.names}`);
-        // } else if (type === "3" || type === "4") {
-        //   downloadFile(`${main?.url}`, `${main.names}`);
-        // }
+        const url = `${process.env.NEXT_PUBLIC_API}/media/view?id=${selectedFile.id}&operation=file&type=image&resolution=${imageSizeSelected}`;
+        downloadFile(url, selectedFile.names || "image.jpg");
       }
     }
   };
@@ -552,7 +592,23 @@ const DetailImage = (data: any) => {
                 <Skeleton className="rounded-lg w-[120px] h-[90px]" />
               </div>
             ) : (
-              <div className="py-4 flex flex-row gap-3">
+              // <div className="py-4 flex flex-row gap-3">
+              //   {detailDataImage?.files?.map((file: any, index: number) => (
+              //     <a onClick={() => setSelectedImage(index)} key={file?.id}>
+              //       <Image
+              //         placeholder={`data:image/svg+xml;base64,${toBase64(
+              //           shimmer(700, 475)
+              //         )}`}
+              //         width={1920}
+              //         height={1080}
+              //         alt="image-small"
+              //         src={file?.url}
+              //         className="w-[120px] h-[90px] object-cover rounded-md cursor-pointer hover:ring-2 hover:ring-red-600"
+              //       />
+              //     </a>
+              //   ))}
+              // </div>
+              <div className="py-4 px-1 flex flex-row gap-3 flex-wrap">
                 {detailDataImage?.files?.map((file: any, index: number) => (
                   <a onClick={() => setSelectedImage(index)} key={file?.id}>
                     <Image
@@ -563,7 +619,9 @@ const DetailImage = (data: any) => {
                       height={1080}
                       alt="image-small"
                       src={file?.url}
-                      className="w-[120px] h-[90px] object-cover rounded-md cursor-pointer hover:ring-2 hover:ring-red-600"
+                      className={`w-[120px] h-[90px] object-cover rounded-md cursor-pointer hover:ring-2 ${
+                        selectedImage === index ? "ring-2 ring-red-600" : ""
+                      }`}
                     />
                   </a>
                 ))}