diff --git a/app/[locale]/(public)/(polda)/polda/[polda_name]/image/layout.tsx b/app/[locale]/(public)/(polda)/polda/[polda_name]/image/layout.tsx
deleted file mode 100644
index 96086704..00000000
--- a/app/[locale]/(public)/(polda)/polda/[polda_name]/image/layout.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-"use client";
-
-import LayoutProvider from "@/providers/layout.provider";
-import LayoutContentProvider from "@/providers/content.provider";
-import DashCodeSidebar from "@/components/partials/sidebar";
-import DashCodeFooter from "@/components/partials/footer";
-import ThemeCustomize from "@/components/partials/customizer";
-import DashCodeHeader from "@/components/partials/header";
-
-import { redirect } from "@/components/navigation";
-import Footer from "@/components/landing-page/footer";
-import Navbar from "@/components/landing-page/navbar";
-import NavbarKaltara from "@/components/landing-page/landing-polda-kaltara/navbar-polda-kaltara";
-import { useParams } from "next/navigation";
-import ContactUsKaltara from "@/components/landing-page/landing-polda-kaltara/contact-us-kaltara";
-import NewsTickerKaltara from "../../../tbnews/[polda_name]/components/news-tickers-kaltara";
-
-const layout = ({ children }: { children: React.ReactNode }) => {
-  const params = useParams();
-  const poldaName: any = params?.polda_name;
-  return poldaName === "kaltara" ? (
-    <>
-      <NavbarKaltara />
-      {children}
-      <ContactUsKaltara />
-      <NewsTickerKaltara />
-    </>
-  ) : (
-    <>
-      <Navbar />
-      {children}
-      <Footer />
-    </>
-  );
-};
-
-export default layout;
diff --git a/app/[locale]/(public)/(polda)/polda/[polda_name]/indeks/detail/[slug]/page.tsx b/app/[locale]/(public)/(polda)/polda/[polda_name]/indeks/detail/[slug]/page.tsx
index b76f2d03..ef5df705 100644
--- a/app/[locale]/(public)/(polda)/polda/[polda_name]/indeks/detail/[slug]/page.tsx
+++ b/app/[locale]/(public)/(polda)/polda/[polda_name]/indeks/detail/[slug]/page.tsx
@@ -1,18 +1,45 @@
 "use client";
 import { Textarea } from "@/components/ui/textarea";
-import { useParams, usePathname, useRouter } from "next/navigation";
+import { useParams, usePathname, useSearchParams } from "next/navigation";
 import React, { useEffect, useState } from "react";
-import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel";
-import { Link } from "@/i18n/routing";
-import { getDetailIndeks, publicDetailBlog } from "@/service/landing/landing";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@/components/ui/carousel";
+import { Link, useRouter } from "@/i18n/routing";
+import {
+  deleteBlogComments,
+  getBlogComments,
+  getDetailIndeks,
+  getPublicSuggestionList,
+  postBlogComments,
+  publicDetailBlog,
+} from "@/service/landing/landing";
 import { formatDateToIndonesian } from "@/utils/globals";
 import { Icon } from "@iconify/react/dist/iconify.js";
+import { getCookiesDecrypt } from "@/lib/utils";
+import { close, loading } from "@/config/swal";
+import { Input } from "@/components/ui/input";
+import { useTranslations } from "next-intl";
+import Image from "next/image";
 
 const IndeksDetail = () => {
+  const searchParams = useSearchParams();
+  const id = searchParams?.get("id");
   const [indeksData, setIndeksData] = useState<any>();
   const params = useParams();
   const slug = params?.slug;
-  const [relatedPost, setRelatedPost] = useState<any>();
+  const [indexData, setIndexData] = useState<any>();
+  const [message, setMessage] = useState("");
+  const [messageChild, setMessageChild] = useState("");
+  const userId = getCookiesDecrypt("uie");
+  const userRoleId = getCookiesDecrypt("urie");
+  const router: any = useRouter();
+  const [listComments, setListComments] = useState([]);
+  const t = useTranslations("LandingPage");
 
   useEffect(() => {
     initFetch();
@@ -21,63 +48,512 @@ const IndeksDetail = () => {
   const initFetch = async () => {
     const response = await getDetailIndeks();
     console.log(response);
-    setRelatedPost(response?.data?.data?.content);
+    setIndexData(response?.data?.data?.content);
   };
   const detailFetch = async () => {
     const response = await publicDetailBlog(slug);
     console.log(response);
     setIndeksData(response?.data?.data);
+    getDataComment(response?.data?.data?.id);
   };
 
+  async function getDataComment(id?: any) {
+    const response = await getBlogComments(id || indeksData?.id);
+    console.log(response.data?.data);
+    setListComments(response.data?.data);
+  }
+
+  const showInput = (e: any) => {
+    console.log(document.querySelector(`#${e}`)?.classList);
+    document.querySelector(`#${e}`)?.classList.toggle("hidden");
+  };
+
+  async function sendCommentParent() {
+    if (message?.length > 3) {
+      loading();
+      const data = {
+        blogId: indeksData?.id,
+        message: message,
+        parentId: null,
+      };
+
+      const response = await postBlogComments(data);
+
+      console.log(response);
+      setMessage("");
+      getDataComment();
+      close();
+    }
+  }
+
+  // async function sendCommentChild(parentId: any) {
+  //   if (messageChild.length > 3) {
+  //     loading();
+  //     const data = {
+  //       blogId: indeksData?.id,
+  //       message: messageChild,
+  //       parentId,
+  //     };
+
+  //     console.log(data);
+  //     const response = await postBlogComments(data);
+  //     console.log(response);
+  //     const responseGet = await getPublicSuggestionList(slug);
+  //     console.log(responseGet?.data?.data);
+  //     setMessageChild("");
+  //     // $(":input").val("");
+  //     close();
+  //   }
+  // }
+
+  async function sendCommentChild(parentId: any) {
+    const inputMsg = document.querySelector(
+      `#input-comment-${parentId}`
+    ) as HTMLInputElement;
+
+    if (inputMsg && inputMsg.value.length > 3) {
+      loading();
+      const data = {
+        blogId: indeksData?.id,
+        message: inputMsg.value,
+        parentId,
+      };
+
+      console.log(data);
+      const response = await postBlogComments(data);
+      console.log(response);
+      const responseGet = await getPublicSuggestionList(slug);
+      console.log(responseGet?.data?.data);
+      getDataComment();
+      inputMsg.value = "";
+      close();
+    }
+  }
+
+  async function deleteDataComment(dataId: any) {
+    loading();
+    const response = await deleteBlogComments(dataId);
+    console.log(response);
+    getDataComment();
+    close();
+  }
+
+  const getInputValue = (e: any) => {
+    const message = e.target.value;
+    console.log(message);
+    setMessage(message);
+    getDataComment();
+  };
+
+  const postData = () => {
+    if (Number(userRoleId) < 1) {
+      router.push("/auth");
+    } else {
+      sendCommentParent();
+    }
+    getDataComment();
+  };
+
+  const postDataChild = (id: any) => {
+    if (Number(userRoleId) < 1) {
+      router.push("/auth");
+    } else {
+      sendCommentChild(id);
+    }
+  };
+
+  const deleteData = (dataId: any) => {
+    deleteDataComment(dataId);
+    console.log(dataId);
+  };
+
+  const shimmer = (w: number, h: number) => `
+  <svg width="${w}" height="${h}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs>
+      <linearGradient id="g">
+        <stop stop-color="#bcbcbd" offset="20%" />
+        <stop stop-color="#f9fafb" offset="50%" />
+        <stop stop-color="#bcbcbd" offset="70%" />
+      </linearGradient>
+    </defs>
+    <rect width="${w}" height="${h}" fill="#bcbcbd" />
+    <rect id="r" width="${w}" height="${h}" fill="url(#g)" />
+    <animate xlink:href="#r" attributeName="x" from="-${w}" to="${w}" dur="1s" repeatCount="indefinite"  />
+  </svg>`;
+
+  const toBase64 = (str: string) =>
+    typeof window === "undefined"
+      ? Buffer.from(str).toString("base64")
+      : window.btoa(str);
+
   return (
     <>
-      <div className="p-4 lg:px-60 lg:p-12">
+      <div className="p-4 w-full lg:p-12">
         {/* Judul */}
-        <div className="flex flex-col mb-5">
-          <h1 className="text-lg mb-2">Indeks / Detail</h1>
-          <h1 className="flex flex-row font-bold text-center text-2xl">{indeksData?.title}</h1>
+        <div className="flex flex-col px-4 lg:px-[300px] mb-5">
+          <h1 className="text-base lg:text-lg mb-2">Index / Detail</h1>
+          <h1 className="flex flex-row font-bold text-center text-lg lg:text-2xl">
+            {indeksData?.title}
+          </h1>
         </div>
         {/* Gambar Utama */}
         <div className="flex items-center justify-center">
-          <img src={indeksData?.thumbnailLink} alt="Main" className="h-[550px] w-full rounded-lg" />
+          <Image
+            placeholder={`data:image/svg+xml;base64,${toBase64(
+              shimmer(700, 475)
+            )}`}
+            width={2560}
+            height={1440}
+            src={indeksData?.thumbnailLink}
+            alt="Main"
+            className="w-full max-h-[550px] object-contain rounded-xl"
+          />
         </div>
+
         {/* Footer Informasi */}
-        <div className="text-sm text-gray-500 flex justify-between items-center border-t mt-4">
-          <div className="flex flex-row items-center mt-3 justify-between">
-            oleh&nbsp;<span className="font-semibold text-black">{indeksData?.uploaderName}</span>&nbsp; | &nbsp;Diupdate pada {indeksData?.createdAt} WIB &nbsp;
+        <div className="px-4 lg:px-[300px]">
+          <div className="text-gray-500  flex border-t mt-4">
+            <div className="flex mt-2">
+              <p className="text-xs lg:text-sm mb-2 ">
+                {t("by")}&nbsp;
+                <span className="font-semibold text-gray-500">
+                  {indeksData?.uploaderName}
+                </span>
+                &nbsp; | &nbsp;{t("updatedOn")} {indeksData?.createdAt} WIB
+                &nbsp;
+              </p>
+            </div>
           </div>
         </div>
 
         {/* Keterangan */}
-        <div className="w-auto">
-          <p className="font-light text-justify" dangerouslySetInnerHTML={{ __html: indeksData?.description }} />
+        <div className="w-full px-4 lg:px-[300px]">
+          <p
+            className="font-light text-base lg:text-lg text-justify"
+            dangerouslySetInnerHTML={{ __html: indeksData?.description }}
+          />
         </div>
       </div>
 
       {/* Comment */}
-      <div className="w-full">
-        <div className="flex flex-col py-5 p-10 bg-[#f7f7f7]">
-          <div className="gap-5 flex flex-col px-4 lg:px-16">
-            <p className="flex items-start text-lg">Berikan Komentar</p>
-            <Textarea placeholder="Type your comments here." className="flex w-full" />
-            <button className="flex items-start bg-[#bb3523] text-white rounded-lg w-fit px-4 py-1">Kirim</button>
+      <div className="w-full ">
+        <div className="flex flex-col py-5 p-0 lg:p-10 bg-[#f7f7f7] dark:bg-slate-600">
+          <div className="gap-5 flex flex-col px-4 lg:px-[300px]">
+            <p className="flex items-start text-bases lg:text-lg">
+              {t("comment")}
+            </p>
+            <Textarea
+              placeholder="Type your comments here."
+              className="flex w-full"
+              onChange={getInputValue}
+              value={message}
+            />
+            <button
+              className="flex items-start bg-[#bb3523] text-white rounded-lg text-sm lg:text-base w-fit px-3 lg:px-4 py-1"
+              onClick={() => postData()}
+            >
+              {t("send")}
+            </button>
+          </div>
+
+          <div className="px-4 lg:px-[300px]">
+            <div className="border-b-2  border-slate-300 mt-4"></div>
+          </div>
+
+          <div className="px-4 lg:px-[230px]">
+            {listComments?.map((data: any) => (
+              <div className="flex flex-col">
+                <div className="flex flex-row mt-2 px-4 lg:px-14">
+                  <Image
+                    placeholder={`data:image/svg+xml;base64,${toBase64(
+                      shimmer(700, 475)
+                    )}`}
+                    width={512}
+                    height={512}
+                    className="h-10 lg:h-20 w-10 lg:w-20"
+                    src="/assets/img/user-avatar-yellow.svg"
+                    alt="#"
+                  />
+                  <div className="border border-slate-300 w-full p-4 bg-white  gap-1">
+                    <p className="flex justify-between text-sm text-slate-500 lg:text-base border-b-2 border-slate-200 mb-2">
+                      <b>
+                        {Number(data.commentFrom?.roleId) == 2 ||
+                        Number(data.commentFrom?.roleId) == 3 ||
+                        Number(data.commentFrom?.roleId) == 4
+                          ? "HUMAS POLRI"
+                          : data.commentFrom?.fullname}
+                      </b>
+                      {`${new Date(data.createdAt).getDate()}/${
+                        new Date(data.createdAt).getMonth() + 1
+                      }/${new Date(data.createdAt).getFullYear()} ${new Date(
+                        data.createdAt
+                      ).getHours()}:${new Date(data.createdAt).getMinutes()}`}
+                    </p>
+                    <p className="text-slate-500 text-sm lg:text-base mb-4">
+                      {data.message}
+                    </p>
+                    <div className="gap-3">
+                      <a
+                        href="javascript:void(0)"
+                        className="text-xs lg:text-sm mr-2 bg-blue-500 text-white py-1 px-2 hover:bg-blue-300 hover:text-black rounded-md"
+                        onClick={() => showInput(`comment-id-${data.id}`)}
+                      >
+                        {t("reply")}
+                      </a>
+                      <a
+                        href="javascript:void(0)"
+                        style={
+                          data.commentFrom?.id == userId
+                            ? {}
+                            : {
+                                display: "none",
+                              }
+                        }
+                        className="text-xs lg:text-sm bg-red-500 text-white py-1 px-2 hover:bg-red-300 hover:text-black rounded-md"
+                        onClick={() => deleteData(data.id)}
+                      >
+                        {t("delete")}
+                      </a>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  className="flex flex-row px-4 pl-[55px] lg:px-14 lg:pl-[135px] mt-2"
+                  id={`comment-id-${data.id}`}
+                >
+                  <Input
+                    type="text"
+                    id={`input-comment-${data.id}`}
+                    className="p-4 focus:outline-none focus:border-sky-500"
+                    placeholder={t("enterReply")}
+                  />
+                  <a
+                    href="javascript:void(0)"
+                    className="flex py-1 px-2 rounded-md items-center ml-2 bg-[#f7b357] text-white text-sm lg:text-base"
+                    onClick={() => postDataChild(data.id)}
+                  >
+                    {t("send")}
+                  </a>
+                </div>
+                {data.children.length > 0
+                  ? data.children?.map((child1: any) => (
+                      <div className="flex flex-col">
+                        <div className="flex flex-row mt-2 px-4 lg:pr-14 pl-12 lg:pl-32">
+                          <Image
+                            placeholder={`data:image/svg+xml;base64,${toBase64(
+                              shimmer(700, 475)
+                            )}`}
+                            width={512}
+                            height={512}
+                            className="h-10 lg:h-20 w-10 lg:w-20"
+                            src="/assets/img/user-avatar-yellow.svg"
+                            alt="#"
+                          />
+                          <div className="border border-slate-300 w-full p-4 bg-white gap-1">
+                            <p className="flex justify-between text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
+                              <b>
+                                {Number(child1.commentFrom?.roleId) == 2 ||
+                                Number(child1.commentFrom?.roleId) == 3 ||
+                                Number(child1.commentFrom?.roleId) == 4
+                                  ? "HUMAS POLRI"
+                                  : child1.commentFrom?.fullname}
+                              </b>
+                              {`${new Date(child1.createdAt).getDate()}/${
+                                new Date(child1.createdAt).getMonth() + 1
+                              }/${new Date(
+                                child1.createdAt
+                              ).getFullYear()} ${new Date(
+                                child1.createdAt
+                              ).getHours()}:${new Date(
+                                child1.createdAt
+                              ).getMinutes()}`}
+                            </p>
+                            <p className="text-slate-500 text-sm mb-4">
+                              {child1.message}
+                            </p>
+                            <div className="gap-3">
+                              <a
+                                href="javascript:void(0)"
+                                className="mr-2 text-xs lg:text-sm bg-blue-500 text-white py-1 px-2 hover:bg-blue-300 hover:text-black rounded-md"
+                                onClick={() =>
+                                  showInput(`comment-id-${child1.id}`)
+                                }
+                              >
+                                {t("reply")}
+                              </a>
+                              <a
+                                href="javascript:void(0)"
+                                className="text-xs lg:text-sm bg-red-500 text-white py-1 px-2 hover:bg-red-300 hover:text-black rounded-md"
+                                style={
+                                  Number(child1.commentFrom?.id) ==
+                                  Number(userId)
+                                    ? {}
+                                    : {
+                                        display: "none",
+                                      }
+                                }
+                                onClick={() => deleteData(child1.id)}
+                              >
+                                {t("delete")}
+                              </a>
+                            </div>
+                          </div>
+                        </div>
+                        <div
+                          className="flex flex-row justify-center px-4 pl-[87px] lg:px-14 lg:pl-[205px] mt-2"
+                          id={`comment-id-${child1.id}`}
+                        >
+                          <Input
+                            type="text"
+                            id={`input-comment-${child1.id}`}
+                            className="p-4 focus:outline-none focus:border-sky-500"
+                            placeholder={t("enterReply")}
+                          />
+                          <a
+                            href="javascript:void(0)"
+                            className="flex text-sm lg:text-base py-1 px-2 rounded-md items-center ml-2 bg-[#f7b357] text-white"
+                            onClick={() => postDataChild(child1.id)}
+                          >
+                            {t("send")}
+                          </a>
+                        </div>
+                        {child1.children.length > 0
+                          ? child1.children?.map((child2: any) => (
+                              <div className="flex flex-col">
+                                <div className="flex flex-row mt-2 px-4 lg:pr-14 pl-20 lg:pl-48">
+                                  <Image
+                                    placeholder={`data:image/svg+xml;base64,${toBase64(
+                                      shimmer(700, 475)
+                                    )}`}
+                                    width={512}
+                                    height={512}
+                                    className="h-10 lg:h-20 w-10 lg:w-20"
+                                    src="/assets/img/user-avatar-yellow.svg"
+                                    alt="#"
+                                  />
+                                  <div className="border border-slate-300 w-full p-4 bg-white gap-2">
+                                    <p className="flex justify-between text-slate-500 text-xs lg:text-base border-b-2 border-slate-200 mb-2">
+                                      <b>
+                                        {Number(child2.commentFrom?.roleId) ==
+                                          2 ||
+                                        Number(child2.commentFrom?.roleId) ==
+                                          3 ||
+                                        Number(child2.commentFrom?.roleId) == 4
+                                          ? "HUMAS POLRI"
+                                          : child2.commentFrom?.fullname}
+                                      </b>
+                                      {`${new Date(
+                                        child2.createdAt
+                                      ).getDate()}/${
+                                        new Date(child2.createdAt).getMonth() +
+                                        1
+                                      }/${new Date(
+                                        child2.createdAt
+                                      ).getFullYear()} ${new Date(
+                                        child2.createdAt
+                                      ).getHours()}:${new Date(
+                                        child2.createdAt
+                                      ).getMinutes()}`}
+                                    </p>
+                                    <p className="text-slate-500 text-sm mb-4">
+                                      {child2.message}
+                                    </p>
+                                    <div>
+                                      <a
+                                        href="javascript:void(0)"
+                                        className="mr-2 text-xs lg:text-sm bg-blue-500 text-white py-1 px-2 hover:bg-blue-300 hover:text-black rounded-md"
+                                        onClick={() =>
+                                          showInput("comment-id-" + child2.id)
+                                        }
+                                      >
+                                        {t("reply")}
+                                      </a>
+                                      <a
+                                        href="javascript:void(0)"
+                                        className="text-xs lg:text-sm bg-red-500 text-white py-1 px-2 hover:bg-red-300 hover:text-black rounded-md"
+                                        style={
+                                          Number(child2.commentFrom?.id) ==
+                                          Number(userId)
+                                            ? {}
+                                            : {
+                                                display: "none",
+                                              }
+                                        }
+                                        onClick={() => deleteData(child2.id)}
+                                      >
+                                        {t("delete")}
+                                      </a>
+                                    </div>
+                                  </div>
+                                </div>
+                                <div
+                                  className="flex flex-row px-4 pl-[120px] lg:px-14 lg:pl-[270px] mt-2"
+                                  id={`comment-id-${child2.id}`}
+                                >
+                                  <Input
+                                    type="text"
+                                    id={`comment-id-${child2.id}`}
+                                    className="p-4 focus:outline-none focus:border-sky-500"
+                                    placeholder={t("enterReply")}
+                                  />
+                                  <a
+                                    href="javascript:void(0)"
+                                    className="flex text-sm lg:text-base py-1 px-2 rounded-md items-center ml-2 bg-[#f7b357] text-white"
+                                    onClick={() => postDataChild(child1.id)}
+                                  >
+                                    {t("send")}
+                                  </a>
+                                </div>
+                              </div>
+                            ))
+                          : ""}
+                      </div>
+                    ))
+                  : ""}
+              </div>
+            ))}
           </div>
         </div>
 
         {/* Konten Serupa */}
-        <div className="space-x-5 flex flex-col px-4 lg:px-16 py-16 gap-5">
-          <h1 className="font-bold text-base lg:text-xl px-4 lg:px-8">Post Terkait</h1>
+        <div className="space-x-5 flex flex-col px-4 lg:px-[300px] py-16 gap-5">
+          <h1 className="font-bold text-base lg:text-xl px-4 lg:px-8">
+            {" "}
+            {t("relatedPosts")}
+          </h1>
           <Carousel>
             <CarouselContent className="w-full max-w-7xl">
-              {relatedPost?.map((relate: any) => (
-                <CarouselItem key={relate?.id} className="md:basis-1/2 lg:basis-1/3">
-                  <Link href={`/indeks/detail/${relate?.slug}`} className="relative group overflow-hidden shadow-md hover:shadow-lg">
-                    <img src={relate?.thumbnailLink} className="w-full rounded-lg h-40 lg:h-60 object-cover group-hover:scale-100 transition-transform duration-300" />
+              {indexData?.map((relate: any) => (
+                <CarouselItem
+                  key={relate?.id}
+                  className="md:basis-1/2 lg:basis-1/3"
+                >
+                  <Link
+                    href={`/indeks/detail/${relate?.slug}`}
+                    className="relative group overflow-hidden shadow-md hover:shadow-lg"
+                  >
+                    <Image
+                      placeholder={`data:image/svg+xml;base64,${toBase64(
+                        shimmer(700, 475)
+                      )}`}
+                      alt=""
+                      width={2560}
+                      height={1440}
+                      src={relate?.thumbnailLink}
+                      className="w-full rounded-lg h-40 lg:h-60 object-cover group-hover:scale-100 transition-transform duration-300"
+                    />
                     <div className="absolute bottom-0 left-0 right-0 bg-gray-600 border-l-4 border-[#bb3523] rounded-lg backdrop-blur-sm text-white p-2">
-                      <span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-sm px-4 py-1">{relate?.categoryName}</span>
-                      <h1 className="text-sm lg:text-lg mb-2 font-semibold h-5 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">{relate?.title}</h1>
+                      <span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-sm px-4 py-1">
+                        {relate?.categoryName}
+                      </span>
+                      <h1 className="text-sm lg:text-lg mb-2 font-semibold h-5 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">
+                        {relate?.title}
+                      </h1>
                       <p className="flex flex-row items-center text-[10px] gap-2">
-                        {formatDateToIndonesian(new Date(relate?.createdAt))} {relate?.timezone ? relate?.timezone : "WIB"} | <Icon icon="formkit:eye" width="15" height="15" /> {relate.clickCount}{" "}
+                        {formatDateToIndonesian(new Date(relate?.createdAt))}{" "}
+                        {relate?.timezone ? relate?.timezone : "WIB"} |{" "}
+                        <Icon icon="formkit:eye" width="15" height="15" />{" "}
+                        {relate.clickCount}{" "}
                       </p>
                     </div>
                   </Link>
diff --git a/app/[locale]/(public)/(polda)/polda/[polda_name]/indeks/page.tsx b/app/[locale]/(public)/(polda)/polda/[polda_name]/indeks/page.tsx
index ebf34670..99b171d7 100644
--- a/app/[locale]/(public)/(polda)/polda/[polda_name]/indeks/page.tsx
+++ b/app/[locale]/(public)/(polda)/polda/[polda_name]/indeks/page.tsx
@@ -1,15 +1,31 @@
 "use client";
 
+import { Skeleton } from "@/components/ui/skeleton";
 import { Link } from "@/i18n/routing";
 import { getIndeksData } from "@/service/landing/landing";
-import { formatDateToIndonesian } from "@/utils/globals";
-import { usePathname } from "next/navigation";
+import { formatDateToIndonesian, htmlToString } from "@/utils/globals";
+import Image from "next/image";
+import { useParams, usePathname } from "next/navigation";
 import React, { useEffect, useState } from "react";
 
 const Indeks: React.FC = () => {
   const pathname = usePathname();
   const [indeksData, setIndeksData] = useState<any>();
+  const [isLoading, setIsLoading] = useState<any>(true);
+  const params = useParams();
+  const poldaName: any = params?.polda_name;
+  let prefixPath = poldaName ? `/polda/${poldaName}` : "/";
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setIsLoading(false);
+    }, 3000);
+
+    return () => clearTimeout(timer);
+  }, []);
+
   let count: number = 0;
+
   useEffect(() => {
     if (indeksData) {
       const intervalId = setInterval(() => {
@@ -21,93 +37,228 @@ const Indeks: React.FC = () => {
   }, [indeksData]);
 
   useEffect(() => {
-    initFetch();
-  }, []);
-  const initFetch = async () => {
-    const response = await getIndeksData();
-    console.log(response);
-    setIndeksData(response?.data?.data?.content);
+    if (poldaName) {
+      initFetch(poldaName);
+    }
+  }, [poldaName]);
+
+  const initFetch = async (poldaName: string) => {
+    try {
+      const response = await getIndeksData();
+      console.log(response);
+      setIndeksData(response?.data?.data?.content);
+    } catch (error) {
+      console.error("Failed to fetch indeks data:", error);
+    }
   };
 
+  const shimmer = (w: number, h: number) => `
+  <svg width="${w}" height="${h}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs>
+      <linearGradient id="g">
+        <stop stop-color="#bcbcbd" offset="20%" />
+        <stop stop-color="#f9fafb" offset="50%" />
+        <stop stop-color="#bcbcbd" offset="70%" />
+      </linearGradient>
+    </defs>
+    <rect width="${w}" height="${h}" fill="#bcbcbd" />
+    <rect id="r" width="${w}" height="${h}" fill="url(#g)" />
+    <animate xlink:href="#r" attributeName="x" from="-${w}" to="${w}" dur="1s" repeatCount="indefinite"  />
+  </svg>`;
+
+  const toBase64 = (str: string) =>
+    typeof window === "undefined"
+      ? Buffer.from(str).toString("base64")
+      : window.btoa(str);
+
   return (
-    <div className="px-4 lg:px-14">
+    <div className="px-4 lg:px-14 min-h-[75.5vh]">
       {/* Hero Left */}
       <div className="flex flex-col lg:flex-row items-start gap-8 px-4 lg:px-10 py-4 mx-auto">
-        <div className="lg:w-[60%] w-full lg:h-full">
-          {indeksData?.map(
-            (indeks: any, index: number) =>
-              index == count && (
-                <div key={indeks?.id} className="relative h-[310px] lg:h-[435px]">
-                  <img src={indeks?.thumbnailLink} alt="image" className="w-full h-[310px] lg:h-[435px] rounded-lg" />
-                  <div className="absolute bottom-0 left-0 right-0 bg-transparent backdrop-blur-sm text-white p-4 rounded-b-lg">
-                    <span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-sm px-4 py-1">{indeks?.categoryName}</span>
-                    <Link href={`/indeks/detail/${indeks?.slug}`}>
-                      <h2 className="text-2xl font-bold mt-2">{indeks?.title}</h2>
-                    </Link>
-                    <p className="text-xs flex flex-row items-center gap-1 mt-1 ml-2">
-                      {formatDateToIndonesian(new Date(indeks?.createdAt))} {indeks?.timezone ? indeks?.timezone : "WIB"}|{" "}
-                      <svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24">
-                        <path
-                          fill="currentColor"
-                          d="M11.5 18c4 0 7.46-2.22 9.24-5.5C18.96 9.22 15.5 7 11.5 7s-7.46 2.22-9.24 5.5C4.04 15.78 7.5 18 11.5 18m0-12c4.56 0 8.5 2.65 10.36 6.5C20 16.35 16.06 19 11.5 19S3 16.35 1.14 12.5C3 8.65 6.94 6 11.5 6m0 2C14 8 16 10 16 12.5S14 17 11.5 17S7 15 7 12.5S9 8 11.5 8m0 1A3.5 3.5 0 0 0 8 12.5a3.5 3.5 0 0 0 3.5 3.5a3.5 3.5 0 0 0 3.5-3.5A3.5 3.5 0 0 0 11.5 9"
-                        />
-                      </svg>{" "}
-                      {indeks?.clickCount}
-                    </p>
+        {isLoading ? (
+          <div className="flex flex-col space-y-3 mx-auto w-full lg:w-2/3">
+            <Skeleton className="h-[310px] lg:h-[420px]  rounded-xl" />
+          </div>
+        ) : (
+          <div className="lg:w-[60%] w-full lg:h-full">
+            {indeksData?.map(
+              (indeks: any, index: number) =>
+                index == count && (
+                  <div
+                    key={indeks?.id}
+                    className="relative h-[310px] lg:h-[435px]"
+                  >
+                    <Image
+                      placeholder={`data:image/svg+xml;base64,${toBase64(
+                        shimmer(700, 475)
+                      )}`}
+                      width={2560}
+                      height={1440}
+                      src={indeks?.thumbnailLink}
+                      alt="image"
+                      className="w-full h-[310px] lg:h-[435px] rounded-lg object-cover"
+                    />
+                    <div className="absolute bottom-0 left-0 right-0 bg-black/15 backdrop-brightness-50 text-white p-4 rounded-b-lg">
+                      <span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-xs px-2 py-1">
+                        {indeks?.categoryName}
+                      </span>
+                      <Link href={`${prefixPath}/indeks/detail/${indeks?.slug}`}>
+                        <h2 className="text-2xl font-bold mt-2">
+                          {indeks?.title}
+                        </h2>
+                      </Link>
+                      <p className="text-xs flex flex-row items-center gap-1 mt-1">
+                        {formatDateToIndonesian(new Date(indeks?.createdAt))}{" "}
+                        {indeks?.timezone ? indeks?.timezone : "WIB"} |{" "}
+                        {/* <svg
+                          xmlns="http://www.w3.org/2000/svg"
+                          width="1.2em"
+                          height="1.2em"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            fill="currentColor"
+                            d="M11.5 18c4 0 7.46-2.22 9.24-5.5C18.96 9.22 15.5 7 11.5 7s-7.46 2.22-9.24 5.5C4.04 15.78 7.5 18 11.5 18m0-12c4.56 0 8.5 2.65 10.36 6.5C20 16.35 16.06 19 11.5 19S3 16.35 1.14 12.5C3 8.65 6.94 6 11.5 6m0 2C14 8 16 10 16 12.5S14 17 11.5 17S7 15 7 12.5S9 8 11.5 8m0 1A3.5 3.5 0 0 0 8 12.5a3.5 3.5 0 0 0 3.5 3.5a3.5 3.5 0 0 0 3.5-3.5A3.5 3.5 0 0 0 11.5 9"
+                          />
+                        </svg>{" "} */}
+                        {/* {indeks?.clickCount} */}
+                      </p>
+                    </div>
                   </div>
-                </div>
-              )
-          )}
-        </div>
+                )
+            )}
+          </div>
+        )}
 
         {/* Hero Right */}
         <div className="lg:w-[40%] w-full space-y-2">
-          {indeksData?.map(
-            (indeksRight: any, index: number) =>
-              (index == count + 1 || index == count + 2) && (
-                <div key={indeksRight?.id} className="relative h-[310px] lg:h-[215px]">
-                  <img src={indeksRight?.thumbnailLink} alt="image" className="w-full h-[310px] lg:h-[215px] rounded-lg " />
-                  <div className="absolute bottom-0 left-0 right-0 bg-transparent backdrop-blur-sm text-white p-4 rounded-b-lg">
-                    <span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-sm px-4 py-1">{indeksRight?.categoryName}</span>
-                    <Link href={`/indeks/detail/${indeksRight?.slug}`}>
-                      <h2 className="text-xl font-bold mt-2">{indeksRight?.title}</h2>
-                    </Link>
-                    <p className="text-xs flex flex-row items-center gap-1 mt-1 ml-2">
-                      {formatDateToIndonesian(new Date(indeksRight?.createdAt))} {indeksRight?.timezone ? indeksRight?.timezone : "WIB"}|{" "}
-                      <svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24">
-                        <path
-                          fill="currentColor"
-                          d="M11.5 18c4 0 7.46-2.22 9.24-5.5C18.96 9.22 15.5 7 11.5 7s-7.46 2.22-9.24 5.5C4.04 15.78 7.5 18 11.5 18m0-12c4.56 0 8.5 2.65 10.36 6.5C20 16.35 16.06 19 11.5 19S3 16.35 1.14 12.5C3 8.65 6.94 6 11.5 6m0 2C14 8 16 10 16 12.5S14 17 11.5 17S7 15 7 12.5S9 8 11.5 8m0 1A3.5 3.5 0 0 0 8 12.5a3.5 3.5 0 0 0 3.5 3.5a3.5 3.5 0 0 0 3.5-3.5A3.5 3.5 0 0 0 11.5 9"
-                        />
-                      </svg>{" "}
-                      {indeksRight?.clickCount}
-                    </p>
-                  </div>
-                </div>
-              )
+          {isLoading ? (
+            <>
+              <div className="flex flex-col space-y-3 w-full justify-center items-center gap-3">
+                <Skeleton className="h-[200px] w-full lg:w-[400px] rounded-xl" />
+                <Skeleton className="h-[200px] w-full lg:w-[400px] rounded-xl" />
+              </div>
+            </>
+          ) : (
+            <>
+              {indeksData?.map(
+                (indeksRight: any, index: number) =>
+                  (index == count + 1 || index == count + 2) && (
+                    <div
+                      key={indeksRight?.id}
+                      className="relative h-[310px] lg:h-[215px]"
+                    >
+                      <Image
+                        placeholder={`data:image/svg+xml;base64,${toBase64(
+                          shimmer(700, 475)
+                        )}`}
+                        width={1920}
+                        height={1080}
+                        src={indeksRight?.thumbnailLink}
+                        alt="image"
+                        className="w-full h-[310px] lg:h-[215px] rounded-lg "
+                      />
+                      <div className="absolute bottom-0 left-0 right-0 bg-black/15 backdrop-brightness-50 text-white p-4 rounded-b-lg">
+                        <span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-xs px-2 py-1">
+                          {indeksRight?.categoryName}
+                        </span>
+                        <Link href={`/indeks/detail/${indeksRight?.slug}`}>
+                          <h2 className="text-xl font-bold mt-2">
+                            {indeksRight?.title}
+                          </h2>
+                        </Link>
+                        <p className="text-xs flex flex-row items-center gap-1 mt-1 ml-2">
+                          {formatDateToIndonesian(
+                            new Date(indeksRight?.createdAt)
+                          )}{" "}
+                          {indeksRight?.timezone
+                            ? indeksRight?.timezone
+                            : "WIB"}
+                          |{" "}
+                          {/* <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            width="1.2em"
+                            height="1.2em"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              fill="currentColor"
+                              d="M11.5 18c4 0 7.46-2.22 9.24-5.5C18.96 9.22 15.5 7 11.5 7s-7.46 2.22-9.24 5.5C4.04 15.78 7.5 18 11.5 18m0-12c4.56 0 8.5 2.65 10.36 6.5C20 16.35 16.06 19 11.5 19S3 16.35 1.14 12.5C3 8.65 6.94 6 11.5 6m0 2C14 8 16 10 16 12.5S14 17 11.5 17S7 15 7 12.5S9 8 11.5 8m0 1A3.5 3.5 0 0 0 8 12.5a3.5 3.5 0 0 0 3.5 3.5a3.5 3.5 0 0 0 3.5-3.5A3.5 3.5 0 0 0 11.5 9"
+                            />
+                          </svg>{" "}
+                          {indeksRight?.clickCount} */}
+                        </p>
+                      </div>
+                    </div>
+                  )
+              )}
+            </>
           )}
         </div>
       </div>
 
       {/* Bottom */}
       <div className="px-4 lg:px-7 py-4">
-        <div className="flex flex-col gap-4">
-          {indeksData?.map(
-            (indeksBottom: any, index: number) =>
-              index < 3 && (
-                <div key={indeksBottom?.id} className="flex flex-col md:flex-row items-start p-4 gap-4">
-                  <img src={indeksBottom?.thumbnailLink} alt="" className="h-40 object-cover rounded-lg w-full lg:w-full lg:h-[300px]" />
-                  <div className="flex flex-col justify-between w-full">
-                    <p className="text-sm">{indeksBottom?.date}</p>
-                    <Link href={`/indeks/detail/${indeksBottom?.slug}`} className="text-2xl font-semibold text-gray-800">
-                      {indeksBottom?.title}
-                    </Link>
-                    <p className="text-sm text-gray-600 mt-2">{indeksBottom?.description}</p>
+        {isLoading ? (
+          <div className="flex flex-col space-y-3 w-full gap-10">
+            <div className="flex flex-col lg:flex-row gap-5">
+              <Skeleton className="h-[300px] w-full lg:w-[500px] rounded-lg" />
+              <div className="space-y-2">
+                <Skeleton className="h-4 w-[250px]" />
+                <Skeleton className="h-4 w-[200px]" />
+              </div>
+            </div>
+            <div className="flex flex-col lg:flex-row gap-5">
+              <Skeleton className="h-[300px] w-full lg:w-[500px] rounded-lg" />
+              <div className="space-y-2">
+                <Skeleton className="h-4 w-[250px]" />
+                <Skeleton className="h-4 w-[200px]" />
+              </div>
+            </div>
+            <div className="flex flex-col lg:flex-row gap-5">
+              <Skeleton className="h-[300px] w-full lg:w-[500px] rounded-lg" />
+              <div className="space-y-2">
+                <Skeleton className="h-4 w-[250px]" />
+                <Skeleton className="h-4 w-[200px]" />
+              </div>
+            </div>
+          </div>
+        ) : (
+          <div className="flex flex-col gap-4">
+            {indeksData?.map(
+              (indeksBottom: any, index: number) =>
+                index < 3 && (
+                  <div
+                    key={indeksBottom?.id}
+                    className="flex flex-col md:flex-row items-start p-4 gap-4"
+                  >
+                    <Image
+                      placeholder={`data:image/svg+xml;base64,${toBase64(
+                        shimmer(700, 475)
+                      )}`}
+                      width={500}
+                      height={250}
+                      src={indeksBottom?.thumbnailLink}
+                      alt=""
+                      className="h-40 object-cover rounded-lg w-full lg:w-[550px] lg:h-[200px]"
+                    />
+                    <div className="flex flex-col justify-between w-full">
+                      <p className="text-sm">{indeksBottom?.date}</p>
+                      <Link
+                        href={`/indeks/detail/${indeksBottom?.slug}`}
+                        className="text-2xl font-semibold text-gray-800 dark:text-white"
+                      >
+                        {indeksBottom?.title}
+                      </Link>
+                      <p className="text-sm text-gray-600 dark:text-white mt-2">
+                        {htmlToString(indeksBottom?.description)}
+                      </p>
+                    </div>
                   </div>
-                </div>
-              )
-          )}
-        </div>
+                )
+            )}
+          </div>
+        )}
       </div>
     </div>
   );
diff --git a/app/[locale]/(public)/(polda)/polda/[polda_name]/layout.tsx b/app/[locale]/(public)/(polda)/polda/[polda_name]/layout.tsx
index 2a601604..28704e63 100644
--- a/app/[locale]/(public)/(polda)/polda/[polda_name]/layout.tsx
+++ b/app/[locale]/(public)/(polda)/polda/[polda_name]/layout.tsx
@@ -16,9 +16,9 @@ import { useParams } from "next/navigation";
 const layout = ({ children }: { children: React.ReactNode }) => {
   const params = useParams();
   const poldaName: any = params?.polda_name;
-  return poldaName === "kaltara" ? (
-    children
-  ) : (
+  return  (
+  //   children
+  // ) : (
     <>
       <Navbar />
       {children}
diff --git a/app/[locale]/(public)/(polda)/polda/[polda_name]/page.tsx b/app/[locale]/(public)/(polda)/polda/[polda_name]/page.tsx
index 8990af65..cd71c68a 100644
--- a/app/[locale]/(public)/(polda)/polda/[polda_name]/page.tsx
+++ b/app/[locale]/(public)/(polda)/polda/[polda_name]/page.tsx
@@ -23,19 +23,19 @@ import HeroNewPolda from "@/components/landing-page/hero-new-polda";
 const page = () => {
   const params = useParams();
   const poldaName: any = params?.polda_name;
-  return poldaName === "kaltara" ? (
-    <div>
-      <NavbarKaltara />
-      <HeaderBannerKaltara />
-      {/* <SearchSectionKaltara /> */}
-      <WelcomePolda />
-      <LatestContentKaltara group="polda" type="latest" />
-      <LatestContentKaltara group="polda" type="popular" />
-      <ContentCategoryKaltara type="" group="polda" />
-      <ContactUsKaltara />
-      <NewsTickerKaltara />
-    </div>
-  ) : (
+  return (
+  //   <div>
+  //     <NavbarKaltara />
+  //     <HeaderBannerKaltara />
+  //     {/* <SearchSectionKaltara /> */}
+  //     <WelcomePolda />
+  //     <LatestContentKaltara group="polda" type="latest" />
+  //     <LatestContentKaltara group="polda" type="popular" />
+  //     <ContentCategoryKaltara type="" group="polda" />
+  //     <ContactUsKaltara />
+  //     <NewsTickerKaltara />
+  //   </div>
+  // ) : (
     // <div>
     //   {/* <HeaderBanner /> */}
     //   <HeroNew group="polda" />
diff --git a/app/[locale]/(public)/(polda)/tbnews-mediahub/[polda_name]/page.tsx b/app/[locale]/(public)/(polda)/tbnews-mediahub/[polda_name]/page.tsx
new file mode 100644
index 00000000..d62837bf
--- /dev/null
+++ b/app/[locale]/(public)/(polda)/tbnews-mediahub/[polda_name]/page.tsx
@@ -0,0 +1,38 @@
+"use client";
+
+import ContactUsKaltara from "@/components/landing-page/landing-polda-kaltara/contact-us-kaltara";
+import ContentCategoryKaltara from "@/components/landing-page/landing-polda-kaltara/content-category-kaltara";
+import HeaderBannerKaltara from "@/components/landing-page/landing-polda-kaltara/header-banner-kaltara";
+import LatestContentKaltara from "@/components/landing-page/landing-polda-kaltara/latest-content-kaltara";
+import NavbarKaltara from "@/components/landing-page/landing-polda-kaltara/navbar-polda-kaltara";
+import WelcomePolda from "@/components/landing-page/welcome-polda";
+import React from "react";
+import NewsTickerKaltara from "../../tbnews/[polda_name]/components/news-tickers-kaltara";
+import { useParams } from "next/navigation";
+
+const PoldaKaltara2 = () => {
+  const params = useParams();
+  const poldaName: string | undefined = params?.polda_name as string;
+
+  if (poldaName !== "kaltara") {
+    return null;
+  }
+
+  return (
+    <div>
+      <NavbarKaltara />
+      <HeaderBannerKaltara />
+      {/* <SearchSectionKaltara /> */}
+      <div className="px-4 lg:px-[100px]">
+        <WelcomePolda />
+      </div>
+      <LatestContentKaltara group="polda" type="latest" />
+      <LatestContentKaltara group="polda" type="popular" />
+      <ContentCategoryKaltara type="" group="polda" />
+      <ContactUsKaltara />
+      <NewsTickerKaltara />
+    </div>
+  );
+};
+
+export default PoldaKaltara2;
diff --git a/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/navbar-kaltara.tsx b/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/navbar-kaltara.tsx
index 9fa94e0d..94a0452d 100644
--- a/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/navbar-kaltara.tsx
+++ b/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/navbar-kaltara.tsx
@@ -47,7 +47,7 @@ const categoryLinks: any = {
   MediaHub: "https://new.netidhub.com/in/polda/kaltara",
 };
 
-const NavbarKaltara = () => {
+const NavbarKaltaraTbnews = () => {
   const [menuOpen, setMenuOpen] = useState(false);
 
   return (
@@ -111,4 +111,4 @@ const NavbarKaltara = () => {
   );
 };
 
-export default NavbarKaltara;
+export default NavbarKaltaraTbnews;
diff --git a/app/[locale]/(public)/(polda)/tbnews/[polda_name]/page.tsx b/app/[locale]/(public)/(polda)/tbnews/[polda_name]/page.tsx
index dbd15db9..6a88f688 100644
--- a/app/[locale]/(public)/(polda)/tbnews/[polda_name]/page.tsx
+++ b/app/[locale]/(public)/(polda)/tbnews/[polda_name]/page.tsx
@@ -1,7 +1,6 @@
 "use client";
 
 import React from "react";
-import NavbarKaltara from "./components/navbar-kaltara";
 import HeroKaltara from "./components/hero-kaltara";
 import LatestNews from "./components/latest-news";
 import PopularNews from "./components/popular-news";
@@ -12,11 +11,15 @@ import SocialMedia from "./components/social-media";
 import NewsTickerKaltara from "./components/news-tickers-kaltara";
 import PpsSection from "./components/pps-section";
 import ContactUsKaltara from "@/components/landing-page/landing-polda-kaltara/contact-us-kaltara";
+import WelcomePolda from "@/components/landing-page/welcome-polda";
+import LatestContentKaltara from "@/components/landing-page/landing-polda-kaltara/latest-content-kaltara";
+import ContentCategoryKaltara from "@/components/landing-page/landing-polda-kaltara/content-category-kaltara";
+import NavbarKaltaraTbnews from "./components/navbar-kaltara";
 
 const PoldaKaltara = () => {
   return (
     <div>
-      <NavbarKaltara />
+      <NavbarKaltaraTbnews />
       <HeroKaltara />
       <PpsSection />
       <LatestNews type="latest" />
@@ -29,6 +32,16 @@ const PoldaKaltara = () => {
       <ContactUsKaltara />
       <NewsTickerKaltara />
     </div>
+    // <div>
+    //   <NavbarKaltara />
+    //   {/* <SearchSectionKaltara /> */}
+    //   <WelcomePolda />
+    //   <LatestContentKaltara group="polda" type="latest" />
+    //   <LatestContentKaltara group="polda" type="popular" />
+    //   <ContentCategoryKaltara type="" group="polda" />
+    //   <ContactUsKaltara />
+    //   <NewsTickerKaltara />
+    // </div>
   );
 };
 
diff --git a/app/[locale]/(public)/(satker)/satker/[satker_name]/indeks/detail/[slug]/page.tsx b/app/[locale]/(public)/(satker)/satker/[satker_name]/indeks/detail/[slug]/page.tsx
index b76f2d03..ef5df705 100644
--- a/app/[locale]/(public)/(satker)/satker/[satker_name]/indeks/detail/[slug]/page.tsx
+++ b/app/[locale]/(public)/(satker)/satker/[satker_name]/indeks/detail/[slug]/page.tsx
@@ -1,18 +1,45 @@
 "use client";
 import { Textarea } from "@/components/ui/textarea";
-import { useParams, usePathname, useRouter } from "next/navigation";
+import { useParams, usePathname, useSearchParams } from "next/navigation";
 import React, { useEffect, useState } from "react";
-import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel";
-import { Link } from "@/i18n/routing";
-import { getDetailIndeks, publicDetailBlog } from "@/service/landing/landing";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@/components/ui/carousel";
+import { Link, useRouter } from "@/i18n/routing";
+import {
+  deleteBlogComments,
+  getBlogComments,
+  getDetailIndeks,
+  getPublicSuggestionList,
+  postBlogComments,
+  publicDetailBlog,
+} from "@/service/landing/landing";
 import { formatDateToIndonesian } from "@/utils/globals";
 import { Icon } from "@iconify/react/dist/iconify.js";
+import { getCookiesDecrypt } from "@/lib/utils";
+import { close, loading } from "@/config/swal";
+import { Input } from "@/components/ui/input";
+import { useTranslations } from "next-intl";
+import Image from "next/image";
 
 const IndeksDetail = () => {
+  const searchParams = useSearchParams();
+  const id = searchParams?.get("id");
   const [indeksData, setIndeksData] = useState<any>();
   const params = useParams();
   const slug = params?.slug;
-  const [relatedPost, setRelatedPost] = useState<any>();
+  const [indexData, setIndexData] = useState<any>();
+  const [message, setMessage] = useState("");
+  const [messageChild, setMessageChild] = useState("");
+  const userId = getCookiesDecrypt("uie");
+  const userRoleId = getCookiesDecrypt("urie");
+  const router: any = useRouter();
+  const [listComments, setListComments] = useState([]);
+  const t = useTranslations("LandingPage");
 
   useEffect(() => {
     initFetch();
@@ -21,63 +48,512 @@ const IndeksDetail = () => {
   const initFetch = async () => {
     const response = await getDetailIndeks();
     console.log(response);
-    setRelatedPost(response?.data?.data?.content);
+    setIndexData(response?.data?.data?.content);
   };
   const detailFetch = async () => {
     const response = await publicDetailBlog(slug);
     console.log(response);
     setIndeksData(response?.data?.data);
+    getDataComment(response?.data?.data?.id);
   };
 
+  async function getDataComment(id?: any) {
+    const response = await getBlogComments(id || indeksData?.id);
+    console.log(response.data?.data);
+    setListComments(response.data?.data);
+  }
+
+  const showInput = (e: any) => {
+    console.log(document.querySelector(`#${e}`)?.classList);
+    document.querySelector(`#${e}`)?.classList.toggle("hidden");
+  };
+
+  async function sendCommentParent() {
+    if (message?.length > 3) {
+      loading();
+      const data = {
+        blogId: indeksData?.id,
+        message: message,
+        parentId: null,
+      };
+
+      const response = await postBlogComments(data);
+
+      console.log(response);
+      setMessage("");
+      getDataComment();
+      close();
+    }
+  }
+
+  // async function sendCommentChild(parentId: any) {
+  //   if (messageChild.length > 3) {
+  //     loading();
+  //     const data = {
+  //       blogId: indeksData?.id,
+  //       message: messageChild,
+  //       parentId,
+  //     };
+
+  //     console.log(data);
+  //     const response = await postBlogComments(data);
+  //     console.log(response);
+  //     const responseGet = await getPublicSuggestionList(slug);
+  //     console.log(responseGet?.data?.data);
+  //     setMessageChild("");
+  //     // $(":input").val("");
+  //     close();
+  //   }
+  // }
+
+  async function sendCommentChild(parentId: any) {
+    const inputMsg = document.querySelector(
+      `#input-comment-${parentId}`
+    ) as HTMLInputElement;
+
+    if (inputMsg && inputMsg.value.length > 3) {
+      loading();
+      const data = {
+        blogId: indeksData?.id,
+        message: inputMsg.value,
+        parentId,
+      };
+
+      console.log(data);
+      const response = await postBlogComments(data);
+      console.log(response);
+      const responseGet = await getPublicSuggestionList(slug);
+      console.log(responseGet?.data?.data);
+      getDataComment();
+      inputMsg.value = "";
+      close();
+    }
+  }
+
+  async function deleteDataComment(dataId: any) {
+    loading();
+    const response = await deleteBlogComments(dataId);
+    console.log(response);
+    getDataComment();
+    close();
+  }
+
+  const getInputValue = (e: any) => {
+    const message = e.target.value;
+    console.log(message);
+    setMessage(message);
+    getDataComment();
+  };
+
+  const postData = () => {
+    if (Number(userRoleId) < 1) {
+      router.push("/auth");
+    } else {
+      sendCommentParent();
+    }
+    getDataComment();
+  };
+
+  const postDataChild = (id: any) => {
+    if (Number(userRoleId) < 1) {
+      router.push("/auth");
+    } else {
+      sendCommentChild(id);
+    }
+  };
+
+  const deleteData = (dataId: any) => {
+    deleteDataComment(dataId);
+    console.log(dataId);
+  };
+
+  const shimmer = (w: number, h: number) => `
+  <svg width="${w}" height="${h}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs>
+      <linearGradient id="g">
+        <stop stop-color="#bcbcbd" offset="20%" />
+        <stop stop-color="#f9fafb" offset="50%" />
+        <stop stop-color="#bcbcbd" offset="70%" />
+      </linearGradient>
+    </defs>
+    <rect width="${w}" height="${h}" fill="#bcbcbd" />
+    <rect id="r" width="${w}" height="${h}" fill="url(#g)" />
+    <animate xlink:href="#r" attributeName="x" from="-${w}" to="${w}" dur="1s" repeatCount="indefinite"  />
+  </svg>`;
+
+  const toBase64 = (str: string) =>
+    typeof window === "undefined"
+      ? Buffer.from(str).toString("base64")
+      : window.btoa(str);
+
   return (
     <>
-      <div className="p-4 lg:px-60 lg:p-12">
+      <div className="p-4 w-full lg:p-12">
         {/* Judul */}
-        <div className="flex flex-col mb-5">
-          <h1 className="text-lg mb-2">Indeks / Detail</h1>
-          <h1 className="flex flex-row font-bold text-center text-2xl">{indeksData?.title}</h1>
+        <div className="flex flex-col px-4 lg:px-[300px] mb-5">
+          <h1 className="text-base lg:text-lg mb-2">Index / Detail</h1>
+          <h1 className="flex flex-row font-bold text-center text-lg lg:text-2xl">
+            {indeksData?.title}
+          </h1>
         </div>
         {/* Gambar Utama */}
         <div className="flex items-center justify-center">
-          <img src={indeksData?.thumbnailLink} alt="Main" className="h-[550px] w-full rounded-lg" />
+          <Image
+            placeholder={`data:image/svg+xml;base64,${toBase64(
+              shimmer(700, 475)
+            )}`}
+            width={2560}
+            height={1440}
+            src={indeksData?.thumbnailLink}
+            alt="Main"
+            className="w-full max-h-[550px] object-contain rounded-xl"
+          />
         </div>
+
         {/* Footer Informasi */}
-        <div className="text-sm text-gray-500 flex justify-between items-center border-t mt-4">
-          <div className="flex flex-row items-center mt-3 justify-between">
-            oleh&nbsp;<span className="font-semibold text-black">{indeksData?.uploaderName}</span>&nbsp; | &nbsp;Diupdate pada {indeksData?.createdAt} WIB &nbsp;
+        <div className="px-4 lg:px-[300px]">
+          <div className="text-gray-500  flex border-t mt-4">
+            <div className="flex mt-2">
+              <p className="text-xs lg:text-sm mb-2 ">
+                {t("by")}&nbsp;
+                <span className="font-semibold text-gray-500">
+                  {indeksData?.uploaderName}
+                </span>
+                &nbsp; | &nbsp;{t("updatedOn")} {indeksData?.createdAt} WIB
+                &nbsp;
+              </p>
+            </div>
           </div>
         </div>
 
         {/* Keterangan */}
-        <div className="w-auto">
-          <p className="font-light text-justify" dangerouslySetInnerHTML={{ __html: indeksData?.description }} />
+        <div className="w-full px-4 lg:px-[300px]">
+          <p
+            className="font-light text-base lg:text-lg text-justify"
+            dangerouslySetInnerHTML={{ __html: indeksData?.description }}
+          />
         </div>
       </div>
 
       {/* Comment */}
-      <div className="w-full">
-        <div className="flex flex-col py-5 p-10 bg-[#f7f7f7]">
-          <div className="gap-5 flex flex-col px-4 lg:px-16">
-            <p className="flex items-start text-lg">Berikan Komentar</p>
-            <Textarea placeholder="Type your comments here." className="flex w-full" />
-            <button className="flex items-start bg-[#bb3523] text-white rounded-lg w-fit px-4 py-1">Kirim</button>
+      <div className="w-full ">
+        <div className="flex flex-col py-5 p-0 lg:p-10 bg-[#f7f7f7] dark:bg-slate-600">
+          <div className="gap-5 flex flex-col px-4 lg:px-[300px]">
+            <p className="flex items-start text-bases lg:text-lg">
+              {t("comment")}
+            </p>
+            <Textarea
+              placeholder="Type your comments here."
+              className="flex w-full"
+              onChange={getInputValue}
+              value={message}
+            />
+            <button
+              className="flex items-start bg-[#bb3523] text-white rounded-lg text-sm lg:text-base w-fit px-3 lg:px-4 py-1"
+              onClick={() => postData()}
+            >
+              {t("send")}
+            </button>
+          </div>
+
+          <div className="px-4 lg:px-[300px]">
+            <div className="border-b-2  border-slate-300 mt-4"></div>
+          </div>
+
+          <div className="px-4 lg:px-[230px]">
+            {listComments?.map((data: any) => (
+              <div className="flex flex-col">
+                <div className="flex flex-row mt-2 px-4 lg:px-14">
+                  <Image
+                    placeholder={`data:image/svg+xml;base64,${toBase64(
+                      shimmer(700, 475)
+                    )}`}
+                    width={512}
+                    height={512}
+                    className="h-10 lg:h-20 w-10 lg:w-20"
+                    src="/assets/img/user-avatar-yellow.svg"
+                    alt="#"
+                  />
+                  <div className="border border-slate-300 w-full p-4 bg-white  gap-1">
+                    <p className="flex justify-between text-sm text-slate-500 lg:text-base border-b-2 border-slate-200 mb-2">
+                      <b>
+                        {Number(data.commentFrom?.roleId) == 2 ||
+                        Number(data.commentFrom?.roleId) == 3 ||
+                        Number(data.commentFrom?.roleId) == 4
+                          ? "HUMAS POLRI"
+                          : data.commentFrom?.fullname}
+                      </b>
+                      {`${new Date(data.createdAt).getDate()}/${
+                        new Date(data.createdAt).getMonth() + 1
+                      }/${new Date(data.createdAt).getFullYear()} ${new Date(
+                        data.createdAt
+                      ).getHours()}:${new Date(data.createdAt).getMinutes()}`}
+                    </p>
+                    <p className="text-slate-500 text-sm lg:text-base mb-4">
+                      {data.message}
+                    </p>
+                    <div className="gap-3">
+                      <a
+                        href="javascript:void(0)"
+                        className="text-xs lg:text-sm mr-2 bg-blue-500 text-white py-1 px-2 hover:bg-blue-300 hover:text-black rounded-md"
+                        onClick={() => showInput(`comment-id-${data.id}`)}
+                      >
+                        {t("reply")}
+                      </a>
+                      <a
+                        href="javascript:void(0)"
+                        style={
+                          data.commentFrom?.id == userId
+                            ? {}
+                            : {
+                                display: "none",
+                              }
+                        }
+                        className="text-xs lg:text-sm bg-red-500 text-white py-1 px-2 hover:bg-red-300 hover:text-black rounded-md"
+                        onClick={() => deleteData(data.id)}
+                      >
+                        {t("delete")}
+                      </a>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  className="flex flex-row px-4 pl-[55px] lg:px-14 lg:pl-[135px] mt-2"
+                  id={`comment-id-${data.id}`}
+                >
+                  <Input
+                    type="text"
+                    id={`input-comment-${data.id}`}
+                    className="p-4 focus:outline-none focus:border-sky-500"
+                    placeholder={t("enterReply")}
+                  />
+                  <a
+                    href="javascript:void(0)"
+                    className="flex py-1 px-2 rounded-md items-center ml-2 bg-[#f7b357] text-white text-sm lg:text-base"
+                    onClick={() => postDataChild(data.id)}
+                  >
+                    {t("send")}
+                  </a>
+                </div>
+                {data.children.length > 0
+                  ? data.children?.map((child1: any) => (
+                      <div className="flex flex-col">
+                        <div className="flex flex-row mt-2 px-4 lg:pr-14 pl-12 lg:pl-32">
+                          <Image
+                            placeholder={`data:image/svg+xml;base64,${toBase64(
+                              shimmer(700, 475)
+                            )}`}
+                            width={512}
+                            height={512}
+                            className="h-10 lg:h-20 w-10 lg:w-20"
+                            src="/assets/img/user-avatar-yellow.svg"
+                            alt="#"
+                          />
+                          <div className="border border-slate-300 w-full p-4 bg-white gap-1">
+                            <p className="flex justify-between text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
+                              <b>
+                                {Number(child1.commentFrom?.roleId) == 2 ||
+                                Number(child1.commentFrom?.roleId) == 3 ||
+                                Number(child1.commentFrom?.roleId) == 4
+                                  ? "HUMAS POLRI"
+                                  : child1.commentFrom?.fullname}
+                              </b>
+                              {`${new Date(child1.createdAt).getDate()}/${
+                                new Date(child1.createdAt).getMonth() + 1
+                              }/${new Date(
+                                child1.createdAt
+                              ).getFullYear()} ${new Date(
+                                child1.createdAt
+                              ).getHours()}:${new Date(
+                                child1.createdAt
+                              ).getMinutes()}`}
+                            </p>
+                            <p className="text-slate-500 text-sm mb-4">
+                              {child1.message}
+                            </p>
+                            <div className="gap-3">
+                              <a
+                                href="javascript:void(0)"
+                                className="mr-2 text-xs lg:text-sm bg-blue-500 text-white py-1 px-2 hover:bg-blue-300 hover:text-black rounded-md"
+                                onClick={() =>
+                                  showInput(`comment-id-${child1.id}`)
+                                }
+                              >
+                                {t("reply")}
+                              </a>
+                              <a
+                                href="javascript:void(0)"
+                                className="text-xs lg:text-sm bg-red-500 text-white py-1 px-2 hover:bg-red-300 hover:text-black rounded-md"
+                                style={
+                                  Number(child1.commentFrom?.id) ==
+                                  Number(userId)
+                                    ? {}
+                                    : {
+                                        display: "none",
+                                      }
+                                }
+                                onClick={() => deleteData(child1.id)}
+                              >
+                                {t("delete")}
+                              </a>
+                            </div>
+                          </div>
+                        </div>
+                        <div
+                          className="flex flex-row justify-center px-4 pl-[87px] lg:px-14 lg:pl-[205px] mt-2"
+                          id={`comment-id-${child1.id}`}
+                        >
+                          <Input
+                            type="text"
+                            id={`input-comment-${child1.id}`}
+                            className="p-4 focus:outline-none focus:border-sky-500"
+                            placeholder={t("enterReply")}
+                          />
+                          <a
+                            href="javascript:void(0)"
+                            className="flex text-sm lg:text-base py-1 px-2 rounded-md items-center ml-2 bg-[#f7b357] text-white"
+                            onClick={() => postDataChild(child1.id)}
+                          >
+                            {t("send")}
+                          </a>
+                        </div>
+                        {child1.children.length > 0
+                          ? child1.children?.map((child2: any) => (
+                              <div className="flex flex-col">
+                                <div className="flex flex-row mt-2 px-4 lg:pr-14 pl-20 lg:pl-48">
+                                  <Image
+                                    placeholder={`data:image/svg+xml;base64,${toBase64(
+                                      shimmer(700, 475)
+                                    )}`}
+                                    width={512}
+                                    height={512}
+                                    className="h-10 lg:h-20 w-10 lg:w-20"
+                                    src="/assets/img/user-avatar-yellow.svg"
+                                    alt="#"
+                                  />
+                                  <div className="border border-slate-300 w-full p-4 bg-white gap-2">
+                                    <p className="flex justify-between text-slate-500 text-xs lg:text-base border-b-2 border-slate-200 mb-2">
+                                      <b>
+                                        {Number(child2.commentFrom?.roleId) ==
+                                          2 ||
+                                        Number(child2.commentFrom?.roleId) ==
+                                          3 ||
+                                        Number(child2.commentFrom?.roleId) == 4
+                                          ? "HUMAS POLRI"
+                                          : child2.commentFrom?.fullname}
+                                      </b>
+                                      {`${new Date(
+                                        child2.createdAt
+                                      ).getDate()}/${
+                                        new Date(child2.createdAt).getMonth() +
+                                        1
+                                      }/${new Date(
+                                        child2.createdAt
+                                      ).getFullYear()} ${new Date(
+                                        child2.createdAt
+                                      ).getHours()}:${new Date(
+                                        child2.createdAt
+                                      ).getMinutes()}`}
+                                    </p>
+                                    <p className="text-slate-500 text-sm mb-4">
+                                      {child2.message}
+                                    </p>
+                                    <div>
+                                      <a
+                                        href="javascript:void(0)"
+                                        className="mr-2 text-xs lg:text-sm bg-blue-500 text-white py-1 px-2 hover:bg-blue-300 hover:text-black rounded-md"
+                                        onClick={() =>
+                                          showInput("comment-id-" + child2.id)
+                                        }
+                                      >
+                                        {t("reply")}
+                                      </a>
+                                      <a
+                                        href="javascript:void(0)"
+                                        className="text-xs lg:text-sm bg-red-500 text-white py-1 px-2 hover:bg-red-300 hover:text-black rounded-md"
+                                        style={
+                                          Number(child2.commentFrom?.id) ==
+                                          Number(userId)
+                                            ? {}
+                                            : {
+                                                display: "none",
+                                              }
+                                        }
+                                        onClick={() => deleteData(child2.id)}
+                                      >
+                                        {t("delete")}
+                                      </a>
+                                    </div>
+                                  </div>
+                                </div>
+                                <div
+                                  className="flex flex-row px-4 pl-[120px] lg:px-14 lg:pl-[270px] mt-2"
+                                  id={`comment-id-${child2.id}`}
+                                >
+                                  <Input
+                                    type="text"
+                                    id={`comment-id-${child2.id}`}
+                                    className="p-4 focus:outline-none focus:border-sky-500"
+                                    placeholder={t("enterReply")}
+                                  />
+                                  <a
+                                    href="javascript:void(0)"
+                                    className="flex text-sm lg:text-base py-1 px-2 rounded-md items-center ml-2 bg-[#f7b357] text-white"
+                                    onClick={() => postDataChild(child1.id)}
+                                  >
+                                    {t("send")}
+                                  </a>
+                                </div>
+                              </div>
+                            ))
+                          : ""}
+                      </div>
+                    ))
+                  : ""}
+              </div>
+            ))}
           </div>
         </div>
 
         {/* Konten Serupa */}
-        <div className="space-x-5 flex flex-col px-4 lg:px-16 py-16 gap-5">
-          <h1 className="font-bold text-base lg:text-xl px-4 lg:px-8">Post Terkait</h1>
+        <div className="space-x-5 flex flex-col px-4 lg:px-[300px] py-16 gap-5">
+          <h1 className="font-bold text-base lg:text-xl px-4 lg:px-8">
+            {" "}
+            {t("relatedPosts")}
+          </h1>
           <Carousel>
             <CarouselContent className="w-full max-w-7xl">
-              {relatedPost?.map((relate: any) => (
-                <CarouselItem key={relate?.id} className="md:basis-1/2 lg:basis-1/3">
-                  <Link href={`/indeks/detail/${relate?.slug}`} className="relative group overflow-hidden shadow-md hover:shadow-lg">
-                    <img src={relate?.thumbnailLink} className="w-full rounded-lg h-40 lg:h-60 object-cover group-hover:scale-100 transition-transform duration-300" />
+              {indexData?.map((relate: any) => (
+                <CarouselItem
+                  key={relate?.id}
+                  className="md:basis-1/2 lg:basis-1/3"
+                >
+                  <Link
+                    href={`/indeks/detail/${relate?.slug}`}
+                    className="relative group overflow-hidden shadow-md hover:shadow-lg"
+                  >
+                    <Image
+                      placeholder={`data:image/svg+xml;base64,${toBase64(
+                        shimmer(700, 475)
+                      )}`}
+                      alt=""
+                      width={2560}
+                      height={1440}
+                      src={relate?.thumbnailLink}
+                      className="w-full rounded-lg h-40 lg:h-60 object-cover group-hover:scale-100 transition-transform duration-300"
+                    />
                     <div className="absolute bottom-0 left-0 right-0 bg-gray-600 border-l-4 border-[#bb3523] rounded-lg backdrop-blur-sm text-white p-2">
-                      <span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-sm px-4 py-1">{relate?.categoryName}</span>
-                      <h1 className="text-sm lg:text-lg mb-2 font-semibold h-5 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">{relate?.title}</h1>
+                      <span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-sm px-4 py-1">
+                        {relate?.categoryName}
+                      </span>
+                      <h1 className="text-sm lg:text-lg mb-2 font-semibold h-5 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">
+                        {relate?.title}
+                      </h1>
                       <p className="flex flex-row items-center text-[10px] gap-2">
-                        {formatDateToIndonesian(new Date(relate?.createdAt))} {relate?.timezone ? relate?.timezone : "WIB"} | <Icon icon="formkit:eye" width="15" height="15" /> {relate.clickCount}{" "}
+                        {formatDateToIndonesian(new Date(relate?.createdAt))}{" "}
+                        {relate?.timezone ? relate?.timezone : "WIB"} |{" "}
+                        <Icon icon="formkit:eye" width="15" height="15" />{" "}
+                        {relate.clickCount}{" "}
                       </p>
                     </div>
                   </Link>
diff --git a/app/[locale]/(public)/(satker)/satker/[satker_name]/indeks/page.tsx b/app/[locale]/(public)/(satker)/satker/[satker_name]/indeks/page.tsx
index ebf34670..7a72e0bd 100644
--- a/app/[locale]/(public)/(satker)/satker/[satker_name]/indeks/page.tsx
+++ b/app/[locale]/(public)/(satker)/satker/[satker_name]/indeks/page.tsx
@@ -1,15 +1,31 @@
 "use client";
 
+import { Skeleton } from "@/components/ui/skeleton";
 import { Link } from "@/i18n/routing";
 import { getIndeksData } from "@/service/landing/landing";
-import { formatDateToIndonesian } from "@/utils/globals";
-import { usePathname } from "next/navigation";
+import { formatDateToIndonesian, htmlToString } from "@/utils/globals";
+import Image from "next/image";
+import { useParams, usePathname } from "next/navigation";
 import React, { useEffect, useState } from "react";
 
 const Indeks: React.FC = () => {
   const pathname = usePathname();
   const [indeksData, setIndeksData] = useState<any>();
+  const [isLoading, setIsLoading] = useState<any>(true);
+  const params = useParams();
+  const sarkerName: any = params?.satker_name;
+  let prefixPath = sarkerName ? `/satker/${sarkerName}` : "/";
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setIsLoading(false);
+    }, 3000);
+
+    return () => clearTimeout(timer);
+  }, []);
+
   let count: number = 0;
+
   useEffect(() => {
     if (indeksData) {
       const intervalId = setInterval(() => {
@@ -21,93 +37,230 @@ const Indeks: React.FC = () => {
   }, [indeksData]);
 
   useEffect(() => {
-    initFetch();
-  }, []);
-  const initFetch = async () => {
-    const response = await getIndeksData();
-    console.log(response);
-    setIndeksData(response?.data?.data?.content);
+    if (sarkerName) {
+      initFetch(sarkerName);
+    }
+  }, [sarkerName]);
+
+  const initFetch = async (sarkerName: string) => {
+    try {
+      const response = await getIndeksData();
+      console.log(response);
+      setIndeksData(response?.data?.data?.content);
+    } catch (error) {
+      console.error("Failed to fetch indeks data:", error);
+    }
   };
 
+  const shimmer = (w: number, h: number) => `
+  <svg width="${w}" height="${h}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs>
+      <linearGradient id="g">
+        <stop stop-color="#bcbcbd" offset="20%" />
+        <stop stop-color="#f9fafb" offset="50%" />
+        <stop stop-color="#bcbcbd" offset="70%" />
+      </linearGradient>
+    </defs>
+    <rect width="${w}" height="${h}" fill="#bcbcbd" />
+    <rect id="r" width="${w}" height="${h}" fill="url(#g)" />
+    <animate xlink:href="#r" attributeName="x" from="-${w}" to="${w}" dur="1s" repeatCount="indefinite"  />
+  </svg>`;
+
+  const toBase64 = (str: string) =>
+    typeof window === "undefined"
+      ? Buffer.from(str).toString("base64")
+      : window.btoa(str);
+
   return (
-    <div className="px-4 lg:px-14">
+    <div className="px-4 lg:px-14 min-h-[75.5vh]">
       {/* Hero Left */}
       <div className="flex flex-col lg:flex-row items-start gap-8 px-4 lg:px-10 py-4 mx-auto">
-        <div className="lg:w-[60%] w-full lg:h-full">
-          {indeksData?.map(
-            (indeks: any, index: number) =>
-              index == count && (
-                <div key={indeks?.id} className="relative h-[310px] lg:h-[435px]">
-                  <img src={indeks?.thumbnailLink} alt="image" className="w-full h-[310px] lg:h-[435px] rounded-lg" />
-                  <div className="absolute bottom-0 left-0 right-0 bg-transparent backdrop-blur-sm text-white p-4 rounded-b-lg">
-                    <span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-sm px-4 py-1">{indeks?.categoryName}</span>
-                    <Link href={`/indeks/detail/${indeks?.slug}`}>
-                      <h2 className="text-2xl font-bold mt-2">{indeks?.title}</h2>
-                    </Link>
-                    <p className="text-xs flex flex-row items-center gap-1 mt-1 ml-2">
-                      {formatDateToIndonesian(new Date(indeks?.createdAt))} {indeks?.timezone ? indeks?.timezone : "WIB"}|{" "}
-                      <svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24">
-                        <path
-                          fill="currentColor"
-                          d="M11.5 18c4 0 7.46-2.22 9.24-5.5C18.96 9.22 15.5 7 11.5 7s-7.46 2.22-9.24 5.5C4.04 15.78 7.5 18 11.5 18m0-12c4.56 0 8.5 2.65 10.36 6.5C20 16.35 16.06 19 11.5 19S3 16.35 1.14 12.5C3 8.65 6.94 6 11.5 6m0 2C14 8 16 10 16 12.5S14 17 11.5 17S7 15 7 12.5S9 8 11.5 8m0 1A3.5 3.5 0 0 0 8 12.5a3.5 3.5 0 0 0 3.5 3.5a3.5 3.5 0 0 0 3.5-3.5A3.5 3.5 0 0 0 11.5 9"
-                        />
-                      </svg>{" "}
-                      {indeks?.clickCount}
-                    </p>
+        {isLoading ? (
+          <div className="flex flex-col space-y-3 mx-auto w-full lg:w-2/3">
+            <Skeleton className="h-[310px] lg:h-[420px]  rounded-xl" />
+          </div>
+        ) : (
+          <div className="lg:w-[60%] w-full lg:h-full">
+            {indeksData?.map(
+              (indeks: any, index: number) =>
+                index == count && (
+                  <div
+                    key={indeks?.id}
+                    className="relative h-[310px] lg:h-[435px]"
+                  >
+                    <Image
+                      placeholder={`data:image/svg+xml;base64,${toBase64(
+                        shimmer(700, 475)
+                      )}`}
+                      width={2560}
+                      height={1440}
+                      src={indeks?.thumbnailLink}
+                      alt="image"
+                      className="w-full h-[310px] lg:h-[435px] rounded-lg object-cover"
+                    />
+                    <div className="absolute bottom-0 left-0 right-0 bg-black/15 backdrop-brightness-50 text-white p-4 rounded-b-lg">
+                      <span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-xs px-2 py-1">
+                        {indeks?.categoryName}
+                      </span>
+                      <Link
+                        href={`${prefixPath}/indeks/detail/${indeks?.slug}`}
+                      >
+                        <h2 className="text-2xl font-bold mt-2">
+                          {indeks?.title}
+                        </h2>
+                      </Link>
+                      <p className="text-xs flex flex-row items-center gap-1 mt-1">
+                        {formatDateToIndonesian(new Date(indeks?.createdAt))}{" "}
+                        {indeks?.timezone ? indeks?.timezone : "WIB"} |{" "}
+                        {/* <svg
+                          xmlns="http://www.w3.org/2000/svg"
+                          width="1.2em"
+                          height="1.2em"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            fill="currentColor"
+                            d="M11.5 18c4 0 7.46-2.22 9.24-5.5C18.96 9.22 15.5 7 11.5 7s-7.46 2.22-9.24 5.5C4.04 15.78 7.5 18 11.5 18m0-12c4.56 0 8.5 2.65 10.36 6.5C20 16.35 16.06 19 11.5 19S3 16.35 1.14 12.5C3 8.65 6.94 6 11.5 6m0 2C14 8 16 10 16 12.5S14 17 11.5 17S7 15 7 12.5S9 8 11.5 8m0 1A3.5 3.5 0 0 0 8 12.5a3.5 3.5 0 0 0 3.5 3.5a3.5 3.5 0 0 0 3.5-3.5A3.5 3.5 0 0 0 11.5 9"
+                          />
+                        </svg>{" "} */}
+                        {/* {indeks?.clickCount} */}
+                      </p>
+                    </div>
                   </div>
-                </div>
-              )
-          )}
-        </div>
+                )
+            )}
+          </div>
+        )}
 
         {/* Hero Right */}
         <div className="lg:w-[40%] w-full space-y-2">
-          {indeksData?.map(
-            (indeksRight: any, index: number) =>
-              (index == count + 1 || index == count + 2) && (
-                <div key={indeksRight?.id} className="relative h-[310px] lg:h-[215px]">
-                  <img src={indeksRight?.thumbnailLink} alt="image" className="w-full h-[310px] lg:h-[215px] rounded-lg " />
-                  <div className="absolute bottom-0 left-0 right-0 bg-transparent backdrop-blur-sm text-white p-4 rounded-b-lg">
-                    <span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-sm px-4 py-1">{indeksRight?.categoryName}</span>
-                    <Link href={`/indeks/detail/${indeksRight?.slug}`}>
-                      <h2 className="text-xl font-bold mt-2">{indeksRight?.title}</h2>
-                    </Link>
-                    <p className="text-xs flex flex-row items-center gap-1 mt-1 ml-2">
-                      {formatDateToIndonesian(new Date(indeksRight?.createdAt))} {indeksRight?.timezone ? indeksRight?.timezone : "WIB"}|{" "}
-                      <svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24">
-                        <path
-                          fill="currentColor"
-                          d="M11.5 18c4 0 7.46-2.22 9.24-5.5C18.96 9.22 15.5 7 11.5 7s-7.46 2.22-9.24 5.5C4.04 15.78 7.5 18 11.5 18m0-12c4.56 0 8.5 2.65 10.36 6.5C20 16.35 16.06 19 11.5 19S3 16.35 1.14 12.5C3 8.65 6.94 6 11.5 6m0 2C14 8 16 10 16 12.5S14 17 11.5 17S7 15 7 12.5S9 8 11.5 8m0 1A3.5 3.5 0 0 0 8 12.5a3.5 3.5 0 0 0 3.5 3.5a3.5 3.5 0 0 0 3.5-3.5A3.5 3.5 0 0 0 11.5 9"
-                        />
-                      </svg>{" "}
-                      {indeksRight?.clickCount}
-                    </p>
-                  </div>
-                </div>
-              )
+          {isLoading ? (
+            <>
+              <div className="flex flex-col space-y-3 w-full justify-center items-center gap-3">
+                <Skeleton className="h-[200px] w-full lg:w-[400px] rounded-xl" />
+                <Skeleton className="h-[200px] w-full lg:w-[400px] rounded-xl" />
+              </div>
+            </>
+          ) : (
+            <>
+              {indeksData?.map(
+                (indeksRight: any, index: number) =>
+                  (index == count + 1 || index == count + 2) && (
+                    <div
+                      key={indeksRight?.id}
+                      className="relative h-[310px] lg:h-[215px]"
+                    >
+                      <Image
+                        placeholder={`data:image/svg+xml;base64,${toBase64(
+                          shimmer(700, 475)
+                        )}`}
+                        width={1920}
+                        height={1080}
+                        src={indeksRight?.thumbnailLink}
+                        alt="image"
+                        className="w-full h-[310px] lg:h-[215px] rounded-lg "
+                      />
+                      <div className="absolute bottom-0 left-0 right-0 bg-black/15 backdrop-brightness-50 text-white p-4 rounded-b-lg">
+                        <span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-xs px-2 py-1">
+                          {indeksRight?.categoryName}
+                        </span>
+                        <Link href={`/indeks/detail/${indeksRight?.slug}`}>
+                          <h2 className="text-xl font-bold mt-2">
+                            {indeksRight?.title}
+                          </h2>
+                        </Link>
+                        <p className="text-xs flex flex-row items-center gap-1 mt-1 ml-2">
+                          {formatDateToIndonesian(
+                            new Date(indeksRight?.createdAt)
+                          )}{" "}
+                          {indeksRight?.timezone
+                            ? indeksRight?.timezone
+                            : "WIB"}
+                          |{" "}
+                          {/* <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            width="1.2em"
+                            height="1.2em"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              fill="currentColor"
+                              d="M11.5 18c4 0 7.46-2.22 9.24-5.5C18.96 9.22 15.5 7 11.5 7s-7.46 2.22-9.24 5.5C4.04 15.78 7.5 18 11.5 18m0-12c4.56 0 8.5 2.65 10.36 6.5C20 16.35 16.06 19 11.5 19S3 16.35 1.14 12.5C3 8.65 6.94 6 11.5 6m0 2C14 8 16 10 16 12.5S14 17 11.5 17S7 15 7 12.5S9 8 11.5 8m0 1A3.5 3.5 0 0 0 8 12.5a3.5 3.5 0 0 0 3.5 3.5a3.5 3.5 0 0 0 3.5-3.5A3.5 3.5 0 0 0 11.5 9"
+                            />
+                          </svg>{" "}
+                          {indeksRight?.clickCount} */}
+                        </p>
+                      </div>
+                    </div>
+                  )
+              )}
+            </>
           )}
         </div>
       </div>
 
       {/* Bottom */}
       <div className="px-4 lg:px-7 py-4">
-        <div className="flex flex-col gap-4">
-          {indeksData?.map(
-            (indeksBottom: any, index: number) =>
-              index < 3 && (
-                <div key={indeksBottom?.id} className="flex flex-col md:flex-row items-start p-4 gap-4">
-                  <img src={indeksBottom?.thumbnailLink} alt="" className="h-40 object-cover rounded-lg w-full lg:w-full lg:h-[300px]" />
-                  <div className="flex flex-col justify-between w-full">
-                    <p className="text-sm">{indeksBottom?.date}</p>
-                    <Link href={`/indeks/detail/${indeksBottom?.slug}`} className="text-2xl font-semibold text-gray-800">
-                      {indeksBottom?.title}
-                    </Link>
-                    <p className="text-sm text-gray-600 mt-2">{indeksBottom?.description}</p>
+        {isLoading ? (
+          <div className="flex flex-col space-y-3 w-full gap-10">
+            <div className="flex flex-col lg:flex-row gap-5">
+              <Skeleton className="h-[300px] w-full lg:w-[500px] rounded-lg" />
+              <div className="space-y-2">
+                <Skeleton className="h-4 w-[250px]" />
+                <Skeleton className="h-4 w-[200px]" />
+              </div>
+            </div>
+            <div className="flex flex-col lg:flex-row gap-5">
+              <Skeleton className="h-[300px] w-full lg:w-[500px] rounded-lg" />
+              <div className="space-y-2">
+                <Skeleton className="h-4 w-[250px]" />
+                <Skeleton className="h-4 w-[200px]" />
+              </div>
+            </div>
+            <div className="flex flex-col lg:flex-row gap-5">
+              <Skeleton className="h-[300px] w-full lg:w-[500px] rounded-lg" />
+              <div className="space-y-2">
+                <Skeleton className="h-4 w-[250px]" />
+                <Skeleton className="h-4 w-[200px]" />
+              </div>
+            </div>
+          </div>
+        ) : (
+          <div className="flex flex-col gap-4">
+            {indeksData?.map(
+              (indeksBottom: any, index: number) =>
+                index < 3 && (
+                  <div
+                    key={indeksBottom?.id}
+                    className="flex flex-col md:flex-row items-start p-4 gap-4"
+                  >
+                    <Image
+                      placeholder={`data:image/svg+xml;base64,${toBase64(
+                        shimmer(700, 475)
+                      )}`}
+                      width={500}
+                      height={250}
+                      src={indeksBottom?.thumbnailLink}
+                      alt=""
+                      className="h-40 object-cover rounded-lg w-full lg:w-[550px] lg:h-[200px]"
+                    />
+                    <div className="flex flex-col justify-between w-full">
+                      <p className="text-sm">{indeksBottom?.date}</p>
+                      <Link
+                        href={`/indeks/detail/${indeksBottom?.slug}`}
+                        className="text-2xl font-semibold text-gray-800 dark:text-white"
+                      >
+                        {indeksBottom?.title}
+                      </Link>
+                      <p className="text-sm text-gray-600 dark:text-white mt-2">
+                        {htmlToString(indeksBottom?.description)}
+                      </p>
+                    </div>
                   </div>
-                </div>
-              )
-          )}
-        </div>
+                )
+            )}
+          </div>
+        )}
       </div>
     </div>
   );
diff --git a/app/[locale]/(public)/indeks/detail/[slug]/page.tsx b/app/[locale]/(public)/indeks/detail/[slug]/page.tsx
index a452ccc3..ef5df705 100644
--- a/app/[locale]/(public)/indeks/detail/[slug]/page.tsx
+++ b/app/[locale]/(public)/indeks/detail/[slug]/page.tsx
@@ -188,9 +188,9 @@ const IndeksDetail = () => {
 
   return (
     <>
-      <div className="p-4 lg:px-28 lg:p-12">
+      <div className="p-4 w-full lg:p-12">
         {/* Judul */}
-        <div className="flex flex-col mb-5">
+        <div className="flex flex-col px-4 lg:px-[300px] mb-5">
           <h1 className="text-base lg:text-lg mb-2">Index / Detail</h1>
           <h1 className="flex flex-row font-bold text-center text-lg lg:text-2xl">
             {indeksData?.title}
@@ -206,25 +206,28 @@ const IndeksDetail = () => {
             height={1440}
             src={indeksData?.thumbnailLink}
             alt="Main"
-            className="w-full max-h-[550px] object-contain rounded-xl "
+            className="w-full max-h-[550px] object-contain rounded-xl"
           />
         </div>
 
         {/* Footer Informasi */}
-        <div className="text-gray-500  flex border-t mt-4">
-          <div className="flex mt-2">
-            <p className="text-xs lg:text-sm mb-2 ">
-              {t("by")}&nbsp;
-              <span className="font-semibold text-gray-500">
-                {indeksData?.uploaderName}
-              </span>
-              &nbsp; | &nbsp;{t("updatedOn")} {indeksData?.createdAt} WIB &nbsp;
-            </p>
+        <div className="px-4 lg:px-[300px]">
+          <div className="text-gray-500  flex border-t mt-4">
+            <div className="flex mt-2">
+              <p className="text-xs lg:text-sm mb-2 ">
+                {t("by")}&nbsp;
+                <span className="font-semibold text-gray-500">
+                  {indeksData?.uploaderName}
+                </span>
+                &nbsp; | &nbsp;{t("updatedOn")} {indeksData?.createdAt} WIB
+                &nbsp;
+              </p>
+            </div>
           </div>
         </div>
 
         {/* Keterangan */}
-        <div className="w-auto">
+        <div className="w-full px-4 lg:px-[300px]">
           <p
             className="font-light text-base lg:text-lg text-justify"
             dangerouslySetInnerHTML={{ __html: indeksData?.description }}
@@ -233,9 +236,9 @@ const IndeksDetail = () => {
       </div>
 
       {/* Comment */}
-      <div className="w-full">
+      <div className="w-full ">
         <div className="flex flex-col py-5 p-0 lg:p-10 bg-[#f7f7f7] dark:bg-slate-600">
-          <div className="gap-5 flex flex-col px-4 lg:px-16">
+          <div className="gap-5 flex flex-col px-4 lg:px-[300px]">
             <p className="flex items-start text-bases lg:text-lg">
               {t("comment")}
             </p>
@@ -253,9 +256,11 @@ const IndeksDetail = () => {
             </button>
           </div>
 
-          <div className="border-b-2  border-slate-300 mt-4 w-auto"></div>
+          <div className="px-4 lg:px-[300px]">
+            <div className="border-b-2  border-slate-300 mt-4"></div>
+          </div>
 
-          <div>
+          <div className="px-4 lg:px-[230px]">
             {listComments?.map((data: any) => (
               <div className="flex flex-col">
                 <div className="flex flex-row mt-2 px-4 lg:px-14">
@@ -511,7 +516,7 @@ const IndeksDetail = () => {
         </div>
 
         {/* Konten Serupa */}
-        <div className="space-x-5 flex flex-col px-4 lg:px-16 py-16 gap-5">
+        <div className="space-x-5 flex flex-col px-4 lg:px-[300px] py-16 gap-5">
           <h1 className="font-bold text-base lg:text-xl px-4 lg:px-8">
             {" "}
             {t("relatedPosts")}
diff --git a/components/landing-page/landing-polda-kaltara/contact-us-kaltara.tsx b/components/landing-page/landing-polda-kaltara/contact-us-kaltara.tsx
index ef447a5a..a268df70 100644
--- a/components/landing-page/landing-polda-kaltara/contact-us-kaltara.tsx
+++ b/components/landing-page/landing-polda-kaltara/contact-us-kaltara.tsx
@@ -45,7 +45,7 @@ const channels: Channel[] = [
 
 const ContactUsKaltara = () => {
   return (
-    <div className="min-h-[300px] lg:min-h-[300px] text-black px-4 lg:px-20 pb-20">
+    <div className="min-h-[300px] lg:min-h-[300px] text-black px-4 lg:px-[115px] pb-20">
       <div className="w-full px-4 py-4 bg-white">
         <h2 className="text-center text-xl md:text-2xl font-semibold mb-6">Channel Divisi Humas Polri</h2>
 
diff --git a/components/landing-page/landing-polda-kaltara/content-category-kaltara.tsx b/components/landing-page/landing-polda-kaltara/content-category-kaltara.tsx
index d4a3a325..174e6465 100644
--- a/components/landing-page/landing-polda-kaltara/content-category-kaltara.tsx
+++ b/components/landing-page/landing-polda-kaltara/content-category-kaltara.tsx
@@ -73,7 +73,7 @@ const ContentCategoryKaltara = (props: { group?: string; type: string }) => {
       : window.btoa(str);
 
   return (
-    <div className="px-4 lg:px-24 py-10">
+    <div className="px-4 lg:px-[115px] py-10">
       <Reveal>
         <h2 className="text-center text-xl lg:text-3xl font-bold text-[#bb3523] mb-4">
           {pathname?.split("/")[1] == "in" ? (
diff --git a/components/landing-page/landing-polda-kaltara/latest-content-kaltara.tsx b/components/landing-page/landing-polda-kaltara/latest-content-kaltara.tsx
index b220be2d..1542fb15 100644
--- a/components/landing-page/landing-polda-kaltara/latest-content-kaltara.tsx
+++ b/components/landing-page/landing-polda-kaltara/latest-content-kaltara.tsx
@@ -74,7 +74,7 @@ const LatestContentKaltara = (props: { group: string; type: string }) => {
   return (
     <>
       <Reveal>
-        <div className="px-4 lg:px-24 my-10">
+        <div className="px-4 lg:px-[115px] my-10">
           {/* <div className="bg-[#c03724] rounded-md p-3 w-fit text-white">Berita {props.type == "popular" ? "Terpopuler" : props.type == "latest" ? t("new") : "Serupa"}</div> */}
           <div className="w-full justify-start flex flex-col lg:flex-row gap-20 mb-4">
             <h2 className="flex items-center text-xl lg:text-2xl w-fit font-bold bg-[#bb3523] px-4 py-1 rounded-lg text-white">
diff --git a/components/main/audio-detail.tsx b/components/main/audio-detail.tsx
index 81a69033..548c94c2 100644
--- a/components/main/audio-detail.tsx
+++ b/components/main/audio-detail.tsx
@@ -891,7 +891,27 @@ const DetailAudio = () => {
         {/* Comment */}
         <div className="flex flex-col my-16 p-4 lg:p-10 bg-[#f7f7f7] dark:bg-slate-600">
           <div className="gap-5 flex flex-col px-4 lg:px-14">
-            <p className="flex items-start text-lg">{t("comment")}</p>
+            <div className="flex flex-col">
+              <h1 className="mb-2">{t("shareTo")}</h1>
+              <div className="flex flex-col mb-2">
+                <p className="text-base font-semibold mb-1">
+                  {t("destinationEmail")}
+                </p>
+                <Input
+                  value={emailShareInput}
+                  onChange={(event) => setEmailShareInput(event.target.value)}
+                  onKeyPress={handleEmailList}
+                  type="email"
+                  placeholder={t("pressEnter")}
+                />
+              </div>
+              <Button
+                className="bg-blue-500 text-white p-2 w-fit rounded-lg"
+                onClick={() => shareToEmail()}
+              >
+                {t("send")}
+              </Button>
+            </div>{" "}
             <Textarea
               placeholder="Type your comments here."
               className="flex w-full pb-12"
diff --git a/components/main/document-detail.tsx b/components/main/document-detail.tsx
index b4e1c583..2908eaa7 100644
--- a/components/main/document-detail.tsx
+++ b/components/main/document-detail.tsx
@@ -621,7 +621,27 @@ const DetailDocument = () => {
 
             {/* Tombol Bagikan */}
             <div className="flex flex-row py-3">
-              <p className="text-base font-semibold">{t("share")}</p>
+              <div className="flex flex-col">
+                <h1 className="mb-2">{t("shareTo")}</h1>
+                <div className="flex flex-col mb-2">
+                  <p className="text-base font-semibold mb-1">
+                    {t("destinationEmail")}
+                  </p>
+                  <Input
+                    value={emailShareInput}
+                    onChange={(event) => setEmailShareInput(event.target.value)}
+                    onKeyPress={handleEmailList}
+                    type="email"
+                    placeholder={t("pressEnter")}
+                  />
+                </div>
+                <Button
+                  className="bg-blue-500 text-white p-2 w-fit rounded-lg"
+                  onClick={() => shareToEmail()}
+                >
+                  {t("send")}
+                </Button>
+              </div>{" "}
               <a
                 className="ml-8 cursor-pointer"
                 onClick={() =>
diff --git a/components/main/image-detail.tsx b/components/main/image-detail.tsx
index 23e2ef53..4746373d 100644
--- a/components/main/image-detail.tsx
+++ b/components/main/image-detail.tsx
@@ -513,7 +513,7 @@ const DetailImage = (data: any) => {
 
   return (
     <>
-      <div className="w-full max-w-screen-xl mx-auto px-4 py-4">
+      <div className="w-full max-w-screen-xl mx-auto py-4">
         <div className="rounded-md overflow-hidden md:flex flex-row justify-center">
           {/* Bagian Kiri */}
           <div className="">
@@ -523,7 +523,7 @@ const DetailImage = (data: any) => {
                 <Skeleton className="rounded-lg h-[300px] w-screen lg:h-[600px] lg:w-[900px]" />
               </div>
             ) : (
-              <div className="relative self-end ml-auto">
+              <div className="relative">
                 <Image
                   placeholder={`data:image/svg+xml;base64,${toBase64(
                     shimmer(700, 475)
@@ -532,7 +532,7 @@ const DetailImage = (data: any) => {
                   height={1440}
                   src={detailDataImage?.files[selectedImage]?.url}
                   alt="Main"
-                  className="rounded-md w-full h-[560px] object-contain"
+                  className="rounded-lg h-[300px] w-screen lg:h-[600px] lg:w-[900px] object-cover"
                 />
 
                 <div className="absolute top-4 right-4"></div>
@@ -724,7 +724,43 @@ const DetailImage = (data: any) => {
 
             {/* Tombol Bagikan */}
             <div className="flex flex-row mt-5 justify-center">
-              <p className="text-base font-semibold">{t("share")}</p>
+              <div className="flex items-center gap-1 hover:text-red-800 w-full rounded-lg">
+                <Popover>
+                  <PopoverTrigger asChild>
+                    <button className="w-full flex items-center gap-2">
+                      {/* <Icon icon="oi:share" fontSize={20} /> */}
+                      <p className="text-base font-semibold mb-2">
+                        {t("share")}
+                      </p>
+                    </button>
+                  </PopoverTrigger>
+                  <PopoverContent>
+                    <div className="flex flex-col">
+                      <h1 className="mb-2">{t("shareTo")}</h1>
+                      <div className="flex flex-col mb-2">
+                        <p className="text-base font-semibold mb-1">
+                          {t("destinationEmail")}
+                        </p>
+                        <Input
+                          value={emailShareInput}
+                          onChange={(event) =>
+                            setEmailShareInput(event.target.value)
+                          }
+                          onKeyPress={handleEmailList}
+                          type="email"
+                          placeholder={t("pressEnter")}
+                        />
+                      </div>
+                      <Button
+                        className="bg-blue-500 text-white p-2 w-fit rounded-lg"
+                        onClick={() => shareToEmail()}
+                      >
+                        {t("send")}
+                      </Button>
+                    </div>
+                  </PopoverContent>
+                </Popover>
+              </div>
               <a
                 className="ml-8 cursor-pointer"
                 onClick={() =>
@@ -821,8 +857,8 @@ const DetailImage = (data: any) => {
 
       <div className="w-full mb-8">
         {/* Comment */}
-        <div className="flex flex-col my-16 p-4 lg:p-10 bg-[#f7f7f7] dark:bg-slate-600">
-          <div className="gap-5 flex flex-col px-4 lg:px-14">
+        <div className="flex  flex-col my-16 p-4 lg:p-10 bg-[#f7f7f7] dark:bg-slate-600">
+          <div className="gap-5 flex flex-col px-4 lg:px-[300px]">
             <p className="flex items-start text-lg">{t("comment")}</p>
             <Textarea
               placeholder={t("leaveComment")}
@@ -836,9 +872,9 @@ const DetailImage = (data: any) => {
               {t("send")}
             </button>
           </div>
-
-          <div className="border-b-2  border-slate-300 mt-4 w-auto"></div>
-
+          <div className="px-4 lg:px-[300px]">
+            <div className="border-b-2  border-slate-300 mt-4 w-auto"></div>
+          </div>
           <div>
             {listSuggestion?.map((data: any) => (
               <div className="flex flex-col">
@@ -1136,7 +1172,7 @@ const DetailImage = (data: any) => {
         </div>
 
         {/* Konten Serupa */}
-        <div className="px-4 lg:px-[100px]">
+        <div className="px-4 mx-auto lg:px-[340px]">
           <NewContent group="mabes" type={"similar"} />
         </div>
       </div>
diff --git a/components/main/video-detail.tsx b/components/main/video-detail.tsx
index 991b863d..7950116c 100644
--- a/components/main/video-detail.tsx
+++ b/components/main/video-detail.tsx
@@ -639,7 +639,43 @@ const DetailVideo = () => {
 
             {/* Tombol Bagikan */}
             <div className="flex flex-row justify-center py-3">
-              <p className="text-base font-semibold">{t("share")}</p>
+              <div className="flex items-center gap-1 hover:text-red-800 w-full rounded-lg">
+                <Popover>
+                  <PopoverTrigger asChild>
+                    <button className="w-full flex items-center gap-2">
+                      {/* <Icon icon="oi:share" fontSize={20} /> */}
+                      <p className="text-base font-semibold mb-2">
+                        {t("share")}
+                      </p>
+                    </button>
+                  </PopoverTrigger>
+                  <PopoverContent>
+                    <div className="flex flex-col">
+                      <h1 className="mb-2">{t("shareTo")}</h1>
+                      <div className="flex flex-col mb-2">
+                        <p className="text-base font-semibold mb-1">
+                          {t("destinationEmail")}
+                        </p>
+                        <Input
+                          value={emailShareInput}
+                          onChange={(event) =>
+                            setEmailShareInput(event.target.value)
+                          }
+                          onKeyPress={handleEmailList}
+                          type="email"
+                          placeholder={t("pressEnter")}
+                        />
+                      </div>
+                      <Button
+                        className="bg-blue-500 text-white p-2 w-fit rounded-lg"
+                        onClick={() => shareToEmail()}
+                      >
+                        {t("send")}
+                      </Button>
+                    </div>
+                  </PopoverContent>
+                </Popover>
+              </div>
               <a
                 className="ml-8 cursor-pointer"
                 onClick={() =>
@@ -1049,7 +1085,7 @@ const DetailVideo = () => {
         </div>
 
         {/* Konten Serupa */}
-        <div className="">
+        <div className="px-4 md:px-[100px]">
           <NewContent group="mabes" type={"similar"} />
         </div>
       </div>