diff --git a/.env b/.env
new file mode 100644
index 00000000..8835a9bc
--- /dev/null
+++ b/.env
@@ -0,0 +1,2 @@
+NEXT_PUBLIC_API=https://netidhub.com/api
+NEXT_PUBLIC=https://netidhub.com
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
index e051cc24..22aa14ed 100644
--- a/.gitignore
+++ b/.gitignore
@@ -26,8 +26,8 @@ yarn-debug.log*
 yarn-error.log*
 
 # local env files
-.env*.local
-.env
+# .env*.local
+# .env
 
 # vercel
 .vercel
diff --git a/components/form/content/image-detail-form.tsx b/components/form/content/image-detail-form.tsx
index 8da2165e..bfacd126 100644
--- a/components/form/content/image-detail-form.tsx
+++ b/components/form/content/image-detail-form.tsx
@@ -33,18 +33,27 @@ import {
 import { detailMedia } from "@/service/curated-content/curated-content";
 import { Badge } from "@/components/ui/badge";
 import { MailIcon } from "lucide-react";
-import { Icon } from "@iconify/react/dist/iconify.js";
-import { getCookiesDecrypt } from "@/lib/utils";
+import { Swiper, SwiperSlide } from "swiper/react";
+import "swiper/css";
+import "swiper/css/free-mode";
+import "swiper/css/navigation";
+import "swiper/css/pagination";
+import "swiper/css/thumbs";
+import "swiper/css";
+import "swiper/css/navigation";
+import { FreeMode, Navigation, Pagination, Thumbs } from "swiper/modules";
 import {
+  DialogHeader,
+  DialogFooter,
   Dialog,
   DialogContent,
-  DialogFooter,
-  DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
 import { Textarea } from "@/components/ui/textarea";
-import { close, error, loading } from "@/config/swal";
-import { te } from "date-fns/locale";
+import { close, loading } from "@/config/swal";
+import { getCookiesDecrypt } from "@/lib/utils";
+import { Icon } from "@iconify/react/dist/iconify.js";
+import { error } from "@/lib/swal";
 
 const imageSchema = z.object({
   title: z.string().min(1, { message: "Judul diperlukan" }),
@@ -114,6 +123,8 @@ export default function FormImageDetail() {
   const [description, setDescription] = useState("");
   const [main, setMain] = useState<any>([]);
   const [filePlacements, setFilePlacements] = useState<string[][]>([]);
+  const [detailThumb, setDetailThumb] = useState<any>([]);
+  const [thumbsSwiper, setThumbsSwiper] = useState<any>(null);
 
   const [selectedTarget, setSelectedTarget] = useState("");
   const [files, setFiles] = useState<FileType[]>([]);
@@ -232,6 +243,12 @@ export default function FormImageDetail() {
         }
 
         setSelectedTarget(details.categoryId); // Untuk dropdown
+
+        const filesData = details.files || [];
+        const fileUrls = filesData.map((file: { thumbnailFileUrl: string }) =>
+          file.thumbnailFileUrl ? file.thumbnailFileUrl : "default-image.jpg"
+        );
+        setDetailThumb(fileUrls);
       }
     }
     initState();
@@ -462,79 +479,45 @@ export default function FormImageDetail() {
                   )}
                 </div>
 
-                <div className="py-3">
-                  <Label>Files</Label>
-                  {/* Preview Image */}
-                  <div className="w-full aspect-video mb-4 rounded-lg overflow-hidden bg-gray-100">
-                    <img
-                      src={main.url}
-                      alt="Preview"
-                      className="w-full h-full object-cover transition-all duration-300"
-                    />
-                  </div>
-
-                  {/* Thumbnail Container with Navigation */}
-                  <div className="relative group">
-                    {/* Scroll Left Button */}
-                    {/* <button 
-                      onClick={scrollLeft}
-                      className="absolute left-0 top-1/2 -translate-y-1/2 z-10 bg-black/50 p-2 rounded-r-lg 
-                                text-white opacity-0 group-hover:opacity-100 transition-opacity duration-300
-                                hover:bg-black/70 disabled:opacity-0"
-                      aria-label="Scroll left"
-                    >
-                      <ChevronLeft className="w-6 h-6" />
-                    </button> */}
-
-                    {/* Scrollable Thumbnail Container */}
-                    <div
-                      id="thumbnail-container"
-                      className="overflow-x-auto scrollbar-hide scroll-smooth"
-                      style={{
-                        scrollbarWidth: "none",
-                        msOverflowStyle: "none",
+                <Label className="text-xl text-black">File Media</Label>
+                <div className="w-full  ">
+                  <Swiper
+                    thumbs={{ swiper: thumbsSwiper }}
+                    modules={[FreeMode, Navigation, Thumbs]}
+                    navigation={false}
+                    className="w-full"
+                  >
+                    {detailThumb?.map((data: any) => (
+                      <SwiperSlide key={data.id}>
+                        <img
+                          className="object-fill h-full w-full"
+                          src={data}
+                          alt={` ${data.id}`}
+                        />
+                      </SwiperSlide>
+                    ))}
+                  </Swiper>
+                  <div className=" mt-2 ">
+                    <Swiper
+                      onSwiper={setThumbsSwiper}
+                      slidesPerView={6}
+                      spaceBetween={8}
+                      pagination={{
+                        clickable: true,
                       }}
+                      modules={[Pagination, Thumbs]}
+                      // className="mySwiper2"
                     >
-                      <div className="flex space-x-2 px-4">
-                        {detail?.files?.map((list: any, index: number) => (
-                          <button
-                            key={index}
-                            onClick={() =>
-                              handleMain(
-                                "FOTO",
-                                list.url,
-                                list.fileName,
-                                list.format
-                              )
-                            }
-                            className={`flex-shrink-0 relative aspect-video w-32 rounded-lg overflow-hidden 
-                              ${
-                                main.url === list.url
-                                  ? "ring-2 ring-blue-500"
-                                  : "hover:opacity-80"
-                              }
-                              transition-all duration-200`}
-                          >
-                            <img
-                              src={list.url}
-                              alt={`Thumbnail ${index + 1}`}
-                              className="w-full h-full object-cover"
-                            />
-                          </button>
-                        ))}
-                      </div>
-                    </div>
-
-                    {/* Scroll Right Button */}
-                    {/* <button 
-                      onClick={scrollRight}
-                      className="absolute right-0 top-1/2 -translate-y-1/2 z-10 bg-black/50 p-2 rounded-l-lg 
-                                text-white opacity-0 group-hover:opacity-100 transition-opacity duration-300
-                                hover:bg-black/70 disabled:opacity-0"
-                      aria-label="Scroll right"
-                    >
-                      <ChevronRight className="w-6 h-6" />
-                    </button> */}
+                      {detailThumb?.map((data: any) => (
+                        <SwiperSlide key={data.id}>
+                          <img
+                            className="object-cover h-[60px] w-[80px]"
+                            src={data}
+                            alt={` ${data.id}`}
+                          />
+                        </SwiperSlide>
+                      ))}
+                    </Swiper>
                   </div>
                 </div>
               </div>