diff --git a/app/[locale]/(public)/(polda)/polda/[polda_name]/audio/layout.tsx b/app/[locale]/(public)/(polda)/polda/[polda_name]/audio/layout.tsx
index 3b1b03cc..96086704 100644
--- a/app/[locale]/(public)/(polda)/polda/[polda_name]/audio/layout.tsx
+++ b/app/[locale]/(public)/(polda)/polda/[polda_name]/audio/layout.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import LayoutProvider from "@/providers/layout.provider";
 import LayoutContentProvider from "@/providers/content.provider";
 import DashCodeSidebar from "@/components/partials/sidebar";
@@ -8,11 +10,26 @@ 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 = async ({ children }: { children: React.ReactNode }) => {
-  return (
+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 />
     </>
   );
 };
diff --git a/app/[locale]/(public)/(polda)/polda/[polda_name]/document/layout.tsx b/app/[locale]/(public)/(polda)/polda/[polda_name]/document/layout.tsx
index 3b1b03cc..96086704 100644
--- a/app/[locale]/(public)/(polda)/polda/[polda_name]/document/layout.tsx
+++ b/app/[locale]/(public)/(polda)/polda/[polda_name]/document/layout.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import LayoutProvider from "@/providers/layout.provider";
 import LayoutContentProvider from "@/providers/content.provider";
 import DashCodeSidebar from "@/components/partials/sidebar";
@@ -8,11 +10,26 @@ 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 = async ({ children }: { children: React.ReactNode }) => {
-  return (
+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 />
     </>
   );
 };
diff --git a/app/[locale]/(public)/(polda)/polda/[polda_name]/image/detail/[slug]/page.tsx b/app/[locale]/(public)/(polda)/polda/[polda_name]/image/detail/[slug]/page.tsx
index 6488e37d..02be3577 100644
--- a/app/[locale]/(public)/(polda)/polda/[polda_name]/image/detail/[slug]/page.tsx
+++ b/app/[locale]/(public)/(polda)/polda/[polda_name]/image/detail/[slug]/page.tsx
@@ -7,11 +7,19 @@ import { Icon } from "@iconify/react/dist/iconify.js";
 import NewContent from "@/components/landing-page/new-content";
 import { useToast } from "@/components/ui/use-toast";
 import { getCookiesDecrypt } from "@/lib/utils";
-import { close, error, loading } from "@/config/swal";
-import { checkWishlistStatus, deleteWishlist, getDetail, saveWishlist } from "@/service/landing/landing";
+import { close, error, loading, warning } from "@/config/swal";
+import { checkWishlistStatus, createPublicSuggestion, deletePublicSuggestion, deleteWishlist, getDetail, getPublicSuggestionList, saveWishlist } from "@/service/landing/landing";
 import { Link, useRouter } from "@/i18n/routing";
+import Image from "next/image";
+import { useTranslations } from "next-intl";
+import { checkMaliciousText, formatDateToIndonesian, getPublicLocaleTimestamp } from "@/utils/globals";
+import withReactContent from "sweetalert2-react-content";
+import Swal from "sweetalert2";
+import { useSearchParams } from "next/navigation";
+import parse from "html-react-parser";
 
 const DetailInfo = () => {
+  const MySwal = withReactContent(Swal);
   const [selectedSize, setSelectedSize] = useState<string>("L");
   const [selectedTab, setSelectedTab] = useState("video");
   const router = useRouter();
@@ -29,8 +37,22 @@ const DetailInfo = () => {
   const [main, setMain] = useState<any>();
   const [resolutionSelected, setResolutionSelected] = useState("720");
   const [imageSizeSelected, setImageSizeSelected] = useState("l");
-
   const userId = getCookiesDecrypt("uie");
+  const [content, setContent] = useState<any>([]);
+  const [emailShareList, setEmailShareList] = useState<any>();
+  const [emailShareInput, setEmailShareInput] = useState<any>();
+  const [emailMessageInput, setEmailMessageInput] = useState();
+  const searchParams = useSearchParams();
+  const [width, setWidth] = useState<any>();
+  const userRoleId = getCookiesDecrypt("urie");
+  const [message, setMessage] = useState("");
+  const [listSuggestion, setListSuggestion] = useState<any>();
+  const [isLoading, setIsLoading] = useState<any>(true);
+  const [visibleInput, setVisibleInput] = useState(null);
+  let typeString = "image";
+  const t = useTranslations("LandingPage");
+  const poldaName = params?.polda_name;
+  const satkerName = params?.satker_name;
 
   useEffect(() => {
     initFetch();
@@ -112,6 +134,12 @@ const DetailInfo = () => {
     }
   };
 
+  const getInputValue = (e: any) => {
+    const message = e.target.value;
+    console.log(message);
+    setMessage(message);
+  };
+
   const sizes = [
     { label: "XL", value: "3198 x 1798 px" },
     { label: "L", value: "2399 x 1349 px" },
@@ -131,6 +159,10 @@ const DetailInfo = () => {
     // console.log(response);
   }
 
+  function addDefaultProfile(ev: any) {
+    ev.target.src = "/assets/avatar-profile.png";
+  }
+
   const handleDownload = () => {
     if (downloadProgress === 0) {
       if (!userId) {
@@ -219,6 +251,135 @@ const DetailInfo = () => {
     xhr.send();
   };
 
+  const showInput = (e: any) => {
+    console.log(document.querySelector(`#${e}`)?.classList);
+    document.querySelector(`#${e}`)?.classList.toggle("none");
+    setVisibleInput(visibleInput === e ? null : e);
+  };
+
+  async function sendSuggestionParent() {
+    if (message?.length > 3) {
+      loading();
+      const data = {
+        mediaUploadId: slug?.split("-")?.[0],
+        message,
+        parentId: null,
+      };
+
+      const response = await createPublicSuggestion(data);
+
+      console.log(response);
+      setMessage("");
+
+      const responseGet = await getPublicSuggestionList(slug?.split("-")?.[0]);
+      console.log(responseGet?.data?.data);
+      setListSuggestion(responseGet?.data?.data);
+
+      // Hapus nilai semua input secara manual jika perlu
+      const inputs = document.querySelectorAll("input");
+      inputs.forEach((input) => {
+        input.value = "";
+      });
+
+      close();
+    }
+  }
+
+  async function sendSuggestionChild(parentId: any) {
+    const inputElement = document.querySelector(`#input-comment-${parentId}`) as HTMLInputElement;
+
+    if (inputElement && inputElement.value.length > 3) {
+      loading();
+      const data = {
+        mediaUploadId: slug?.split("-")?.[0],
+        message: inputElement.value,
+        parentId,
+      };
+
+      console.log(data);
+      const response = await createPublicSuggestion(data);
+      console.log(response);
+      const responseGet: any = await getPublicSuggestionList(slug?.split("-")?.[0]);
+      console.log(responseGet.data?.data);
+      setListSuggestion(responseGet.data?.data);
+
+      // Reset input field
+      inputElement.value = "";
+
+      // document.querySelector("#comment-id-" + parentId)?.style.display = "none";
+
+      close();
+    }
+  }
+
+  const postData = () => {
+    const checkMessage = checkMaliciousText(message);
+    if (checkMessage == "") {
+      if (Number(userRoleId) < 1 || userRoleId == undefined) {
+        router.push("/auth");
+      } else {
+        sendSuggestionParent();
+      }
+    } else {
+      warning(checkMessage);
+    }
+  };
+
+  const postDataChild = (id: any) => {
+    const checkMessage = checkMaliciousText(message);
+    if (checkMessage == "") {
+      if (Number(userRoleId) < 1 || userRoleId == undefined) {
+        router.push("/auth");
+      } else {
+        sendSuggestionChild(id);
+      }
+    } else {
+      warning(checkMessage);
+    }
+  };
+
+  async function deleteDataSuggestion(dataId: any) {
+    loading();
+    const response = await deletePublicSuggestion(dataId);
+    console.log(response);
+    const responseGet = await getPublicSuggestionList(slug.split("-")?.[0]);
+    console.log(responseGet.data?.data);
+    setListSuggestion(responseGet.data?.data);
+    close();
+  }
+
+  const deleteData = (dataId: any) => {
+    MySwal.fire({
+      title: "Delete Comment",
+      icon: "warning",
+      showCancelButton: true,
+      cancelButtonColor: "#3085d6",
+      confirmButtonColor: "#d33",
+      confirmButtonText: "Delete",
+    }).then((result) => {
+      if (result.isConfirmed) {
+        deleteDataSuggestion(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="min-h-screen px-4 md:px-24 py-4">
@@ -227,7 +388,7 @@ const DetailInfo = () => {
           <div className="md:w-3/4">
             {/* Gambar Besar */}
             <div className="relative">
-              <img src={detailDataImage?.files[selectedImage]?.url} alt="Main" className="rounded-lg w-auto h-fit" />
+              <Image width={1920} height={1080} src={detailDataImage?.files?.length > 0 ? detailDataImage.files[selectedImage]?.url : detailDataImage?.thumbnailLink} alt="Main" className="rounded-lg w-auto h-fit" />
               <div className="absolute top-4 left-4"></div>
             </div>
 
@@ -235,25 +396,43 @@ const DetailInfo = () => {
             <div className="py-4 flex flex-row gap-3">
               {detailDataImage?.files?.map((file: any, index: number) => (
                 <a onClick={() => setSelectedImage(index)} key={file?.id}>
-                  <img src={file?.url} className="w-[120px] h-[90px] object-cover rounded-md cursor-pointer hover:ring-2 hover:ring-red-600" />
+                  <Image alt="imgae-small" width={1920} height={1080} src={file?.url} className="w-[120px] h-[90px] object-cover rounded-md cursor-pointer hover:ring-2 hover:ring-red-600" />
                 </a>
               ))}
             </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">{detailDataImage?.uploadedBy?.userLevel?.name}</span>&nbsp; | &nbsp;Diupdate pada {detailDataImage?.updatedAt} WIB &nbsp;|&nbsp;
-                <Icon icon="formkit:eye" width="15" height="15" />
-                &nbsp; {detailDataImage?.clickCount} &nbsp;
-                <p className="flex text-end">Kreator: {detailDataImage?.creatorName}</p>
+            <div className="text-gray-500 flex flex-col lg:flex-row justify-between items-center border-t mt-4">
+              <div className="flex flex-col lg:flex-row items-center mt-3 lg:justify-between">
+                <p className="text-xs lg:text-sm">
+                  {t("by")}&nbsp;<span className="font-semibold text-black dark:text-white">{detailDataImage?.uploadedBy?.userLevel?.name}</span>
+                </p>
+                {/* <p className="text-xs lg:text-sm">
+                             &nbsp;|&nbsp;{t("updatedOn")}
+                             {detailDataImage?.updatedAt} WIB &nbsp;|&nbsp;
+                           </p> */}
+                <p className="text-xs lg:text-sm">
+                  &nbsp;|&nbsp;{t("updatedOn")}&nbsp;
+                  {formatDateToIndonesian(new Date(detailDataImage?.updatedAt))} {"WIB"}
+                </p>
+                <p className="text-xs lg:text-sm flex justify-center items-center">
+                  &nbsp;|&nbsp;
+                  <Icon icon="formkit:eye" width="15" height="15" />
+                  &nbsp; {detailDataImage?.clickCount} &nbsp;
+                </p>
+              </div>
+              <div className="mt-3">
+                <p className="flex text-end text-xs lg:text-sm font-semibold">
+                  {t("creator")}
+                  {detailDataImage?.creatorName}
+                </p>
               </div>
             </div>
 
             {/* Keterangan */}
             <div className="w-full">
               <h1 className="flex flex-row font-bold text-2xl my-8">{detailDataImage?.title}</h1>
-              <div className="font-light text-justify" dangerouslySetInnerHTML={{ __html: detailDataImage?.htmlDescription }} />
+              <div className="font-light text-justify mb-4" dangerouslySetInnerHTML={{ __html: detailDataImage?.htmlDescription }} />
             </div>
           </div>
 
@@ -325,20 +504,214 @@ const DetailInfo = () => {
         </div>
       </div>
 
-      <div className="w-full mb-8">
+      <div className="w-full">
         {/* Comment */}
-        <div className="flex flex-col my-16 p-10 bg-[#f7f7f7]">
+        <div className="flex flex-col mt-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">Berikan Komentar</p>
-            <Textarea placeholder="Type your comments here." className="flex w-full" />
-            <button className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1">Kirim</button>
+            <p className="flex items-start text-lg">{t("comment")}</p>
+            <Textarea placeholder={t("leaveComment")} className="flex w-full pb-12" onChange={getInputValue} />
+            <button onClick={() => postData()} className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1">
+              {t("send")}
+            </button>
+            <div className="border-b-2  border-slate-300 mt-4 w-full self-center"></div>
+          </div>
+
+          <div>
+            {listSuggestion?.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={1080}
+                    height={1080}
+                    src={data?.suggestionFrom?.profilePictureUrl}
+                    className="h-12 lg:h-16 w-12 lg:w-16 mr-2"
+                    onError={addDefaultProfile}
+                    alt=""
+                  />
+                  <div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1">
+                    <p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
+                      {Number(data.suggestionFrom?.roleId) == 2 || Number(data.suggestionFrom?.roleId) == 3 || Number(data.suggestionFrom?.roleId) == 4 ? "HUMAS POLRI" : data.suggestionFrom?.fullname}
+                      {getPublicLocaleTimestamp(new Date(data.createdAt))}
+                    </p>
+                    <p className="text-slate-500 text-[13px] lg:text-sm mb-4">{data?.message}</p>
+                    <div>
+                      <a
+                        style={
+                          Number(data.suggestionFrom?.id) == Number(userId)
+                            ? {
+                                display: "none",
+                              }
+                            : {}
+                        }
+                        onClick={() => showInput(`comment-id-${data.id}`)}
+                        className="mr-2"
+                      >
+                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("reply")}</small>
+                      </a>
+                      {Number(data.suggestionFrom?.id) == Number(userId) || Number(userRoleId) == 2 ? (
+                        <a onClick={() => deleteData(data.id)}>
+                          <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("delete")}</small>
+                        </a>
+                      ) : (
+                        ""
+                      )}
+                    </div>
+                  </div>
+                </div>
+                {visibleInput === `comment-id-${data.id}` && (
+                  <div id={`comment-id-${data.id}`} className="px-4 pl-[72px] lg:px-14 lg:pl-32 mt-2 ">
+                    <Textarea id={`input-comment-${data.id}`} className="p-4 focus:outline-none focus:border-sky-500" placeholder={t("enterReply")} />
+                    <div className="flex flex-row gap-3">
+                      <a onClick={() => postDataChild(data.id)}>
+                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 mt-2 cursor-pointer">{t("send")}</small>
+                      </a>
+                      <a onClick={() => showInput(`comment-id-${data.id}`)}>
+                        <small className="flex items-start bg-[#bb3523] rounded-lg mt-2 w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("cancel")}</small>
+                      </a>
+                    </div>
+                  </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-16 lg:pl-32">
+                          <Image
+                            placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
+                            width={1080}
+                            height={1080}
+                            src={child1.suggestionFrom?.profilePictureUrl}
+                            onError={addDefaultProfile}
+                            alt=""
+                            className="h-10 lg:h-16 w-10 lg:w-16 mr-2"
+                          />
+                          <div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1">
+                            <p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
+                              {" "}
+                              <b>{Number(child1.suggestionFrom?.roleId) == 2 || Number(child1.suggestionFrom?.roleId) == 3 || Number(child1.suggestionFrom?.roleId) == 4 ? "HUMAS POLRI" : child1.suggestionFrom?.fullname}</b>{" "}
+                              {getPublicLocaleTimestamp(new Date(child1.createdAt))}
+                            </p>
+                            <p className="text-slate-500 text-[13px] lg:text-sm mb-4">{parse(String(child1?.message))}</p>
+                            <div>
+                              <a
+                                style={
+                                  Number(child1.suggestionFrom?.id) == Number(userId)
+                                    ? {
+                                        display: "none",
+                                      }
+                                    : {}
+                                }
+                                onClick={() => showInput(`comment-id-${child1.id}`)}
+                              >
+                                <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white  px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("reply")}</small>
+                              </a>
+                              <a
+                                style={
+                                  Number(child1.suggestionFrom?.id) == Number(userId)
+                                    ? {}
+                                    : {
+                                        display: "none",
+                                      }
+                                }
+                                onClick={() => deleteData(child1.id)}
+                              >
+                                <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("delete")}</small>
+                              </a>
+                            </div>
+                          </div>
+                        </div>
+
+                        {visibleInput === `comment-id-${child1.id}` && (
+                          <div id={`comment-id-${child1.id}`} className="px-4 lg:px-14 pl-28 lg:pl-[200px]">
+                            <Textarea name="" className="mt-2 " id={`input-comment-${child1.id}`} placeholder={t("enterReply")} />
+                            <div className="flex flex-row mt-2 gap-3">
+                              <a onClick={() => postDataChild(child1.id)}>
+                                <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("send")}</small>
+                              </a>
+                              <a onClick={() => showInput(`comment-id-${child1.id}`)}>
+                                <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("cancel")}</small>
+                              </a>
+                            </div>
+                          </div>
+                        )}
+
+                        {child1.children.length > 0
+                          ? child1.children?.map((child2: any) => (
+                              <div className="">
+                                <div className="flex flex-row mt-2 px-4 lg:pr-14 pl-28 lg:pl-48">
+                                  <Image
+                                    placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
+                                    width={1080}
+                                    height={1080}
+                                    src={child2.suggestionFrom?.profilePictureUrl}
+                                    className="h-9 lg:h-16 w-9 lg:w-16 mr-2"
+                                    onError={addDefaultProfile}
+                                    alt=""
+                                  />
+                                  <div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1">
+                                    <p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
+                                      {" "}
+                                      <b>{Number(child2.suggestionFrom?.roleId) == 2 || Number(child2.suggestionFrom?.roleId) == 3 || Number(child2.suggestionFrom?.roleId) == 4 ? "HUMAS POLRI" : child2.suggestionFrom?.fullname}</b>{" "}
+                                      {getPublicLocaleTimestamp(new Date(child2.createdAt))}
+                                    </p>
+                                    <p className="text-slate-500 text-sm mb-4">{parse(String(child2?.message))}</p>
+                                    <div>
+                                      <a
+                                        style={
+                                          Number(child2.suggestionFrom?.id) == Number(userId)
+                                            ? {
+                                                display: "none",
+                                              }
+                                            : {}
+                                        }
+                                        onClick={() => showInput(`comment-id-${child2.id}`)}
+                                      >
+                                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("reply")}</small>
+                                      </a>
+                                      <a
+                                        style={
+                                          Number(child2.suggestionFrom?.id) == Number(userId)
+                                            ? {}
+                                            : {
+                                                display: "none",
+                                              }
+                                        }
+                                        onClick={() => deleteData(child2.id)}
+                                      >
+                                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("delete")}</small>
+                                      </a>
+                                    </div>
+                                  </div>
+                                </div>
+                                {visibleInput === `comment-id-${child2.id}` && (
+                                  <div id={`comment-id-${child2.id}`} className="px-4 lg:px-14 pl-40 lg:pl-[265px]">
+                                    <Textarea name="" id={`input-comment-${child2.id}`} className="my-2" placeholder="Masukkan balasan anda" />
+                                    <div className="flex flex-row gap-3">
+                                      <a onClick={() => postDataChild(child2.id)}>
+                                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("send")}</small>
+                                      </a>
+                                      <a onClick={() => showInput(`comment-id-${child2.id}`)}>
+                                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("cancel")}</small>
+                                      </a>
+                                    </div>
+                                  </div>
+                                )}
+                              </div>
+                            ))
+                          : ""}
+                      </div>
+                    ))
+                  : ""}
+              </div>
+            ))}
           </div>
         </div>
 
         {/* Konten Serupa */}
-        <div className="">
-          <NewContent group="polda" type={"similar"} />
-        </div>
+        {/* <div className="">
+               <NewContent group="mabes" type={"similar"} />
+             </div> */}
       </div>
     </>
   );
diff --git a/app/[locale]/(public)/(polda)/polda/[polda_name]/image/filter/page.tsx b/app/[locale]/(public)/(polda)/polda/[polda_name]/image/filter/page.tsx
index 0ad0253d..7114f778 100644
--- a/app/[locale]/(public)/(polda)/polda/[polda_name]/image/filter/page.tsx
+++ b/app/[locale]/(public)/(polda)/polda/[polda_name]/image/filter/page.tsx
@@ -15,6 +15,7 @@ import ReactDatePicker from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";
 import { close, loading } from "@/config/swal";
 import { useTranslations } from "next-intl";
+import Image from "next/image";
 
 const columns: ColumnDef<any>[] = [
   {
@@ -70,7 +71,7 @@ const FilterPage = () => {
   const [userLevels, setUserLevels] = useState([]);
   const poldaName = params?.polda_name;
   let prefixPath = poldaName ? `/polda/${poldaName}` : "/";
-  
+
   const t = useTranslations("FilterPage");
 
   // const [startDate, endDate] = dateRange;
@@ -348,11 +349,27 @@ const FilterPage = () => {
     clearTimeout(typingTimer);
   };
 
+  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="flex flex-col">
       {/* Header */}
 
-      <div className="flex flex-col md:flex-row items-start gap-5 p-10 bg-[#f7f7f7] dark:bg-black">
+      <div className="flex flex-col md:flex-row items-start gap-5 p-10 bg-[#f7f7f7] dark:bg-black px-4 lg:px-20">
         <p>
           {" "}
           {t("image")} {">"} <span className="font-bold">{t("allImage")}</span>
@@ -361,9 +378,9 @@ const FilterPage = () => {
         <p>{`${t("thereIs")} ${totalContent} ${t("downloadableImage")}`}</p>
       </div>
 
-      {/* Left */}
-      <div className="flex flex-col lg:flex-row gap-6 p-4">
-        <div className="lg:w-[25%] h-fit w-full bg-[#f7f7f7] dark:bg-black p-4 rounded-lg shadow-md">
+      <div className="flex flex-col lg:flex-row gap-6 p-4 px-4 lg:px-20">
+        {/* Left */}
+        <div className="lg:w-[20%] h-fit w-full bg-[#f7f7f7] dark:bg-black p-4 rounded-lg shadow-md">
           <h2 className="text-lg font-semibold mb-4 flex items-center gap-1">
             <Icon icon="stash:filter-light" fontSize={30} />
             Filter
@@ -465,48 +482,84 @@ const FilterPage = () => {
         </div>
 
         {/* Konten Kanan */}
-        <Reveal>
-          <div className="flex-1">
-            <div className="flex flex-col items-end mb-4">
-              <h2 className="text-lg font-semibold">{t("sortBy")}</h2>
-              <select defaultValue={sortBy == "popular" ? "terpopuler" : "terbaru"} onChange={(e) => handleSorting(e)} className="border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500">
-                <option value="latest">{t("latest")}</option>
-                <option value="popular">{t("mostPopular")}</option>
-              </select>
-            </div>
-
-            {imageData?.length > 0 ? (
-              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
-                {imageData?.map((image: any) => (
-                  <Card key={image?.id} className="hover:scale-110 transition-transform duration-300">
-                    <CardContent className="flex flex-col text-xs lg:text-sm w-full p-0">
-                      <Link href={`${prefixPath}/image/detail/${image?.slug}`}>
-                        <img src={image?.thumbnailLink} className="h-60 object-cover items-center justify-center cursor-pointer rounded-lg place-self-center" />
-                        <div className="flex flex-row items-center gap-2 text-[10px] mx-2">
-                          {formatDateToIndonesian(new Date(image?.createdAt))} {image?.timezone ? image?.timezone : "WIB"}| <Icon icon="formkit:eye" width="15" height="15" />
-                          {image?.clickCount}{" "}
-                          <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20">
-                            <path
-                              fill="#f00"
-                              d="M7.707 10.293a1 1 0 1 0-1.414 1.414l3 3a1 1 0 0 0 1.414 0l3-3a1 1 0 0 0-1.414-1.414L11 11.586V6h5a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h5v5.586zM9 4a1 1 0 0 1 2 0v2H9z"
-                            />
-                          </svg>{" "}
-                        </div>
-                        <div className="font-semibold pr-3 pb-3 mx-2 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible w-full">{image?.title}</div>
-                      </Link>
-                    </CardContent>
-                  </Card>
-                ))}
-              </div>
-            ) : (
-              <p className="flex items-center justify-center text-black">
-                <img src="/assets/empty-data.png" alt="empty" className="h-60 w-60 my-4" />
-              </p>
-            )}
-
-            <LandingPagination table={table} totalData={totalData} totalPage={totalPage} />
+        {/* <>
+          <Reveal> */}
+        <div className="w-[80%]">
+          <div className="flex flex-col items-end mb-4">
+            <h2 className="text-lg font-semibold">{t("sortBy")}</h2>
+            <select defaultValue={sortBy == "popular" ? "terpopuler" : "terbaru"} onChange={(e) => handleSorting(e)} className="border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500">
+              <option value="latest">{t("latest")}</option>
+              <option value="popular">{t("mostPopular")}</option>
+            </select>
           </div>
-        </Reveal>
+
+          {imageData?.length > 0 ? (
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+              {imageData?.map((image: any) => (
+                // <Card key={image?.id} className="hover:scale-110 transition-transform duration-300 h-full lg:h-[300px] w-full lg:w-[342px]">
+                //   <CardContent className="flex flex-col text-xs lg:text-sm w-full p-0">
+                //     <Link href={`${prefixPath}/image/detail/${image?.slug}`}>
+                //       <Image
+                //         width={2560}
+                //         height={1440}
+                //         alt="filter-image"
+                //         placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
+                //         src={image?.thumbnailLink}
+                //         className="h-full lg:h-[300px] w-full lg:w-[342px] object-cover items-center justify-center cursor-pointer rounded-lg"
+                //       />
+
+                //       {/* <div className="flex flex-row items-center gap-2 text-[10px] mx-2">
+                //         {formatDateToIndonesian(new Date(image?.createdAt))} {image?.timezone ? image?.timezone : "WIB"}| <Icon icon="formkit:eye" width="15" height="15" />
+                //         {image?.clickCount}{" "}
+                //         <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20">
+                //           <path
+                //             fill="#f00"
+                //             d="M7.707 10.293a1 1 0 1 0-1.414 1.414l3 3a1 1 0 0 0 1.414 0l3-3a1 1 0 0 0-1.414-1.414L11 11.586V6h5a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h5v5.586zM9 4a1 1 0 0 1 2 0v2H9z"
+                //           />
+                //         </svg>{" "}
+                //       </div> */}
+                //       <div className="font-semibold pr-3 pb-3 mx-2 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible w-full">{image?.title}</div>
+                //     </Link>
+                //   </CardContent>
+                // </Card>
+                <Card key={image?.id} className="relative overflow-hidden hover:scale-105 transition-transform duration-300 h-full lg:h-[300px] w-full shadow-md hover:shadow-lg rounded-lg">
+                  <CardContent className="flex flex-col w-full p-0">
+                    <Link href={`${prefixPath}/image/detail/${image?.slug}`} className="relative">
+                      {/* Gambar */}
+                      <Image
+                        width={2560}
+                        height={1440}
+                        alt="filter-image"
+                        placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
+                        src={image?.thumbnailLink}
+                        className="h-full lg:h-[300px] w-full  object-cover rounded-lg transition-transform duration-300"
+                      />
+
+                      {/* Overlay Gelap */}
+                      <div className="absolute inset-0 bg-black bg-opacity-40  rounded-lg"></div>
+
+                      {/* Gradient Bawah */}
+                      {/* <div className="absolute inset-x-0 bottom-0 h-24 bg-gradient-to-t from-black/50 via-black/20 to-transparent"></div> */}
+
+                      {/* Judul */}
+                      <div className="absolute bottom-3 left-3 right-3  text-white p-3 rounded-md z-10">
+                        <h3 className="text-[20px] font-semibold truncate hover:whitespace-normal hover:overflow-visible">{image?.title}</h3>
+                      </div>
+                    </Link>
+                  </CardContent>
+                </Card>
+              ))}
+            </div>
+          ) : (
+            <p className="flex items-center justify-center text-black">
+              <img src="/assets/empty-data.png" alt="empty" className="h-60 w-60 my-4" />
+            </p>
+          )}
+
+          <LandingPagination table={table} totalData={totalData} totalPage={totalPage} />
+        </div>
+        {/* </Reveal>
+        </> */}
       </div>
     </div>
   );
diff --git a/app/[locale]/(public)/(polda)/polda/[polda_name]/image/layout.tsx b/app/[locale]/(public)/(polda)/polda/[polda_name]/image/layout.tsx
index 4bda3a26..96086704 100644
--- a/app/[locale]/(public)/(polda)/polda/[polda_name]/image/layout.tsx
+++ b/app/[locale]/(public)/(polda)/polda/[polda_name]/image/layout.tsx
@@ -1,10 +1,35 @@
+"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 = async ({ children }: { children: React.ReactNode }) => {
-  return (
+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 />
     </>
   );
 };
diff --git a/app/[locale]/(public)/(polda)/polda/[polda_name]/video/layout.tsx b/app/[locale]/(public)/(polda)/polda/[polda_name]/video/layout.tsx
index 3b1b03cc..96086704 100644
--- a/app/[locale]/(public)/(polda)/polda/[polda_name]/video/layout.tsx
+++ b/app/[locale]/(public)/(polda)/polda/[polda_name]/video/layout.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import LayoutProvider from "@/providers/layout.provider";
 import LayoutContentProvider from "@/providers/content.provider";
 import DashCodeSidebar from "@/components/partials/sidebar";
@@ -8,11 +10,26 @@ 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 = async ({ children }: { children: React.ReactNode }) => {
-  return (
+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 />
     </>
   );
 };
diff --git a/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/hero-kaltara.tsx b/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/hero-kaltara.tsx
index 4e1a7a16..ab2bbc3b 100644
--- a/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/hero-kaltara.tsx
+++ b/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/hero-kaltara.tsx
@@ -167,7 +167,7 @@ const HeroKaltara = () => {
             //     </div>
             //   ))}
             // </div>
-            <Carousel className="lg:w-2/3 lg:h-full ">
+            <Carousel className="w-full lg:w-2/3 lg:h-full ">
               <CarouselContent>
                 {content?.map((row: any) => (
                   <CarouselItem key={row?.id}>
@@ -175,7 +175,7 @@ const HeroKaltara = () => {
                       <Link href={`${locale}/image/detail/${row?.slug}`}>
                         <Image src={row?.thumbnailLink} alt="gambar-utama" width={1920} height={1080} className="w-full h-[200px] lg:h-[500px] rounded-sm object-cover" />
                       </Link>
-                      <h1 className="font-bold font-sans text-[30px]">{row.title}</h1>
+                      <h1 className="font-bold font-sans text-[15px] lg:text-[30px]">{row.title}</h1>
                       <div className="flex flex-row gap-3">
                         <p className="text-[#c03724] font-sans text-[16px]">{row?.categoryName}</p>
                         <p className="text-[16px] font-sans flex flex-row items-center text-slate-500 dark:text-white gap-1">
diff --git a/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/pps-section.tsx b/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/pps-section.tsx
index 3711bf32..b4e33913 100644
--- a/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/pps-section.tsx
+++ b/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/pps-section.tsx
@@ -29,7 +29,7 @@ const PpsSection = () => {
             {image?.map((news: any, index) => (
               <CarouselItem key={news?.id} className="grid grid-cols-1">
                 <Card key={index} className="w-full overflow-hidden shadow-lg h-full">
-                  <Image src={news.src} alt="pps" width={2560} height={1440} className="w-full h-[60vh] object-cover rounded-md" />
+                  <Image src={news.src} alt="pps" width={2560} height={1440} className="w-full h-full lg:h-[60vh] object-cover rounded-md" />
 
                   <CardContent className="p-4">
                     {/* <div className="flex items-center gap-2 text-white text-xs font-bold">
diff --git a/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/regional-news.tsx b/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/regional-news.tsx
index a81bd11e..dd676e45 100644
--- a/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/regional-news.tsx
+++ b/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/regional-news.tsx
@@ -129,7 +129,7 @@ const RegionalNews = () => {
             <p className="text-white font-semibold">Berita Wilayah</p>
           </div>
         </div>
-        <div className="flex flex-col lg:flex-row items-start justify-center gap-8 px-4 lg:px-20">
+        <div className="flex flex-col lg:flex-row items-start justify-center gap-8 px-4 lg:px-20 mb-4 lg:mb-10">
           {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" />
diff --git a/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/social-media.tsx b/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/social-media.tsx
index b6a40698..6abb3425 100644
--- a/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/social-media.tsx
+++ b/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/social-media.tsx
@@ -107,9 +107,9 @@ const SocialMedia = () => {
               </TabsList>
             </Tabs>
           </div>
-          <div className="flex flex-col lg:flex-row">
+          <div className="flex flex-col lg:flex-row w-full">
             {selectedTab == "x" ? (
-              <div className="flex flex-row justify-between gap-5 w-[90%] mx-auto">
+              <div className="flex flex-row justify-between gap-5 ">
                 {/* <div className="border border-slate-300 rounded-lg mt-4 w-[350px] h-[500px]">
                   <div className="mt-2 flex flex-row gap-2 mx-1">
                     <div className="h-full">
@@ -140,7 +140,7 @@ const SocialMedia = () => {
                   </div>
                 </div> */}
                 <Carousel className="w-full mx-auto">
-                  <CarouselContent className="gap-[20px] w-full">
+                  <CarouselContent className="gap-[20px] pl-5">
                     {twitter?.map((image: any) => (
                       <CarouselItem key={image?.id} className="md:basis-1/2 lg:basis-1/4 border border-slate-300 rounded-lg mt-4">
                         <div className="mt-2 flex flex-row gap-2 mx-1">
@@ -175,7 +175,7 @@ const SocialMedia = () => {
                 </Carousel>
               </div>
             ) : selectedTab == "instagram" ? (
-              <div className="flex flex-row justify-between gap-5 w-[90%] mx-auto">
+              <div className="flex flex-row justify-between gap-5">
                 <div className="border border-slate-300 rounded-lg mt-4 w-[330px]">
                   <div className="mt-2 flex flex-row gap-2 mx-1">
                     <div className="h-full">
@@ -207,7 +207,7 @@ const SocialMedia = () => {
                 </div>
               </div>
             ) : selectedTab == "facebook" ? (
-              <div className="flex flex-row justify-between gap-5 w-[90%] mx-auto">
+              <div className="flex flex-row justify-between gap-5">
                 <div className="border border-slate-300 rounded-lg mt-4 w-[330px]">
                   <div className="mt-2 flex flex-row gap-2 mx-1">
                     <div className="h-full">
@@ -239,7 +239,7 @@ const SocialMedia = () => {
                 </div>
               </div>
             ) : selectedTab == "tiktok" ? (
-              <div className="flex flex-row justify-between gap-5 w-[90%] mx-auto">
+              <div className="flex flex-row justify-between gap-5">
                 <div className="border border-slate-300 rounded-lg mt-4 w-[330px]">
                   <div className="mt-2 flex flex-row gap-2 mx-1">
                     <div className="h-full">
@@ -271,7 +271,7 @@ const SocialMedia = () => {
                 </div>
               </div>
             ) : selectedTab == "youtube" ? (
-              <div className="flex flex-row justify-between gap-5 w-[90%] mx-auto">
+              <div className="flex flex-row justify-between gap-5">
                 <div className="border border-slate-300 rounded-lg mt-4 w-[330px]">
                   <div className="mt-2 flex flex-row gap-2 mx-1">
                     <div className="h-full">
diff --git a/app/[locale]/(public)/(polda)/tbnews/[polda_name]/image/detail/[slug]/page.tsx b/app/[locale]/(public)/(polda)/tbnews/[polda_name]/image/detail/[slug]/page.tsx
index dfe60185..84bcd98a 100644
--- a/app/[locale]/(public)/(polda)/tbnews/[polda_name]/image/detail/[slug]/page.tsx
+++ b/app/[locale]/(public)/(polda)/tbnews/[polda_name]/image/detail/[slug]/page.tsx
@@ -811,10 +811,9 @@ const DetailInfo = () => {
             <button onClick={() => postData()} className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1">
               {t("send")}
             </button>
+            <div className="border-b-2  border-slate-300 mt-4 w-full self-center"></div>
           </div>
 
-          <div className="border-b-2  border-slate-300 mt-4 w-auto"></div>
-
           <div>
             {listSuggestion?.map((data: any) => (
               <div className="flex flex-col">
diff --git a/components/landing-page/content-category.tsx b/components/landing-page/content-category.tsx
index 100d4ddb..ad2d4d29 100644
--- a/components/landing-page/content-category.tsx
+++ b/components/landing-page/content-category.tsx
@@ -46,15 +46,14 @@ const ContentCategory = (props: { group?: string }) => {
     <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));
-  
+
+  const toBase64 = (str: string) => (typeof window === "undefined" ? Buffer.from(str).toString("base64") : window.btoa(str));
 
   return (
-    <div className="mx-auto px-4 lg:px-24 py-10 max-w-screen-2xl ">
+    <div className="px-4 lg:px-24 py-10">
       <Reveal>
-        <h2 className="text-center text-xl lg:text-2xl font-bold text-[#bb3523] mb-4">
-          {pathname?.split("/")[1] == "in" ? (
+        <h2 className="bg-[#c03724] rounded-md p-3 w-fit text-white">
+          {/* {pathname?.split("/")[1] == "in" ? (
             <>
               <span className="text-black dark:text-white">{t("category")}&nbsp;</span>
               {t("content")}
@@ -64,17 +63,44 @@ const ContentCategory = (props: { group?: string }) => {
               <span className="text-black dark:text-white">{t("content")}&nbsp;</span>
               {t("category")}
             </>
-          )}
+          )} */}
+          Kategori Konten
         </h2>
-        <div className="h-1 w-48 bg-[#bb3523] mx-auto mb-6 rounded"></div>
+        {/* <div className="h-1 w-48 bg-[#bb3523] mx-auto mb-6 rounded"></div> */}
 
-        <div className="grid my-3 grid-cols-2 lg:grid-cols-4 gap-4">
+        <div className="grid my-8 grid-cols-1 lg:grid-cols-4 gap-4">
           {categories?.map((category: any, index: number) =>
             !seeAllValue ? (
               index < 4 ? (
+                // <Link key={category?.id} href={`all/filter?category=${category?.id}`} className="relative group rounded-md overflow-hidden shadow-md hover:shadow-lg">
+                //   <Image
+                //     placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
+                //     alt="category"
+                //     width={2560}
+                //     height={1440}
+                //     src={category?.thumbnailLink}
+                //     className="w-full lg:w-[315px] lg:h-[250px] h-40 object-cover group-hover:scale-110 transition-transform duration-300"
+                //   />
+                //   <div className="absolute bottom-5 left-0 right-16 bg-transparent backdrop-blur-md text-white p-4 border-l-2 border-[#bb3523]">
+                //     <h3 className="text-sm font-semibold truncate">{category?.name}</h3>
+                //   </div>
+                // </Link>
                 <Link key={category?.id} href={`all/filter?category=${category?.id}`} className="relative group rounded-md overflow-hidden shadow-md hover:shadow-lg">
-                  <Image placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`} alt="category" width={2560} height={1440} src={category?.thumbnailLink} className="w-full h-48 sm:h-40 object-cover group-hover:scale-110 transition-transform duration-300" />
-                  <div className="absolute  bottom-0 rounded-lg left-0 right-0 bg-gray-400 border-l-4 mb-4 border-[#bb3523] text-white p-2">
+                  {/* Gambar */}
+                  <Image
+                    placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
+                    alt="category"
+                    width={2560}
+                    height={1440}
+                    src={category?.thumbnailLink}
+                    className="w-full lg:h-[250px] h-40 object-cover group-hover:scale-110 transition-transform duration-300"
+                  />
+
+                  {/* Overlay gelap */}
+                  <div className="absolute inset-0 bg-black bg-opacity-25 group-hover:bg-opacity-35 transition-all duration-300 rounded-md"></div>
+
+                  {/* Judul */}
+                  <div className="absolute bottom-5 left-0 right-16 bg-transparent backdrop-blur-md text-white p-4 border-l-2 border-[#bb3523] z-10">
                     <h3 className="text-sm font-semibold truncate">{category?.name}</h3>
                   </div>
                 </Link>
@@ -82,9 +108,35 @@ const ContentCategory = (props: { group?: string }) => {
                 ""
               )
             ) : (
+              // <Link key={category?.id} href={`all/filter?category=${category?.id}`} className="relative group rounded-md overflow-hidden shadow-md hover:shadow-lg">
+              //   <Image
+              //     placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
+              //     alt="category"
+              //     width={2560}
+              //     height={1440}
+              //     src={category?.thumbnailLink}
+              //     className="w-fulllg:w-[315px] lg:h-[250px] h-40 object-cover group-hover:scale-110 transition-transform duration-300"
+              //   />
+              //   <div className="absolute bottom-5 left-0 right-16 bg-transparent backdrop-blur-md text-white p-4 border-l-2 border-[#bb3523]">
+              //     <h3 className="text-sm font-semibold truncate">{category?.name}</h3>
+              //   </div>
+              // </Link>
               <Link key={category?.id} href={`all/filter?category=${category?.id}`} className="relative group rounded-md overflow-hidden shadow-md hover:shadow-lg">
-                <Image placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`} alt="category" width={2560} height={1440} src={category?.thumbnailLink} className="w-full h-48 sm:h-40 object-cover group-hover:scale-110 transition-transform duration-300" />
-                <div className="absolute bottom-0 left-0 right-0 bg-gray-400 border-l-4 mb-4 border-[#bb3523] rounded-lg text-white p-2">
+                {/* Gambar */}
+                <Image
+                  placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
+                  alt="category"
+                  width={2560}
+                  height={1440}
+                  src={category?.thumbnailLink}
+                  className="w-full lg:h-[250px] h-40 object-cover group-hover:scale-110 transition-transform duration-300"
+                />
+
+                {/* Overlay Gelap */}
+                <div className="absolute inset-0 bg-black bg-opacity-25 group-hover:bg-opacity-35 transition-all duration-300"></div>
+
+                {/* Judul */}
+                <div className="absolute bottom-5 left-0 right-16 bg-transparent backdrop-blur-md text-white p-4 border-l-2 border-[#bb3523] z-10">
                   <h3 className="text-sm font-semibold truncate">{category?.name}</h3>
                 </div>
               </Link>
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 7423ba3b..62c07d1c 100644
--- a/components/landing-page/landing-polda-kaltara/contact-us-kaltara.tsx
+++ b/components/landing-page/landing-polda-kaltara/contact-us-kaltara.tsx
@@ -5,7 +5,7 @@ import React from "react";
 
 const ContactUsKaltara = () => {
   return (
-    <div className="bg-[#E7E7E7] h-[150px] lg:h-[300px] text-black px-4 lg:px-20 mb-10 mt-10">
+    <div className="bg-[#E7E7E7] h-full lg:h-[300px] text-black px-4 lg:px-20 mb-10">
       <div className="container mx-auto py-8">
         <div className="flex flex-col md:flex-row justify-between items-start gap-4">
           {/* Logo */}
diff --git a/components/landing-page/landing-polda-kaltara/header-banner-kaltara.tsx b/components/landing-page/landing-polda-kaltara/header-banner-kaltara.tsx
index 22de2f5e..6a38dbb0 100644
--- a/components/landing-page/landing-polda-kaltara/header-banner-kaltara.tsx
+++ b/components/landing-page/landing-polda-kaltara/header-banner-kaltara.tsx
@@ -85,18 +85,19 @@ const HeaderBannerKaltara = () => {
               </div>
             </div>
           ) : (
-            <Carousel className="lg:w-2/3 lg:h-full ">
+            <Carousel className="w-full lg:w-2/3 lg:h-full ">
               <CarouselContent>
                 {content?.map((row: any) => (
                   <CarouselItem key={row?.id}>
-                    <div className="relative h-[310px] lg:h-[580px]">
-                      <Image src={row?.thumbnailLink} alt="" width={1920} height={1080} className="w-full h-[540px] lg:h-full rounded-lg object-cover" />
+                    <div className="relative h-[310px] lg:h-[580px] overflow-hidden rounded-lg">
+                      <Image src={row?.thumbnailLink} alt="" width={1920} height={1080} className="w-full h-[540px] lg:h-full object-cover" />
+                      <div className="absolute inset-0 bg-black bg-opacity-30"></div> {/* Overlay */}
                       <div className="absolute bottom-5 left-5 right-5 bg-black bg-opacity-50  text-white p-4 rounded-r-lg border-l-2 border-[#bb3523]">
-                        <span className="text-[#bb3523] font-sans bg-[#b0b0af] border border-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-[14px] px-[10px] py-[5px]">{row?.categoryName}</span>
-                        <div onClick={() => router.push(prefixPath + `/image/detail/${row?.slug}`)} className="cursor-pointer">
-                          <h3 className="text-[42px] font-sans text-white">{row.title}</h3>
+                        <span className="text-[#bb3523] font-sans bg-[#b0b0af] border border-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-[10px] lg:text-[14px] px-[10px] py-[5px]">{row?.categoryName}</span>
+                        <div onClick={() => router.push(prefixPath + `/image/detail/${row?.slug}`)} className="cursor-pointer mt-2 lg:mt-0">
+                          <h3 className="text-[17px] lg:text-[42px] font-sans text-white">{row.title}</h3>
                         </div>
-                        <p className="text-[12px] font-sans flex flex-row items-center gap-1 mt-1 text-white">
+                        <p className="text-[9px] lg:text-[12px] font-sans flex flex-row items-center gap-1 mt-1 text-white">
                           {getPublicLocaleTimestamp(new Date(row?.createdAt))} WIB {" | "}
                           <Icon icon="formkit:eye" width="15" height="15" /> {row?.clickCount}
                         </p>
@@ -105,8 +106,8 @@ const HeaderBannerKaltara = () => {
                   </CarouselItem>
                 ))}
               </CarouselContent>
-              <CarouselPrevious />
-              <CarouselNext />
+              <CarouselPrevious className="left-6" />
+              <CarouselNext className="right-6" />
             </Carousel>
           )}
 
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 c933d755..871451d8 100644
--- a/components/landing-page/landing-polda-kaltara/latest-content-kaltara.tsx
+++ b/components/landing-page/landing-polda-kaltara/latest-content-kaltara.tsx
@@ -75,7 +75,7 @@ const LatestContentKaltara = (props: { group: string; type: string }) => {
       <Reveal>
         <div className="px-4 lg:px-20 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="mx-auto w-full max-w-7xl justify-center flex px-5 flex-col lg:flex-row gap-5 mb-4">
+          <div className="mx-auto w-full  justify-center flex px-5 flex-col lg:flex-row gap-5 mb-4">
             <Tabs value={selectedTab} onValueChange={setSelectedTab}>
               <TabsList className="grid grid-cols-2 lg:flex lg:flex-row">
                 <TabsTrigger
@@ -130,40 +130,70 @@ const LatestContentKaltara = (props: { group: string; type: string }) => {
             <div className="">
               {selectedTab == "image" ? (
                 content?.length > 0 ? (
-                  <Carousel className="w-[90%] mx-auto">
+                  // <Carousel className="">
+                  //   <CarouselContent>
+                  //     {content?.map((image: any) => (
+                  //       <CarouselItem key={image?.id} className="basis-1/2 md:basis-1/3 lg:basis-1/4">
+                  //         <div onClick={() => router.push(prefixPath + `/video/detail/${image?.slug}`)} className="cursor-pointer relative group rounded-md overflow-hidden">
+                  //           {/* Gambar */}
+                  //           <Image
+                  //             placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
+                  //             alt="image"
+                  //             width={2560}
+                  //             height={1440}
+                  //             src={image?.thumbnailLink}
+                  //             className="w-full lg:w-[390px] h-48 md:h-56 lg:h-[490px] object-cover rounded-md"
+                  //           />
+
+                  //           {/* Kategori - Sekarang Berada di Atas */}
+                  //           <span className="absolute top-2 left-2 z-10 text-xs md:text-sm font-sans font-semibold uppercase px-2 py-1 bg-white bg-opacity-20 border border-[#c03724] text-[#c03724] rounded-md">{image?.categoryName}</span>
+
+                  //           {/* Overlay Konten (Informasi di Bawah) */}
+                  //           <div className="absolute bottom-0 left-0 right-0 p-4 bg-transparent rounded-md">
+                  //             {/* Judul */}
+                  //             <p className="text-white text-sm md:text-[20px] font-sans font-semibold mb-2">{image?.title}</p>
+
+                  //             {/* Info Tambahan */}
+                  //             {/* <p className="flex items-center text-xs md:text-sm text-white mt-1 gap-2">
+                  //           {formatDateToIndonesian(new Date(video?.createdAt))} {video?.timezone ? video?.timezone : "WIB"} | <Icon icon="formkit:eye" width="15" height="15" /> {video?.clickCount}
+                  //         </p> */}
+                  //           </div>
+                  //         </div>
+                  //       </CarouselItem>
+                  //     ))}
+                  //   </CarouselContent>
+                  //   {/* <CarouselPrevious className="hover:bg-black" />
+                  //   <CarouselNext className="hover:bg-black -mr-6" /> */}
+                  // </Carousel>
+                  <Carousel className="">
                     <CarouselContent>
-                      {content?.map((video: any) => (
-                        <CarouselItem key={video?.id} className="basis-1/2 md:basis-1/3 lg:basis-1/4">
-                          <div onClick={() => router.push(prefixPath + `/video/detail/${video?.slug}`)} className="cursor-pointer relative group rounded-md overflow-hidden">
+                      {content?.map((image: any) => (
+                        <CarouselItem key={image?.id} className="md:basis-1/3 lg:basis-1/4">
+                          <div onClick={() => router.push(prefixPath + `/image/detail/${image?.slug}`)} className="cursor-pointer relative group rounded-md overflow-hidden">
                             {/* Gambar */}
                             <Image
                               placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
                               alt="video"
                               width={2560}
                               height={1440}
-                              src={video?.thumbnailLink}
-                              className="w-full lg:w-[390px] h-48 md:h-56 lg:h-[490px] object-cover rounded-md"
+                              src={image?.thumbnailLink}
+                              className="w-full lg:w-[400px] h-48 md:h-56 lg:h-[490px] object-cover rounded-md"
                             />
 
-                            {/* Kategori - Sekarang Berada di Atas */}
-                            <span className="absolute top-2 left-2 z-10 text-xs md:text-sm font-sans font-semibold uppercase px-2 py-1 bg-white bg-opacity-20 border border-[#c03724] text-[#c03724] rounded-md">{video?.categoryName}</span>
+                            {/* Overlay gelap */}
+                            <div className="absolute inset-0 bg-black bg-opacity-30  rounded-md"></div>
 
-                            {/* Overlay Konten (Informasi di Bawah) */}
-                            <div className="absolute bottom-0 left-0 right-0 p-4 bg-transparent rounded-md">
-                              {/* Judul */}
-                              <p className="text-white text-sm md:text-[20px] font-sans font-semibold mb-2">{video?.title}</p>
+                            {/* Kategori */}
+                            <span className="absolute top-2 left-2 z-10 text-xs md:text-sm font-sans font-semibold uppercase px-2 py-1 bg-white bg-opacity-20 border border-[#c03724] text-[#c03724] rounded-md">{image?.categoryName}</span>
 
-                              {/* Info Tambahan */}
-                              {/* <p className="flex items-center text-xs md:text-sm text-white mt-1 gap-2">
-                            {formatDateToIndonesian(new Date(video?.createdAt))} {video?.timezone ? video?.timezone : "WIB"} | <Icon icon="formkit:eye" width="15" height="15" /> {video?.clickCount}
-                          </p> */}
+                            {/* Konten Informasi */}
+                            <div className="absolute bottom-0 left-0 right-0 p-4 z-10">
+                              <p className="text-white text-sm md:text-[20px] font-sans font-semibold mb-2">{image?.title}</p>
                             </div>
                           </div>
                         </CarouselItem>
                       ))}
                     </CarouselContent>
-                    <CarouselPrevious className="hover:bg-black" />
-                    <CarouselNext className="hover:bg-black -mr-6" />
                   </Carousel>
                 ) : (
                   <p className="flex items-center justify-center">
@@ -200,8 +230,8 @@ const LatestContentKaltara = (props: { group: string; type: string }) => {
                         </CarouselItem>
                       ))}
                     </CarouselContent>
-                    <CarouselPrevious />
-                    <CarouselNext />
+                    {/* <CarouselPrevious />
+                    <CarouselNext /> */}
                   </Carousel>
                 ) : (
                   <p className="flex items-center justify-center">
@@ -210,11 +240,46 @@ const LatestContentKaltara = (props: { group: string; type: string }) => {
                 )
               ) : selectedTab == "video" ? (
                 content?.length > 0 ? (
-                  <Carousel className="w-[90%] mx-auto">
+                  // <Carousel className="">
+                  //   <CarouselContent>
+                  //     {content?.map((video: any) => (
+                  //       <CarouselItem key={video?.id} className=" md:basis-1/3 lg:basis-1/4">
+                  //         <div onClick={() => router.push(prefixPath + `/video/detail/${video?.slug}`)} className="cursor-pointer relative group rounded-lg overflow-hidden">
+                  //           {/* Gambar */}
+                  //           <Image
+                  //             placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
+                  //             alt="video"
+                  //             width={2560}
+                  //             height={1440}
+                  //             src={video?.thumbnailLink}
+                  //             className="w-full lg:w-[315px] h-48 md:h-56 lg:h-[490px] object-cover rounded-lg transition-transform duration-300"
+                  //           />
+
+                  //           {/* Kategori - Sekarang Berada di Atas */}
+                  //           <span className="absolute top-2 left-2 z-10 text-xs md:text-sm font-sans font-semibold uppercase px-2 py-1 bg-white bg-opacity-20 border border-[#c03724] text-[#c03724] rounded-md">{video?.categoryName}</span>
+
+                  //           {/* Overlay Konten (Informasi di Bawah) */}
+                  //           <div className="absolute bottom-0 left-0 right-0 p-4 bg-transparent rounded-lg">
+                  //             {/* Judul */}
+                  //             <p className="text-white text-sm md:text-[20px] font-sans font-semibold mb-2">{video?.title}</p>
+
+                  //             {/* Info Tambahan */}
+                  //             {/* <p className="flex items-center text-xs md:text-sm text-white mt-1 gap-2">
+                  //           {formatDateToIndonesian(new Date(video?.createdAt))} {video?.timezone ? video?.timezone : "WIB"} | <Icon icon="formkit:eye" width="15" height="15" /> {video?.clickCount}
+                  //         </p> */}
+                  //           </div>
+                  //         </div>
+                  //       </CarouselItem>
+                  //     ))}
+                  //   </CarouselContent>
+                  //   {/* <CarouselPrevious className="hover:bg-black" />
+                  //   <CarouselNext className="hover:bg-black -mr-6" /> */}
+                  // </Carousel>
+                  <Carousel className="">
                     <CarouselContent>
                       {content?.map((video: any) => (
-                        <CarouselItem key={video?.id} className="basis-1/2 md:basis-1/3 lg:basis-1/4">
-                          <div onClick={() => router.push(prefixPath + `/video/detail/${video?.slug}`)} className="cursor-pointer relative group rounded-lg overflow-hidden">
+                        <CarouselItem key={video?.id} className="md:basis-1/3 lg:basis-1/4">
+                          <div onClick={() => router.push(prefixPath + `/video/detail/${video?.slug}`)} className="cursor-pointer relative group rounded-md overflow-hidden">
                             {/* Gambar */}
                             <Image
                               placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
@@ -222,28 +287,23 @@ const LatestContentKaltara = (props: { group: string; type: string }) => {
                               width={2560}
                               height={1440}
                               src={video?.thumbnailLink}
-                              className="w-full lg:w-[315px] h-48 md:h-56 lg:h-[490px] object-cover rounded-lg transition-transform duration-300"
+                              className="w-full lg:w-[400px] h-48 md:h-56 lg:h-[490px] object-cover rounded-md"
                             />
 
-                            {/* Kategori - Sekarang Berada di Atas */}
+                            {/* Overlay Gelap */}
+                            <div className="absolute inset-0 bg-black bg-opacity-30 rounded-lg"></div>
+
+                            {/* Kategori */}
                             <span className="absolute top-2 left-2 z-10 text-xs md:text-sm font-sans font-semibold uppercase px-2 py-1 bg-white bg-opacity-20 border border-[#c03724] text-[#c03724] rounded-md">{video?.categoryName}</span>
 
-                            {/* Overlay Konten (Informasi di Bawah) */}
-                            <div className="absolute bottom-0 left-0 right-0 p-4 bg-transparent rounded-lg">
-                              {/* Judul */}
-                              <p className="text-white text-sm md:text-[20px] font-sans font-semibold mb-2">{video?.title}</p>
-
-                              {/* Info Tambahan */}
-                              {/* <p className="flex items-center text-xs md:text-sm text-white mt-1 gap-2">
-                            {formatDateToIndonesian(new Date(video?.createdAt))} {video?.timezone ? video?.timezone : "WIB"} | <Icon icon="formkit:eye" width="15" height="15" /> {video?.clickCount}
-                          </p> */}
+                            {/* Overlay Konten (Judul) */}
+                            <div className="absolute bottom-0 left-0 right-0 p-4 z-10">
+                              <p className="text-white text-sm md:text-[20px] font-sans font-semibold mb-2 line-clamp-2">{video?.title}</p>
                             </div>
                           </div>
                         </CarouselItem>
                       ))}
                     </CarouselContent>
-                    <CarouselPrevious className="hover:bg-black" />
-                    <CarouselNext className="hover:bg-black -mr-6" />
                   </Carousel>
                 ) : (
                   <p className="flex items-center justify-center">
@@ -286,8 +346,8 @@ const LatestContentKaltara = (props: { group: string; type: string }) => {
                       </CarouselItem>
                     ))}
                   </CarouselContent>
-                  <CarouselPrevious />
-                  <CarouselNext />
+                  {/* <CarouselPrevious />
+                  <CarouselNext /> */}
                 </Carousel>
               ) : (
                 <p className="flex items-center justify-center">
diff --git a/components/landing-page/landing-polda-kaltara/navbar-polda-kaltara.tsx b/components/landing-page/landing-polda-kaltara/navbar-polda-kaltara.tsx
index 6f215b79..d10b5ea2 100644
--- a/components/landing-page/landing-polda-kaltara/navbar-polda-kaltara.tsx
+++ b/components/landing-page/landing-polda-kaltara/navbar-polda-kaltara.tsx
@@ -135,7 +135,7 @@ const NavbarKaltara = () => {
           )}
         </button>
 
-        <div className="flex flex-row items-center gap-3">
+        <div className="hidden lg:flex items-center gap-5">
           <Link href="/tbnews/polda-kaltara" className="text-white">
             TBNews
           </Link>
@@ -184,6 +184,151 @@ const NavbarKaltara = () => {
           </Link>
         </div>
       </div>
+
+      {/* mobile menu */}
+      {menuOpen && (
+        <div className="lg:hidden absolute bg-[#c03724] dark:bg-slate-600 px-4 py-3 w-full space-y-3 z-50">
+          <NavigationMenu>
+            <NavigationMenuList className="gap-10">
+              <NavigationMenuItem>
+                <NavigationMenuTrigger className="bg-[#c03724] text-white hover:bg-[#c03724] hover:text-white">
+                  {/* <a className="text-white flex flex-row justify-center items-center cursor-pointer"> */}
+                  {/* <svg className="mx-2 dark:" width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path
+                          d="M20 7.5H5C4.6023 7.5004 4.221 7.65856 3.93978 7.93978C3.65856 8.221 3.5004 8.6023 3.5 9V19.5C3.5004 19.8977 3.65856 20.279 3.93978 20.5602C4.221 20.8414 4.6023 20.9996 5 21H20C20.3977 20.9996 20.779 20.8414 21.0602 20.5602C21.3414 20.279 21.4996 19.8977 21.5 19.5V9C21.4996 8.6023 21.3414 8.221 21.0602 7.93978C20.779 7.65856 20.3977 7.5004 20 7.5ZM10.25 17.25V11.25L15.5 14.25L10.25 17.25ZM5 4.5H20V6H5V4.5ZM6.5 1.5H18.5V3H6.5V1.5Z"
+                          fill="currentColor"
+                        />
+                      </svg> */}
+                  {t("content")}
+                  {/* </a> */}
+                </NavigationMenuTrigger>
+                <NavigationMenuContent className="flex flex-col place-content-start rounded-md overflow-hidden">
+                  <NavigationMenuLink onClick={() => router.push(prefixPath + "/image/filter")} className="flex place-items-start gap-1.5 p-2 w-36">
+                    <p className="text-slate-600  dark:text-white hover:text-[#bb3523] flex flex-row items-center py-2 cursor-pointer">
+                      <FiImage className="mr-2" />
+                      {t("image")}
+                    </p>
+                  </NavigationMenuLink>
+                  <NavigationMenuLink onClick={() => router.push(prefixPath + "/video/filter")} className="flex items-start gap-1.5 p-2 ">
+                    {pathname?.split("/")[1] == "in" ? (
+                      <>
+                        <p className="text-slate-600 text-left dark:text-white hover:text-[#bb3523] flex flex-row justify-center items-center py-2 cursor-pointer">
+                          <FiYoutube className="mr-2" />
+                          {t("video")}
+                        </p>
+                      </>
+                    ) : (
+                      <>
+                        <p className="text-slate-600 text-left dark:text-white hover:text-[#bb3523] flex flex-row justify-center items-center py-2 cursor-pointer">
+                          <FiYoutube className="mr-2" />
+                          {t("video")}
+                        </p>
+                      </>
+                    )}
+                  </NavigationMenuLink>
+                  <NavigationMenuLink onClick={() => router.push(prefixPath + "/document/filter")} className="flex place-items-start gap-1.5 p-2">
+                    <p className="text-slate-600 text-left dark:text-white hover:text-[#bb3523] flex flex-row justify-center items-center py-2 cursor-pointer">
+                      <FiFile className="mr-2" />
+                      {t("text")}
+                    </p>
+                  </NavigationMenuLink>
+                  <NavigationMenuLink onClick={() => router.push(prefixPath + "/audio/filter")} className="flex place-items-start gap-1.5 p-2 ">
+                    <p className="text-slate-600 text-left dark:text-white hover:text-[#bb3523] flex flex-row justify-center items-center py-2 cursor-pointer">
+                      <FiMusic className="mr-2" />
+                      {t("audio")}{" "}
+                    </p>
+                  </NavigationMenuLink>
+                </NavigationMenuContent>
+              </NavigationMenuItem>
+              <NavigationMenuItem>
+                <Link href={prefixPath + "/schedule"} legacyBehavior passHref>
+                  <NavigationMenuLink className="bg-[#c03724] text-white">
+                    {/* <span>
+                        <svg className="mr-2" width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                          <path
+                            d="M19.5 4H18.5V3C18.5 2.4 18.1 2 17.5 2C16.9 2 16.5 2.4 16.5 3V4H8.5V3C8.5 2.4 8.1 2 7.5 2C6.9 2 6.5 2.4 6.5 3V4H5.5C3.8 4 2.5 5.3 2.5 7V8H22.5V7C22.5 5.3 21.2 4 19.5 4ZM2.5 19C2.5 20.7 3.8 22 5.5 22H19.5C21.2 22 22.5 20.7 22.5 19V10H2.5V19ZM17.5 12C18.1 12 18.5 12.4 18.5 13C18.5 13.6 18.1 14 17.5 14C16.9 14 16.5 13.6 16.5 13C16.5 12.4 16.9 12 17.5 12ZM17.5 16C18.1 16 18.5 16.4 18.5 17C18.5 17.6 18.1 18 17.5 18C16.9 18 16.5 17.6 16.5 17C16.5 16.4 16.9 16 17.5 16ZM12.5 12C13.1 12 13.5 12.4 13.5 13C13.5 13.6 13.1 14 12.5 14C11.9 14 11.5 13.6 11.5 13C11.5 12.4 11.9 12 12.5 12ZM12.5 16C13.1 16 13.5 16.4 13.5 17C13.5 17.6 13.1 18 12.5 18C11.9 18 11.5 17.6 11.5 17C11.5 16.4 11.9 16 12.5 16ZM7.5 12C8.1 12 8.5 12.4 8.5 13C8.5 13.6 8.1 14 7.5 14C6.9 14 6.5 13.6 6.5 13C6.5 12.4 6.9 12 7.5 12ZM7.5 16C8.1 16 8.5 16.4 8.5 17C8.5 17.6 8.1 18 7.5 18C6.9 18 6.5 17.6 6.5 17C6.5 16.4 6.9 16 7.5 16Z"
+                            fill="currentColor"
+                          />
+                        </svg>
+                      </span> */}
+                    {t("schedule")}
+                  </NavigationMenuLink>
+                </Link>
+              </NavigationMenuItem>
+              <NavigationMenuItem>
+                <Link href={prefixPath + "/indeks"} legacyBehavior passHref>
+                  <NavigationMenuLink className="bg-[#c03724] text-white">
+                    {/* <span>
+                        <svg className="mr-2" width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                          <path
+                            fill-rule="evenodd"
+                            clip-rule="evenodd"
+                            d="M2.5 6C2.5 5.20435 2.81607 4.44129 3.37868 3.87868C3.94129 3.31607 4.70435 3 5.5 3H19.5C20.2956 3 21.0587 3.31607 21.6213 3.87868C22.1839 4.44129 22.5 5.20435 22.5 6V18C22.5 18.7956 22.1839 19.5587 21.6213 20.1213C21.0587 20.6839 20.2956 21 19.5 21H5.5C4.70435 21 3.94129 20.6839 3.37868 20.1213C2.81607 19.5587 2.5 18.7956 2.5 18V6ZM7.5 7C7.23478 7 6.98043 7.10536 6.79289 7.29289C6.60536 7.48043 6.5 7.73478 6.5 8V12C6.5 12.2652 6.60536 12.5196 6.79289 12.7071C6.98043 12.8946 7.23478 13 7.5 13H11.5C11.7652 13 12.0196 12.8946 12.2071 12.7071C12.3946 12.5196 12.5 12.2652 12.5 12V8C12.5 7.73478 12.3946 7.48043 12.2071 7.29289C12.0196 7.10536 11.7652 7 11.5 7H7.5ZM8.5 11V9H10.5V11H8.5ZM15.5 7C15.2348 7 14.9804 7.10536 14.7929 7.29289C14.6054 7.48043 14.5 7.73478 14.5 8C14.5 8.26522 14.6054 8.51957 14.7929 8.70711C14.9804 8.89464 15.2348 9 15.5 9H17.5C17.7652 9 18.0196 8.89464 18.2071 8.70711C18.3946 8.51957 18.5 8.26522 18.5 8C18.5 7.73478 18.3946 7.48043 18.2071 7.29289C18.0196 7.10536 17.7652 7 17.5 7H15.5ZM15.5 11C15.2348 11 14.9804 11.1054 14.7929 11.2929C14.6054 11.4804 14.5 11.7348 14.5 12C14.5 12.2652 14.6054 12.5196 14.7929 12.7071C14.9804 12.8946 15.2348 13 15.5 13H17.5C17.7652 13 18.0196 12.8946 18.2071 12.7071C18.3946 12.5196 18.5 12.2652 18.5 12C18.5 11.7348 18.3946 11.4804 18.2071 11.2929C18.0196 11.1054 17.7652 11 17.5 11H15.5ZM7.5 15C7.23478 15 6.98043 15.1054 6.79289 15.2929C6.60536 15.4804 6.5 15.7348 6.5 16C6.5 16.2652 6.60536 16.5196 6.79289 16.7071C6.98043 16.8946 7.23478 17 7.5 17H17.5C17.7652 17 18.0196 16.8946 18.2071 16.7071C18.3946 16.5196 18.5 16.2652 18.5 16C18.5 15.7348 18.3946 15.4804 18.2071 15.2929C18.0196 15.1054 17.7652 15 17.5 15H7.5Z"
+                            fill="currentColor"
+                          />
+                        </svg>
+                      </span> */}
+                    {t("index")}
+                  </NavigationMenuLink>
+                </Link>
+              </NavigationMenuItem>
+            </NavigationMenuList>
+          </NavigationMenu>
+
+          <div className="flex lg:hidden flex-col items-center gap-1">
+            <div className="flex flex-row justify-between items-center gap-2">
+              <Link href="/tbnews/polda-kaltara" className="text-white">
+                TBNews
+              </Link>
+
+              <div className="flex items-center">
+                <a href="https://tvradio.polri.go.id/">
+                  <Image src="/assets/polriTv.png" width={100} height={120} alt="polritv" className="object-contain flex-auto " />
+                </a>
+              </div>
+
+              {/* Languange */}
+              <div className="relative inline-block text-left">
+                <LocalSwitcher />
+              </div>
+            </div>
+
+            <div className="flex flex-row gap-10 items-center py-3">
+              <div className="relative text-gray-600 dark:text-white">
+                <input
+                  value={onSearch}
+                  onChange={(e) => setOnSearch(e.target.value)}
+                  onKeyPress={() => router.push(`/all/filter?title=${onSearch}`)}
+                  type="text"
+                  placeholder={t("search")}
+                  className="pl-8 pr-4 py-1 w-28 text-[13px] border rounded-full focus:outline-none dark:text-white"
+                />
+                <span className="absolute left-4 top-1/2 transform -translate-y-1/2">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24">
+                    <path
+                      fill="currentColor"
+                      fill-rule="evenodd"
+                      d="M14.385 15.446a6.751 6.751 0 1 1 1.06-1.06l5.156 5.155a.75.75 0 1 1-1.06 1.06zM6.46 13.884a5.25 5.25 0 1 1 7.43-.005l-.005.005l-.005.004a5.25 5.25 0 0 1-7.42-.004"
+                      clip-rule="evenodd"
+                    />
+                  </svg>
+                </span>
+              </div>
+
+              {/* Dark Mode */}
+              <ThemeSwitcher />
+
+              {/* login */}
+              <Link href="/auth">
+                <Button className="hidden lg:flex justify-center items-center bg-white rounded-full gap-3 p-2 w-fit h-fit">
+                  <Icon icon="material-symbols:lock" className="text-[#c03724]" />
+                  <p className="text-[#c03724]">Login</p>
+                </Button>
+              </Link>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
 };
diff --git a/components/landing-page/landing-polda-kaltara/search-section-kaltara.tsx b/components/landing-page/landing-polda-kaltara/search-section-kaltara.tsx
index 4a24908d..d43d1405 100644
--- a/components/landing-page/landing-polda-kaltara/search-section-kaltara.tsx
+++ b/components/landing-page/landing-polda-kaltara/search-section-kaltara.tsx
@@ -14,11 +14,11 @@ const SearchSectionKaltara = () => {
       <Reveal>
         <div className="flex flex-col items-center text-center py-12 px-4 md:py-16">
           {/* Heading */}
-          <h2 className="text-[32px] font-sans md:text-3xl font-bold text-black">Liputan apa yang sedang anda cari?</h2>
-          <p className="text-gray-600 mt-2 max-w-lg text-[16px] font-sans md:text-base">Liputan terkini yang bersumber langsung dari kegiatan Polri di Mabes, Polda dan Polres di seluruh Indonesia</p>
+          <h2 className="text-[15px] lg:text-[32px] font-sans md:text-3xl font-bold text-black">Liputan apa yang sedang anda cari?</h2>
+          <p className="text-gray-600 mt-2 max-w-lg text-[10px] lg:text-[16px] font-sans md:text-base">Liputan terkini yang bersumber langsung dari kegiatan Polri di Mabes, Polda dan Polres di seluruh Indonesia</p>
 
           {/* Subjudul */}
-          <h3 className="text-sm md:text-[20px] font-sans font-semibold mt-6">Temukan Liputan Anda</h3>
+          <h3 className="text-[10px] md:text-[20px] font-sans font-semibold mt-6">Temukan Liputan Anda</h3>
 
           {/* Search Bar */}
           <div className="relative mt-4 w-full max-w-sm md:max-w-md">