diff --git a/components/form/content/audio-form.tsx b/components/form/content/audio-form.tsx
index bd74b767..047ca8e4 100644
--- a/components/form/content/audio-form.tsx
+++ b/components/form/content/audio-form.tsx
@@ -44,13 +44,14 @@ import {
   getDetailArticle,
   getGenerateKeywords,
   getGenerateTitle,
+  translateText,
 } from "@/service/content/ai";
 import { getCookiesDecrypt } from "@/lib/utils";
 import { useDropzone } from "react-dropzone";
 import { Icon } from "@iconify/react";
 import { CloudUpload } from "lucide-react";
 import Image from "next/image";
-import { error, loading } from "@/config/swal";
+import { close, error, loading } from "@/config/swal";
 import { Item } from "@radix-ui/react-dropdown-menu";
 import dynamic from "next/dynamic";
 import { getCsrfToken } from "@/service/auth";
@@ -145,6 +146,10 @@ export default function FormAudio() {
   const [fileError, setFileError] = useState<string | null>(null);
   type FileWithPreview = File & { preview: string };
 
+  const [isLoadingTranslate, setIsLoadingTranslate] = useState(false);
+  const [translatedContent, setTranslatedContent] = React.useState("");
+  const [selectedLang, setSelectedLang] = React.useState<"id" | "en">("id");
+
   const options: Option[] = [
     { id: "all", label: "SEMUA" },
     { id: "5", label: "UMUM" },
@@ -417,7 +422,8 @@ export default function FormAudio() {
         ""
       );
       const articleImagesData = articleData?.imagesUrl?.split(",");
-      setArticleBody(cleanArticleBody || "");
+      setValue("description", cleanArticleBody || "");
+      // setArticleBody(cleanArticleBody || "");
       setDetailData(articleData);
       setSelectedArticleId(id);
       setArticleImages(articleImagesData || []);
@@ -808,7 +814,8 @@ export default function FormAudio() {
       lang: "id",
       contextType: "text",
       urlContext: null,
-      context: editorContent,
+      context: getValues("descriptionOri"),
+      // context: editorContent,
       createdBy: roleId,
       sentiment: "Humorous",
       clientId: "7QTW8cMojyayt6qnhqTOeJaBI70W4EaQ",
@@ -1178,7 +1185,111 @@ export default function FormAudio() {
                         Select Original Description
                       </Label>
                     </div>
+
                     <div className="py-3 space-y-2">
+                      <div className="flex justify-between items-center">
+                        <Label>
+                          {t("description", { defaultValue: "Description" })}
+                        </Label>
+
+                        {roleId === "14" && (
+                          <button
+                            type="button"
+                            onClick={async () => {
+                              try {
+                                loading();
+                                setIsLoadingTranslate(true);
+                                const res = await translateText({
+                                  text: getValues("descriptionOri"),
+                                  sourceLang: "ID",
+                                  targetLang: "EN",
+                                });
+
+                                if (!res.error) {
+                                  const resultText =
+                                    res?.data?.data?.translations?.[0]?.text ||
+                                    "";
+
+                                  setTranslatedContent(resultText);
+                                }
+                              } catch (err) {
+                                close();
+                                console.error("Translate gagal:", err);
+                              } finally {
+                                close();
+                                setIsLoadingTranslate(false);
+                              }
+                            }}
+                            className="px-3 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600"
+                          >
+                            {isLoadingTranslate
+                              ? "Translating..."
+                              : "Translate to English"}
+                          </button>
+                        )}
+                      </div>
+
+                      {/* Pilihan bahasa untuk posting */}
+                      {roleId === "14" && (
+                        <div className="flex items-center gap-4 mb-2">
+                          <label className="flex items-center gap-2">
+                            <input
+                              type="radio"
+                              value="id"
+                              checked={selectedLang === "id"}
+                              onChange={() => setSelectedLang("id")}
+                            />
+                            <span>Gunakan Bahasa Indonesia</span>
+                          </label>
+                        </div>
+                      )}
+
+                      {/* Editor Bahasa Indonesia */}
+                      <Controller
+                        control={control}
+                        name="descriptionOri"
+                        render={({ field: { onChange, value } }) => (
+                          <CustomEditor
+                            onChange={onChange}
+                            initialData={value}
+                          />
+                        )}
+                      />
+
+                      {/* Editor Bahasa Inggris */}
+                      {translatedContent && (
+                        <div className="mt-4">
+                          <div className="flex flex-col">
+                            <Label className="text-[15px]">
+                              English Version
+                            </Label>{" "}
+                            <label className="flex items-center gap-2">
+                              <input
+                                type="radio"
+                                value="en"
+                                checked={selectedLang === "en"}
+                                onChange={() => setSelectedLang("en")}
+                                disabled={!translatedContent} // kalau belum translate, disable
+                              />
+                              <span>Gunakan Bahasa Inggris</span>
+                            </label>
+                          </div>
+
+                          <CustomEditor
+                            onChange={(val: any) => setTranslatedContent(val)}
+                            initialData={translatedContent}
+                          />
+                        </div>
+                      )}
+
+                      {errors.description?.message && (
+                        <p className="text-red-400 text-sm">
+                          {errors.description.message}
+                        </p>
+                      )}
+                    </div>
+
+                    {/* <div className="py-3 space-y-2">
                       <Label>
                         {t("description", { defaultValue: "Description" })}
                       </Label>
@@ -1200,7 +1311,7 @@ export default function FormAudio() {
                           {errors.description.message}
                         </p>
                       )}
-                    </div>
+                    </div> */}
 
                     <p className="text-sm font-semibold">Content Rewrite</p>
                     <div className="my-2">
diff --git a/components/form/content/image-form.tsx b/components/form/content/image-form.tsx
index 814327a3..34058ace 100644
--- a/components/form/content/image-form.tsx
+++ b/components/form/content/image-form.tsx
@@ -51,7 +51,7 @@ import { useDropzone } from "react-dropzone";
 import { Icon } from "@iconify/react";
 import { CloudUpload, X } from "lucide-react";
 import Image from "next/image";
-import { error, loading } from "@/config/swal";
+import { close, error, loading } from "@/config/swal";
 import { Item } from "@radix-ui/react-dropdown-menu";
 import { data } from "jquery";
 import { options } from "@fullcalendar/core/preact.js";
@@ -149,6 +149,8 @@ export default function FormImage() {
   const [files, setFiles] = useState<FileWithPreview[]>([]);
   const [filesTemp, setFilesTemp] = useState<File[]>([]);
   const [publishedFor, setPublishedFor] = useState<string[]>([]);
+  const [translatedContent, setTranslatedContent] = React.useState("");
+  const [selectedLang, setSelectedLang] = React.useState<"id" | "en">("id");
 
   const options: Option[] = [
     { id: "all", label: "SEMUA" },
@@ -449,7 +451,7 @@ export default function FormImage() {
         ""
       );
       const articleImagesData = articleData?.imagesUrl?.split(",");
-      setArticleBody(cleanArticleBody || "");
+      setValue("description", cleanArticleBody || "");
       setDetailData(articleData);
       setSelectedArticleId(id);
       setArticleImages(articleImagesData || []);
@@ -668,7 +670,6 @@ export default function FormImage() {
 
     const resCsrf = await getCsrfToken();
     const csrfToken = resCsrf?.data?.token;
-    // console.log("CSRF TOKEN : ", csrfToken);
     const headers = {
       "X-XSRF-TOKEN": csrfToken,
     };
@@ -827,7 +828,7 @@ export default function FormImage() {
       lang: "id",
       contextType: "text",
       urlContext: null,
-      context: editorContent,
+      context: getValues("descriptionOri"),
       createdBy: roleId,
       sentiment: "Humorous",
       clientId: "7QTW8cMojyayt6qnhqTOeJaBI70W4EaQ",
@@ -1198,9 +1199,9 @@ export default function FormImage() {
                             className="dark:text-black"
                             onChange={(value: any) => {
                               onChange(value);
-                              setEditorContent(value);
+                              // setEditorContent(value);
                             }}
-                            initialData={articleBody || value}
+                            initialData={value}
                           />
                         )
                       }
@@ -1239,24 +1240,130 @@ export default function FormImage() {
                             type="button"
                             onClick={async () => {
                               try {
+                                loading();
                                 setIsLoadingTranslate(true);
                                 const res = await translateText({
-                                  text: localContent,
+                                  text: getValues("descriptionOri"),
                                   sourceLang: "ID",
                                   targetLang: "EN",
                                 });
 
-                                if (!res.error && res.data?.translatedText) {
-                                  setLocalContent(res.data.translatedText);
-                                  setValue(
-                                    "descriptionOri",
-                                    res.data.translatedText
-                                  );
-                                  setEditorContent(res.data.translatedText);
+                                if (!res.error) {
+                                  const resultText =
+                                    res?.data?.data?.translations?.[0]?.text ||
+                                    "";
+
+                                  setTranslatedContent(resultText);
                                 }
                               } catch (err) {
+                                close();
                                 console.error("Translate gagal:", err);
                               } finally {
+                                close();
+                                setIsLoadingTranslate(false);
+                              }
+                            }}
+                            className="px-3 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600"
+                          >
+                            {isLoadingTranslate
+                              ? "Translating..."
+                              : "Translate to English"}
+                          </button>
+                        )}
+                      </div>
+
+                      {/* Pilihan bahasa untuk posting */}
+                      {roleId === "14" && (
+                        <div className="flex items-center gap-4 mb-2">
+                          <label className="flex items-center gap-2">
+                            <input
+                              type="radio"
+                              value="id"
+                              checked={selectedLang === "id"}
+                              onChange={() => setSelectedLang("id")}
+                            />
+                            <span>Gunakan Bahasa Indonesia</span>
+                          </label>
+                        </div>
+                      )}
+
+                      {/* Editor Bahasa Indonesia */}
+                      <Controller
+                        control={control}
+                        name="descriptionOri"
+                        render={({ field: { onChange, value } }) => (
+                          <CustomEditor
+                            onChange={onChange}
+                            initialData={value}
+                          />
+                        )}
+                      />
+
+                      {/* Editor Bahasa Inggris */}
+                      {translatedContent && (
+                        <div className="mt-4">
+                          <div className="flex flex-col">
+                            <Label className="text-[15px]">
+                              English Version
+                            </Label>{" "}
+                            <label className="flex items-center gap-2">
+                              <input
+                                type="radio"
+                                value="en"
+                                checked={selectedLang === "en"}
+                                onChange={() => setSelectedLang("en")}
+                                disabled={!translatedContent} // kalau belum translate, disable
+                              />
+                              <span>Gunakan Bahasa Inggris</span>
+                            </label>
+                          </div>
+
+                          <CustomEditor
+                            onChange={(val: any) => setTranslatedContent(val)}
+                            initialData={translatedContent}
+                          />
+                        </div>
+                      )}
+
+                      {errors.description?.message && (
+                        <p className="text-red-400 text-sm">
+                          {errors.description.message}
+                        </p>
+                      )}
+                    </div>
+                    {/* <div className="py-3 space-y-2">
+                      <div className="flex justify-between items-center">
+                        <Label>
+                          {t("description", { defaultValue: "Description" })}
+                        </Label>
+
+                        {roleId === "14" && (
+                          <button
+                            type="button"
+                            onClick={async () => {
+                              try {
+                                loading();
+                                setIsLoadingTranslate(true);
+                                const res = await translateText({
+                                  text: getValues("descriptionOri"),
+                                  sourceLang: "ID",
+                                  targetLang: "EN",
+                                });
+                                console.log("RRRR", res);
+
+                                if (!res.error) {
+                                  // setLocalContent(res.data.translatedText);
+                                  setValue(
+                                    "descriptionOri",
+                                    res?.data?.data?.translations[0]?.text || ""
+                                  );
+                                  // setEditorContent(res.data.translatedText);
+                                }
+                              } catch (err) {
+                                close();
+                                console.error("Translate gagal:", err);
+                              } finally {
+                                close();
                                 setIsLoadingTranslate(false);
                               }
                             }}
@@ -1269,7 +1376,6 @@ export default function FormImage() {
                         )}
                       </div>
 
-                      {/* Editor */}
                       <Controller
                         control={control}
                         name="descriptionOri"
@@ -1277,10 +1383,10 @@ export default function FormImage() {
                           <CustomEditor
                             onChange={(val: any) => {
                               onChange(val);
-                              setLocalContent(val);
-                              setEditorContent(val);
+                              // setLocalContent(val);
+                              // setEditorContent(val);
                             }}
-                            initialData={localContent || value}
+                            initialData={value}
                           />
                         )}
                       />
@@ -1290,7 +1396,7 @@ export default function FormImage() {
                           {errors.description.message}
                         </p>
                       )}
-                    </div>
+                    </div> */}
                     {/* <div className="py-3 space-y-2">
                       <Label>
                         {t("description", { defaultValue: "Description" })}
@@ -1314,7 +1420,6 @@ export default function FormImage() {
                         </p>
                       )}
                     </div> */}
-
                     <p className="text-sm font-semibold">Content Rewrite</p>
                     <div className="my-2">
                       <Button
@@ -1326,7 +1431,6 @@ export default function FormImage() {
                         Content Rewrite
                       </Button>
                     </div>
-
                     {showRewriteEditor && (
                       <div>
                         {isGeneratedArticle && (
diff --git a/components/form/content/teks-form.tsx b/components/form/content/teks-form.tsx
index 6c4083f2..a10d338c 100644
--- a/components/form/content/teks-form.tsx
+++ b/components/form/content/teks-form.tsx
@@ -44,13 +44,14 @@ import {
   getDetailArticle,
   getGenerateKeywords,
   getGenerateTitle,
+  translateText,
 } from "@/service/content/ai";
 import { getCookiesDecrypt } from "@/lib/utils";
 import { useDropzone } from "react-dropzone";
 import { Icon } from "@iconify/react";
 import { CloudUpload } from "lucide-react";
 import Image from "next/image";
-import { error, loading } from "@/config/swal";
+import { close, error, loading } from "@/config/swal";
 import { Item } from "@radix-ui/react-dropdown-menu";
 import dynamic from "next/dynamic";
 import { getCsrfToken } from "@/service/auth";
@@ -142,6 +143,11 @@ export default function FormTeks() {
 
   const [files, setFiles] = useState<FileWithPreview[]>([]);
   const [publishedFor, setPublishedFor] = useState<string[]>([]);
+
+  const [isLoadingTranslate, setIsLoadingTranslate] = useState(false);
+  const [translatedContent, setTranslatedContent] = React.useState("");
+  const [selectedLang, setSelectedLang] = React.useState<"id" | "en">("id");
+
   const options: Option[] = [
     { id: "all", label: "SEMUA" },
     { id: "5", label: "UMUM" },
@@ -429,7 +435,8 @@ export default function FormTeks() {
         ""
       );
       const articleImagesData = articleData?.imagesUrl?.split(",");
-      setArticleBody(cleanArticleBody || "");
+      setValue("description", cleanArticleBody || "");
+      // setArticleBody(cleanArticleBody || "");
       setDetailData(articleData);
       setSelectedArticleId(id);
       setArticleImages(articleImagesData || []);
@@ -819,7 +826,8 @@ export default function FormTeks() {
       lang: "id",
       contextType: "text",
       urlContext: null,
-      context: editorContent,
+      context: getValues("descriptionOri"),
+      // context: editorContent,
       createdBy: roleId,
       sentiment: "Humorous",
       clientId: "7QTW8cMojyayt6qnhqTOeJaBI70W4EaQ",
@@ -1185,7 +1193,110 @@ export default function FormTeks() {
                         Select Original Description
                       </Label>
                     </div>
+
                     <div className="py-3 space-y-2">
+                      <div className="flex justify-between items-center">
+                        <Label>
+                          {t("description", { defaultValue: "Description" })}
+                        </Label>
+
+                        {roleId === "14" && (
+                          <button
+                            type="button"
+                            onClick={async () => {
+                              try {
+                                loading();
+                                setIsLoadingTranslate(true);
+                                const res = await translateText({
+                                  text: getValues("descriptionOri"),
+                                  sourceLang: "ID",
+                                  targetLang: "EN",
+                                });
+
+                                if (!res.error) {
+                                  const resultText =
+                                    res?.data?.data?.translations?.[0]?.text ||
+                                    "";
+
+                                  setTranslatedContent(resultText);
+                                }
+                              } catch (err) {
+                                close();
+                                console.error("Translate gagal:", err);
+                              } finally {
+                                close();
+                                setIsLoadingTranslate(false);
+                              }
+                            }}
+                            className="px-3 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600"
+                          >
+                            {isLoadingTranslate
+                              ? "Translating..."
+                              : "Translate to English"}
+                          </button>
+                        )}
+                      </div>
+
+                      {/* Pilihan bahasa untuk posting */}
+                      {roleId === "14" && (
+                        <div className="flex items-center gap-4 mb-2">
+                          <label className="flex items-center gap-2">
+                            <input
+                              type="radio"
+                              value="id"
+                              checked={selectedLang === "id"}
+                              onChange={() => setSelectedLang("id")}
+                            />
+                            <span>Gunakan Bahasa Indonesia</span>
+                          </label>
+                        </div>
+                      )}
+
+                      {/* Editor Bahasa Indonesia */}
+                      <Controller
+                        control={control}
+                        name="descriptionOri"
+                        render={({ field: { onChange, value } }) => (
+                          <CustomEditor
+                            onChange={onChange}
+                            initialData={value}
+                          />
+                        )}
+                      />
+
+                      {/* Editor Bahasa Inggris */}
+                      {translatedContent && (
+                        <div className="mt-4">
+                          <div className="flex flex-col">
+                            <Label className="text-[15px]">
+                              English Version
+                            </Label>{" "}
+                            <label className="flex items-center gap-2">
+                              <input
+                                type="radio"
+                                value="en"
+                                checked={selectedLang === "en"}
+                                onChange={() => setSelectedLang("en")}
+                                disabled={!translatedContent} // kalau belum translate, disable
+                              />
+                              <span>Gunakan Bahasa Inggris</span>
+                            </label>
+                          </div>
+
+                          <CustomEditor
+                            onChange={(val: any) => setTranslatedContent(val)}
+                            initialData={translatedContent}
+                          />
+                        </div>
+                      )}
+
+                      {errors.description?.message && (
+                        <p className="text-red-400 text-sm">
+                          {errors.description.message}
+                        </p>
+                      )}
+                    </div>
+                    {/* <div className="py-3 space-y-2">
                       <Label>
                         {t("description", { defaultValue: "Description" })}
                       </Label>
@@ -1207,7 +1318,7 @@ export default function FormTeks() {
                           {errors.description.message}
                         </p>
                       )}
-                    </div>
+                    </div> */}
 
                     <p className="text-sm font-semibold">Content Rewrite</p>
                     <div className="my-2">
@@ -1329,8 +1440,6 @@ export default function FormTeks() {
                 />
               </div>
             </div>
-
-            {/* Submit Button */}
           </div>
         </Card>
         <div className="w-full lg:w-4/12">
diff --git a/components/form/content/video-form.tsx b/components/form/content/video-form.tsx
index 4b1cc91f..cee416f5 100644
--- a/components/form/content/video-form.tsx
+++ b/components/form/content/video-form.tsx
@@ -44,13 +44,14 @@ import {
   getDetailArticle,
   getGenerateKeywords,
   getGenerateTitle,
+  translateText,
 } from "@/service/content/ai";
 import { getCookiesDecrypt } from "@/lib/utils";
 import { useDropzone } from "react-dropzone";
 import { Icon } from "@iconify/react";
 import { CloudUpload } from "lucide-react";
 import Image from "next/image";
-import { error, loading } from "@/config/swal";
+import { close, error, loading } from "@/config/swal";
 import { Item } from "@radix-ui/react-dropdown-menu";
 import dynamic from "next/dynamic";
 import { getCsrfToken } from "@/service/auth";
@@ -146,6 +147,10 @@ export default function FormVideo() {
   const [publishedFor, setPublishedFor] = useState<string[]>([]);
   const [files, setFiles] = useState<FileWithPreview[]>([]);
 
+  const [isLoadingTranslate, setIsLoadingTranslate] = useState(false);
+  const [translatedContent, setTranslatedContent] = React.useState("");
+  const [selectedLang, setSelectedLang] = React.useState<"id" | "en">("id");
+
   const options: Option[] = [
     { id: "all", label: "SEMUA" },
     { id: "5", label: "UMUM" },
@@ -423,7 +428,8 @@ export default function FormVideo() {
         ""
       );
       const articleImagesData = articleData?.imagesUrl?.split(",");
-      setArticleBody(cleanArticleBody || "");
+      setValue("description", cleanArticleBody || "");
+      // setArticleBody(cleanArticleBody || "");
       setDetailData(articleData);
       setSelectedArticleId(id);
       setArticleImages(articleImagesData || []);
@@ -827,7 +833,8 @@ export default function FormVideo() {
       lang: "id",
       contextType: "text",
       urlContext: null,
-      context: editorContent, // Ambil isi editor original
+      context: getValues("descriptionOri"),
+      // context: editorContent,
       createdBy: roleId,
       sentiment: "Humorous",
       clientId: "7QTW8cMojyayt6qnhqTOeJaBI70W4EaQ",
@@ -1193,7 +1200,109 @@ export default function FormVideo() {
                         Select Original Description
                       </Label>
                     </div>
+
                     <div className="py-3 space-y-2">
+                      <div className="flex justify-between items-center">
+                        <Label>
+                          {t("description", { defaultValue: "Description" })}
+                        </Label>
+
+                        {roleId === "14" && (
+                          <button
+                            type="button"
+                            onClick={async () => {
+                              try {
+                                loading();
+                                setIsLoadingTranslate(true);
+                                const res = await translateText({
+                                  text: getValues("descriptionOri"),
+                                  sourceLang: "ID",
+                                  targetLang: "EN",
+                                });
+
+                                if (!res.error) {
+                                  const resultText =
+                                    res?.data?.data?.translations?.[0]?.text ||
+                                    "";
+
+                                  setTranslatedContent(resultText);
+                                }
+                              } catch (err) {
+                                close();
+                                console.error("Translate gagal:", err);
+                              } finally {
+                                close();
+                                setIsLoadingTranslate(false);
+                              }
+                            }}
+                            className="px-3 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600"
+                          >
+                            {isLoadingTranslate
+                              ? "Translating..."
+                              : "Translate to English"}
+                          </button>
+                        )}
+                      </div>
+
+                      {/* Pilihan bahasa untuk posting */}
+                      <div className="flex items-center gap-4 mb-2">
+                        <label className="flex items-center gap-2">
+                          <input
+                            type="radio"
+                            value="id"
+                            checked={selectedLang === "id"}
+                            onChange={() => setSelectedLang("id")}
+                          />
+                          <span>Gunakan Bahasa Indonesia</span>
+                        </label>
+                      </div>
+
+                      {/* Editor Bahasa Indonesia */}
+                      <Controller
+                        control={control}
+                        name="descriptionOri"
+                        render={({ field: { onChange, value } }) => (
+                          <CustomEditor
+                            onChange={onChange}
+                            initialData={value}
+                          />
+                        )}
+                      />
+
+                      {/* Editor Bahasa Inggris */}
+                      {translatedContent && (
+                        <div className="mt-4">
+                          <div className="flex flex-col">
+                            <Label className="text-[15px]">
+                              English Version
+                            </Label>{" "}
+                            <label className="flex items-center gap-2">
+                              <input
+                                type="radio"
+                                value="en"
+                                checked={selectedLang === "en"}
+                                onChange={() => setSelectedLang("en")}
+                                disabled={!translatedContent} // kalau belum translate, disable
+                              />
+                              <span>Gunakan Bahasa Inggris</span>
+                            </label>
+                          </div>
+
+                          <CustomEditor
+                            onChange={(val: any) => setTranslatedContent(val)}
+                            initialData={translatedContent}
+                          />
+                        </div>
+                      )}
+
+                      {errors.description?.message && (
+                        <p className="text-red-400 text-sm">
+                          {errors.description.message}
+                        </p>
+                      )}
+                    </div>
+
+                    {/* <div className="py-3 space-y-2">
                       <Label>
                         {t("description", { defaultValue: "Description" })}
                       </Label>
@@ -1215,7 +1324,7 @@ export default function FormVideo() {
                           {errors.description.message}
                         </p>
                       )}
-                    </div>
+                    </div> */}
 
                     <p className="text-sm font-semibold">Content Rewrite</p>
                     <div className="my-2">
diff --git a/components/landing-page/filter-all/audio-filter-card.tsx b/components/landing-page/filter-all/audio-filter-card.tsx
index 10711b42..2737b197 100644
--- a/components/landing-page/filter-all/audio-filter-card.tsx
+++ b/components/landing-page/filter-all/audio-filter-card.tsx
@@ -54,7 +54,7 @@ export default function FilterAudioComponent(props: {
     ? `/polda/${poldaName}`
     : satkerName
     ? `/satker/${satkerName}`
-    : "/";
+    : "";
 
   useEffect(() => {
     if (searchType === "regional") {
@@ -242,10 +242,11 @@ export default function FilterAudioComponent(props: {
         <CarouselContent>
           {newContent?.map((audio: any) => (
             <CarouselItem key={audio?.id} className="md:basis-1/2 lg:basis-1/3">
-              <div
-                onClick={() =>
-                  router.push(prefixPath + `/audio/detail/${audio?.slug}`)
-                }
+              <Link
+                href={prefixPath + `/audio/detail/${audio?.slug}`}
+                // onClick={() =>
+                //   router.push(prefixPath + `/audio/detail/${audio?.slug}`)
+                // }
                 className="cursor-pointer bg-white dark:bg-black dark:border dark:border-gray-500 rounded-xl shadow-md hover:shadow-lg transition-shadow duration-300 overflow-hidden"
               >
                 {/* Icon Background */}
@@ -273,7 +274,7 @@ export default function FilterAudioComponent(props: {
                     {audio?.title}
                   </p>
                 </div>
-              </div>
+              </Link>
             </CarouselItem>
           ))}
         </CarouselContent>
diff --git a/components/landing-page/filter-all/document-filter-card.tsx b/components/landing-page/filter-all/document-filter-card.tsx
index 82b74550..f15c8c5a 100644
--- a/components/landing-page/filter-all/document-filter-card.tsx
+++ b/components/landing-page/filter-all/document-filter-card.tsx
@@ -55,7 +55,7 @@ export default function FilterDocumentComponent(props: {
     ? `/polda/${poldaName}`
     : satkerName
     ? `/satker/${satkerName}`
-    : "/";
+    : "";
 
   useEffect(() => {
     if (searchType === "regional") {
@@ -84,7 +84,7 @@ export default function FilterDocumentComponent(props: {
       categoryFilter?.length > 0
         ? categoryFilter?.sort().join(",")
         : categorie || "";
-        
+
     const response = await listDataRegional(
       "3",
       search,
@@ -213,10 +213,11 @@ export default function FilterDocumentComponent(props: {
         <CarouselContent>
           {newContent?.map((text: any) => (
             <CarouselItem key={text?.id} className="md:basis-1/2 lg:basis-1/3">
-              <div
-                onClick={() =>
-                  router.push(prefixPath + `/document/detail/${text?.slug}`)
-                }
+              <Link
+                href={prefixPath + `/document/detail/${text?.slug}`}
+                // onClick={() =>
+                //   router.push(prefixPath + `/document/detail/${text?.slug}`)
+                // }
                 className="cursor-pointer rounded-lg shadow-md overflow-hidden bg-white dark:bg-black dark:border dark:border-gray-500"
               >
                 {/* Ikon di tengah dengan latar kuning */}
@@ -246,7 +247,7 @@ export default function FilterDocumentComponent(props: {
                     {text?.title}
                   </div>
                 </div>
-              </div>
+              </Link>
             </CarouselItem>
           ))}
         </CarouselContent>
diff --git a/components/landing-page/filter-all/image-filter-card.tsx b/components/landing-page/filter-all/image-filter-card.tsx
index 248b06d8..edc07601 100644
--- a/components/landing-page/filter-all/image-filter-card.tsx
+++ b/components/landing-page/filter-all/image-filter-card.tsx
@@ -157,11 +157,17 @@ export default function FilterImageComponent(props: {
   }${endDateString ? `&endDate=${endDateString}` : ""}`;
   const href = `${basePath}/image/${fullQuery}`;
 
+  // let prefixPath = poldaName
+  //   ? `/polda/${poldaName}`
+  //   : satkerName
+  //   ? `/satker/${satkerName}`
+  //   : "";
+
   let prefixPath = poldaName
-    ? `/polda/${poldaName}`
+    ? `/polda/${poldaName}/image/detail`
     : satkerName
-    ? `/satker/${satkerName}`
-    : "/";
+    ? `/satker/${satkerName}/image/detail`
+    : `/image/detail`;
 
   return newContent?.length > 0 ? (
     <div className="flex flex-col gap-3 w-full">
@@ -200,7 +206,7 @@ export default function FilterImageComponent(props: {
           {newContent?.map((image: any) => (
             <CarouselItem key={image?.id} className="md:basis-1/2 lg:basis-1/3">
               <Link
-                href={prefixPath + `/image/detail/${image?.slug}`}
+                href={`${prefixPath}/${image?.slug}`}
                 // onClick={() =>
                 //   router.push(prefixPath + `/image/detail/${image?.slug}`)
                 // }
@@ -212,7 +218,7 @@ export default function FilterImageComponent(props: {
                   // whileHover={{ scale: 0.95 }}
                   // transition={{ duration: 0.3 }}
                 >
-                  {image?.thumbnailLink &&
+                  {image?.thumbnailLink && (
                     <Image
                       priority={true}
                       // placeholder={`data:image/svg+xml;base64,${toBase64(
@@ -224,7 +230,7 @@ export default function FilterImageComponent(props: {
                       src={image?.thumbnailLink}
                       className="w-full h-full object-cover"
                     />
-                  }
+                  )}
                 </div>
 
                 {/* Badge category */}
diff --git a/components/landing-page/filter-all/indeks-filter-card.tsx b/components/landing-page/filter-all/indeks-filter-card.tsx
index c32f159d..febcc9fe 100644
--- a/components/landing-page/filter-all/indeks-filter-card.tsx
+++ b/components/landing-page/filter-all/indeks-filter-card.tsx
@@ -50,7 +50,7 @@ export default function IndeksCarouselComponent(props: {
     ? `/polda/${poldaName}`
     : satkerName
     ? `/satker/${satkerName}`
-    : "/";
+    : "";
 
   // useEffect(() => {
   //   initFetch();
@@ -166,8 +166,8 @@ export default function IndeksCarouselComponent(props: {
         <CarouselContent>
           {newContent.map((image: any) => (
             <CarouselItem key={image?.id} className="md:basis-1/2 lg:basis-1/3">
-              <div
-                onClick={() => router.push(`/indeks/detail/${image?.slug}`)}
+              <Link href={`/indeks/detail/${image?.slug}`}
+                // onClick={() => router.push(`/indeks/detail/${image?.slug}`)}
                 className="cursor-pointer relative group overflow-hidden bg-white dark:bg-black dark:border dark:border-gray-500 rounded-xl shadow-md hover:shadow-lg transition-shadow duration-300"
               >
                 <div className="w-full h-48 lg:h-60">
@@ -193,7 +193,7 @@ export default function IndeksCarouselComponent(props: {
                     </p>
                   </div>
                 </div>
-              </div>
+              </Link>
             </CarouselItem>
           ))}
         </CarouselContent>
diff --git a/components/landing-page/filter-all/video-filter-card.tsx b/components/landing-page/filter-all/video-filter-card.tsx
index 100ff296..0c748eb6 100644
--- a/components/landing-page/filter-all/video-filter-card.tsx
+++ b/components/landing-page/filter-all/video-filter-card.tsx
@@ -55,7 +55,7 @@ export default function FilterVideoComponent(props: {
     ? `/polda/${poldaName}`
     : satkerName
     ? `/satker/${satkerName}`
-    : "/";
+    : "";
 
   useEffect(() => {
     if (searchType === "regional") {
@@ -160,10 +160,11 @@ export default function FilterVideoComponent(props: {
         <CarouselContent>
           {newContent?.map((video: any) => (
             <CarouselItem key={video?.id} className="md:basis-1/2 lg:basis-1/3">
-              <div
-                onClick={() =>
-                  router.push(prefixPath + `/video/detail/${video?.slug}`)
-                }
+              <Link
+                href={prefixPath + `/video/detail/${video?.slug}`}
+                // onClick={() =>
+                //   router.push(prefixPath + `/video/detail/${video?.slug}`)
+                // }
                 className="cursor-pointer relative group overflow-hidden bg-white dark:bg-black dark:border dark:border-gray-500 rounded-xl shadow-md hover:shadow-lg transition-shadow duration-300"
               >
                 {/* Image with motion effect */}
@@ -172,7 +173,7 @@ export default function FilterVideoComponent(props: {
                   // whileHover={{ scale: 0.95 }}
                   // transition={{ duration: 0.3 }}
                 >
-                  {video?.thumbnailLink && 
+                  {video?.thumbnailLink && (
                     <Image
                       priority={true}
                       // placeholder={`data:image/svg+xml;base64,${toBase64(
@@ -184,7 +185,7 @@ export default function FilterVideoComponent(props: {
                       src={video?.thumbnailLink}
                       className="w-full h-full object-cover"
                     />
-                  }
+                  )}
                 </div>
 
                 {/* Badge category */}
@@ -226,7 +227,7 @@ export default function FilterVideoComponent(props: {
   </p>
   */}
                 </div>
-              </div>
+              </Link>
             </CarouselItem>
           ))}
         </CarouselContent>
diff --git a/service/content/content.ts b/service/content/content.ts
index 14fddef0..7aad0296 100644
--- a/service/content/content.ts
+++ b/service/content/content.ts
@@ -157,7 +157,7 @@ export async function getTagsBySubCategoryId(subCategory: any) {
 }
 
 export async function listEnableCategory(type: any) {
-  const url = `media/categories/list?enablePage=0&sort=desc&sortBy=id&type=${type}`;
+  const url = `media/categories/list?enablePage=0&sort=desc&sortBy=id&type=${type}&isInt=true`;
   return httpGetInterceptor(url);
 }