diff --git a/app/[locale]/(public)/audio/detail/[slug]/page.tsx b/app/[locale]/(public)/audio/detail/[slug]/page.tsx
index 9e2a89f8..826cc7dc 100644
--- a/app/[locale]/(public)/audio/detail/[slug]/page.tsx
+++ b/app/[locale]/(public)/audio/detail/[slug]/page.tsx
@@ -20,6 +20,7 @@ import Swal from "sweetalert2";
 import { checkMaliciousText, getPublicLocaleTimestamp } from "@/utils/globals";
 import parse from "html-react-parser";
 import $ from "jquery";
+import { useTranslations } from "next-intl";
 
 const formWaveSurferOptions = (ref: any) => ({
   container: ref,
@@ -66,6 +67,8 @@ const DetailAudio = () => {
   const [listSuggestion, setListSuggestion] = useState<any>();
   const MySwal = withReactContent(Swal);
   const [visibleInput, setVisibleInput] = useState<string | null>(null);
+  const t = useTranslations("LandingPage");
+
   let typeString = "audio";
 
   useEffect(() => {
@@ -250,11 +253,8 @@ const DetailAudio = () => {
   };
 
   const sizes = [
-    { label: "XL", value: "3198 x 1798 px" },
-    { label: "L", value: "2399 x 1349 px" },
-    { label: "M", value: "1599 x 899 px" },
-    { label: "S", value: "1066 x 599 px" },
-    { label: "XS", value: "800 x 450 px" },
+    { label: "MP3", value: "... MB" },
+    { label: "WAV", value: "... MB" },
   ];
 
   const handleShare = (type: any, url: any) => {
@@ -592,16 +592,20 @@ const DetailAudio = () => {
             <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">
-                  oleh&nbsp;<span className="font-semibold text-black">{detailDataAudio?.uploadedBy?.userLevel?.name}</span>
+                  {t("by")}&nbsp;<span className="font-semibold text-black">{detailDataAudio?.uploadedBy?.userLevel?.name}</span>
+                </p>
+                <p className="text-xs lg:text-sm">
+                  &nbsp;|&nbsp;{t("updatedOn")} {detailDataAudio?.updatedAt} WIB &nbsp;|&nbsp;
                 </p>
-                <p className="text-xs lg:text-sm">&nbsp;|&nbsp;Diupdate pada {detailDataAudio?.updatedAt} WIB &nbsp;|&nbsp;</p>
                 <p className="text-xs lg:text-sm flex justify-center items-center">
                   <Icon icon="formkit:eye" width="15" height="15" />
                   &nbsp; {detailDataAudio?.clickCount} &nbsp;
                 </p>
               </div>
               <div className="mt-3">
-                <p className="flex text-end text-xs lg:text-sm font-semibold">Kreator: {detailDataAudio?.creatorName}</p>
+                <p className="flex text-end text-xs lg:text-sm font-semibold">
+                  {t("creator")} {detailDataAudio?.creatorName}
+                </p>
               </div>
             </div>
             {/* Keterangan */}
@@ -616,12 +620,12 @@ const DetailAudio = () => {
             {isSaved ? (
               <a onClick={() => handleDeleteWishlist()} className="flex flex-col mb-3 items-center justify-center cursor-pointer">
                 <Icon icon="material-symbols:bookmark" width={40} />
-                <p className="text-base lg:text-lg">Hapus</p>
+                <p className="text-base lg:text-lg">{t("delete")}</p>
               </a>
             ) : (
               <a onClick={() => doBookmark()} className="flex flex-col mb-3 items-center justify-center cursor-pointer">
                 <Icon icon="material-symbols:bookmark-outline" width={40} />
-                <p className="text-base lg:text-lg">Simpan</p>
+                <p className="text-base lg:text-lg">{t("save")}</p>
               </a>
             )}
 
@@ -643,7 +647,7 @@ const DetailAudio = () => {
             <div className="border-t border-black my-4"></div>
 
             {/* Opsi Ukuran Foto */}
-            <h4 className="flex text-lg justify-center items-center font-semibold my-3">Opsi Ukuran Audio</h4>
+            <h4 className="flex text-lg justify-center items-center font-semibold my-3">{t("audioSize")}</h4>
 
             <div className="border-t border-black my-4"></div>
 
@@ -665,7 +669,7 @@ const DetailAudio = () => {
             <div className="mt-4">
               <label className="flex items-center space-x-2 text-sm">
                 <input type="checkbox" className="text-red-600 focus:ring-red-600" onChange={() => setIsDownloadAll(!isDownloadAll)} />
-                <span>Download Semua File?</span>
+                <span>{t("downloadAll")}</span>
               </label>
             </div>
 
@@ -674,12 +678,12 @@ const DetailAudio = () => {
               <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
                 <path fill="white" d="m12 16l-5-5l1.4-1.45l2.6 2.6V4h2v8.15l2.6-2.6L17 11zm-6 4q-.825 0-1.412-.587T4 18v-3h2v3h12v-3h2v3q0 .825-.587 1.413T18 20z" />
               </svg>
-              Download
+              {t("download")}
             </button>
 
             {/* Tombol Bagikan */}
             <div className="flex flex-row py-3">
-              <p className="text-base font-semibold">Bagikan</p>
+              <p className="text-base font-semibold">{t("share")}</p>
               <a className="ml-8 cursor-pointer" onClick={() => handleShare("fb", `https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fmediahub.polri.go.id%2F${typeString}%2Fdetail%2F${content?.id}&quote=${content?.title}`)}>
                 <Icon icon="brandico:facebook" height="20" className="px-auto text-red-600 text-center" />
               </a>
@@ -697,13 +701,13 @@ const DetailAudio = () => {
                 </PopoverTrigger>
                 <PopoverContent>
                   <div className="flex flex-col">
-                    <h1 className="mb-2">Share Ke Email</h1>
+                    <h1 className="mb-2">{t("shareTo")}</h1>
                     <div className="flex flex-col mb-2">
-                      <p className="text-base font-semibold mb-1">Email Tujuan :</p>
-                      <Input value={emailShareInput} onChange={(event) => setEmailShareInput(event.target.value)} onKeyPress={handleEmailList} type="email" placeholder="Tekan Enter untuk input Email" />
+                      <p className="text-base font-semibold mb-1">{t("destinationEmail")}</p>
+                      <Input value={emailShareInput} onChange={(event) => setEmailShareInput(event.target.value)} onKeyPress={handleEmailList} type="email" placeholder={t("pressEnter")} />
                     </div>
                     <Button className="bg-blue-500 text-white p-2 w-fit rounded-lg" onClick={() => shareToEmail()}>
-                      Kirim
+                      {t("send")}
                     </Button>
                   </div>
                 </PopoverContent>
@@ -717,10 +721,10 @@ const DetailAudio = () => {
         {/* Comment */}
         <div className="flex flex-col my-16 p-4 lg:p-10 bg-[#f7f7f7]">
           <div className="gap-5 flex flex-col px-4 lg:px-14">
-            <p className="flex items-start text-lg">Berikan Komentar</p>
+            <p className="flex items-start text-lg">{t("comment")}</p>
             <Textarea placeholder="Type your comments here." 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">
-              Kirim
+            {t("send")}
             </button>
           </div>
 
@@ -749,11 +753,11 @@ const DetailAudio = () => {
                         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">Balas</small>
+                        <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">Hapus</small>
+                          <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>
                       ) : (
                         ""
@@ -763,13 +767,13 @@ const DetailAudio = () => {
                 </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="Masukkan balasan anda" />
+                    <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">Kirim</small>
+                        <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">Batal</small>
+                        <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>
@@ -798,7 +802,7 @@ const DetailAudio = () => {
                                 }
                                 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">Balas</small>
+                                <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={
@@ -810,7 +814,7 @@ const DetailAudio = () => {
                                 }
                                 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">Hapus</small>
+                                <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>
@@ -818,13 +822,13 @@ const DetailAudio = () => {
 
                         {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="Masukkan balasan anda" />
+                            <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">Kirim</small>
+                                <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">Batal</small>
+                                <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>
@@ -853,7 +857,7 @@ const DetailAudio = () => {
                                         }
                                         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">Balas</small>
+                                        <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={
@@ -865,7 +869,7 @@ const DetailAudio = () => {
                                         }
                                         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">Hapus</small>
+                                        <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>
@@ -875,10 +879,10 @@ const DetailAudio = () => {
                                     <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">Kirim</small>
+                                        <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">Batal</small>
+                                        <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>
diff --git a/app/[locale]/(public)/document/detail/[slug]/page.tsx b/app/[locale]/(public)/document/detail/[slug]/page.tsx
index 07f35072..4293008e 100644
--- a/app/[locale]/(public)/document/detail/[slug]/page.tsx
+++ b/app/[locale]/(public)/document/detail/[slug]/page.tsx
@@ -18,6 +18,7 @@ import { checkMaliciousText, getPublicLocaleTimestamp } from "@/utils/globals";
 import withReactContent from "sweetalert2-react-content";
 import Swal from "sweetalert2";
 import parse from "html-react-parser";
+import { useTranslations } from "next-intl";
 
 const DetailDocument = () => {
   const [selectedSize, setSelectedSize] = useState<string>("L");
@@ -50,6 +51,7 @@ const DetailDocument = () => {
   const [listSuggestion, setListSuggestion] = useState<any>();
   const MySwal = withReactContent(Swal);
   const [visibleInput, setVisibleInput] = useState<string | null>(null);
+  const t = useTranslations("LandingPage");
 
   let typeString = "document";
 
@@ -139,11 +141,9 @@ const DetailDocument = () => {
   };
 
   const sizes = [
-    { label: "XL", value: "3198 x 1798 px" },
-    { label: "L", value: "2399 x 1349 px" },
-    { label: "M", value: "1599 x 899 px" },
-    { label: "S", value: "1066 x 599 px" },
-    { label: "XS", value: "800 x 450 px" },
+    { label: "DOC", value: "...KB" },
+    { label: "PPT", value: "...KB" },
+    { label: "PDF", value: "...KB" },
   ];
 
   async function sendActivityLog(activityTypeId: number) {
@@ -433,14 +433,22 @@ const DetailDocument = () => {
               <p className="mt-3">Kreator: {detailDataDocument?.creatorName}</p> */}
               <div className="flex flex-col lg:flex-row items-center mt-3 lg:justify-between">
                 <p className="text-xs lg:text-sm">
-                  oleh&nbsp;<span className="font-semibold text-black">{detailDataDocument?.uploadedBy?.userLevel?.name}</span>
+                  {t("by")}&nbsp;<span className="font-semibold text-black">{detailDataDocument?.uploadedBy?.userLevel?.name}</span>
+                </p>
+                <p className="text-xs lg:text-sm">
+                  &nbsp;|&nbsp; {t("updatedOn")} {detailDataDocument?.updatedAt} WIB &nbsp;|&nbsp;
                 </p>
-                <p className="text-xs lg:text-sm">&nbsp;|&nbsp;Diupdate pada {detailDataDocument?.updatedAt} WIB &nbsp;|&nbsp;</p>
                 <p className="text-xs lg:text-sm flex justify-center items-center">
                   <Icon icon="formkit:eye" width="15" height="15" />
                   &nbsp; {detailDataDocument?.clickCount} &nbsp;
                 </p>
               </div>
+              <div className="mt-3">
+                <p className="flex text-end text-xs lg:text-sm font-semibold">
+                  {t("creator")}
+                  {detailDataDocument?.creatorName}
+                </p>
+              </div>
             </div>
 
             {/* Keterangan */}
@@ -455,12 +463,12 @@ const DetailDocument = () => {
             {isSaved ? (
               <a onClick={() => handleDeleteWishlist()} className="flex flex-col mb-3 items-center justify-center cursor-pointer">
                 <Icon icon="material-symbols:bookmark" width={40} />
-                <p className="text-base lg:text-lg">Hapus</p>
+                <p className="text-base lg:text-lg">{t("delete")}</p>
               </a>
             ) : (
               <a onClick={() => doBookmark()} className="flex flex-col mb-3 items-center justify-center cursor-pointer">
                 <Icon icon="material-symbols:bookmark-outline" width={40} />
-                <p className="text-base lg:text-lg">Simpan</p>
+                <p className="text-base lg:text-lg">{t("save")}</p>
               </a>
             )}
 
@@ -482,7 +490,7 @@ const DetailDocument = () => {
             <div className="border-t border-black my-4"></div>
 
             {/* Opsi Ukuran Foto */}
-            <h4 className="flex text-lg justify-center items-center font-semibold my-3">Opsi Ukuran Foto</h4>
+            <h4 className="flex text-lg justify-center items-center font-semibold my-3">{t("docSize")}</h4>
             <div className="border-t border-black my-4"></div>
             <div className="space-y-2">
               {sizes.map((size: any) => (
@@ -502,7 +510,7 @@ const DetailDocument = () => {
             <div className="mt-4">
               <label className="flex items-center space-x-2 text-sm">
                 <input type="checkbox" className="text-red-600 focus:ring-red-600" onChange={() => setIsDownloadAll(!isDownloadAll)} />
-                <span>Download Semua File?</span>
+                <span>{t("downloadAll")}</span>
               </label>
             </div>
 
@@ -511,12 +519,12 @@ const DetailDocument = () => {
               <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
                 <path fill="white" d="m12 16l-5-5l1.4-1.45l2.6 2.6V4h2v8.15l2.6-2.6L17 11zm-6 4q-.825 0-1.412-.587T4 18v-3h2v3h12v-3h2v3q0 .825-.587 1.413T18 20z" />
               </svg>
-              Download
+              {t("download")}
             </button>
 
             {/* Tombol Bagikan */}
             <div className="flex flex-row py-3">
-              <p className="text-base font-semibold">Bagikan</p>
+              <p className="text-base font-semibold">{t("share")}</p>
               <a className="ml-8 cursor-pointer" onClick={() => handleShare("fb", `https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fmediahub.polri.go.id%2F${typeString}%2Fdetail%2F${content?.id}&quote=${content?.title}`)}>
                 <Icon icon="brandico:facebook" height="20" className="px-auto text-red-600 text-center" />
               </a>
@@ -534,13 +542,13 @@ const DetailDocument = () => {
                 </PopoverTrigger>
                 <PopoverContent>
                   <div className="flex flex-col">
-                    <h1 className="mb-2">Share Ke Email</h1>
+                    <h1 className="mb-2">{t("shareTo")}</h1>
                     <div className="flex flex-col mb-2">
-                      <p className="text-base font-semibold mb-1">Email Tujuan :</p>
-                      <Input value={emailShareInput} onChange={(event) => setEmailShareInput(event.target.value)} onKeyPress={handleEmailList} type="email" placeholder="Tekan Enter untuk input Email" />
+                      <p className="text-base font-semibold mb-1">{t("destinationEmail")}</p>
+                      <Input value={emailShareInput} onChange={(event) => setEmailShareInput(event.target.value)} onKeyPress={handleEmailList} type="email" placeholder={t("pressEnter")} />
                     </div>
                     <Button className="bg-blue-500 text-white p-2 w-fit rounded-lg" onClick={() => shareToEmail()}>
-                      Kirim
+                      {t("send")}
                     </Button>
                   </div>
                 </PopoverContent>
@@ -554,10 +562,10 @@ const DetailDocument = () => {
         {/* Comment */}
         <div className="flex flex-col my-16 p-4 lg:p-10 bg-[#f7f7f7]">
           <div className="gap-5 flex flex-col px-4 lg:px-14">
-            <p className="flex items-start text-lg">Berikan Komentar</p>
+            <p className="flex items-start text-lg">{t("comment")}</p>
             <Textarea placeholder="Type your comments here." 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">
-              Kirim
+              {t("send")}
             </button>
           </div>
 
@@ -586,11 +594,11 @@ const DetailDocument = () => {
                         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">Balas</small>
+                        <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">Hapus</small>
+                          <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>
                       ) : (
                         ""
@@ -600,13 +608,13 @@ const DetailDocument = () => {
                 </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="Masukkan balasan anda" />
+                    <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">Kirim</small>
+                        <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">Batal</small>
+                        <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>
@@ -635,7 +643,7 @@ const DetailDocument = () => {
                                 }
                                 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">Balas</small>
+                                <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={
@@ -647,7 +655,7 @@ const DetailDocument = () => {
                                 }
                                 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">Hapus</small>
+                                <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>
@@ -655,13 +663,13 @@ const DetailDocument = () => {
 
                         {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="Masukkan balasan anda" />
+                            <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">Kirim</small>
+                                <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">Batal</small>
+                                <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>
@@ -690,7 +698,7 @@ const DetailDocument = () => {
                                         }
                                         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">Balas</small>
+                                        <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={
@@ -702,20 +710,20 @@ const DetailDocument = () => {
                                         }
                                         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">Hapus</small>
+                                        <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" />
+                                    <Textarea name="" id={`input-comment-${child2.id}`} className="my-2" placeholder={t("enterReply")} />
                                     <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">Kirim</small>
+                                        <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">Batal</small>
+                                        <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>
diff --git a/app/[locale]/(public)/image/detail/[slug]/page.tsx b/app/[locale]/(public)/image/detail/[slug]/page.tsx
index afbc9f97..9a119d3e 100644
--- a/app/[locale]/(public)/image/detail/[slug]/page.tsx
+++ b/app/[locale]/(public)/image/detail/[slug]/page.tsx
@@ -473,7 +473,7 @@ const DetailInfo = () => {
                   {t("by")}&nbsp;<span className="font-semibold text-black">{detailDataImage?.uploadedBy?.userLevel?.name}</span>
                 </p>
                 <p className="text-xs lg:text-sm">
-                  &nbsp;|&nbsp;{t("updateOn")}
+                  &nbsp;|&nbsp;{t("updatedOn")}
                   {detailDataImage?.updatedAt} WIB &nbsp;|&nbsp;
                 </p>
                 <p className="text-xs lg:text-sm flex justify-center items-center">
diff --git a/app/[locale]/(public)/indeks/detail/[slug]/page.tsx b/app/[locale]/(public)/indeks/detail/[slug]/page.tsx
index f9a96517..af0d0358 100644
--- a/app/[locale]/(public)/indeks/detail/[slug]/page.tsx
+++ b/app/[locale]/(public)/indeks/detail/[slug]/page.tsx
@@ -10,6 +10,7 @@ import { Icon } from "@iconify/react/dist/iconify.js";
 import { getCookiesDecrypt } from "@/lib/utils";
 import { close, loading } from "@/config/swal";
 import { Input } from "@/components/ui/input";
+import { useTranslations } from "next-intl";
 
 const IndeksDetail = () => {
   const searchParams = useSearchParams();
@@ -24,6 +25,7 @@ const IndeksDetail = () => {
   const userRoleId = getCookiesDecrypt("urie");
   const router: any = useRouter();
   const [listComments, setListComments] = useState([]);
+  const t = useTranslations("LandingPage");
 
   useEffect(() => {
     initFetch();
@@ -154,7 +156,7 @@ const IndeksDetail = () => {
       <div className="p-4 lg:px-60 lg:p-12">
         {/* Judul */}
         <div className="flex flex-col mb-5">
-          <h1 className="text-base lg:text-lg mb-2">Indeks / Detail</h1>
+          <h1 className="text-base lg:text-lg mb-2">Index / Detail</h1>
           <h1 className="flex flex-row font-bold text-center text-lg lg:text-2xl">{indeksData?.title}</h1>
         </div>
         {/* Gambar Utama */}
@@ -164,8 +166,8 @@ const IndeksDetail = () => {
         {/* Footer Informasi */}
         <div className="text-gray-500 flex border-t mt-4">
           <div className="flex mt-2">
-            <p className="text-sm lg:text-base mb-2">
-              oleh&nbsp;<span className="font-semibold text-black">{indeksData?.uploaderName}</span>&nbsp; | &nbsp;Diupdate pada {indeksData?.createdAt} WIB &nbsp;
+            <p className="text-xs lg:text-sm mb-2">
+              {t("by")}&nbsp;<span className="font-semibold text-black">{indeksData?.uploaderName}</span>&nbsp; | &nbsp;{t("updatedOn")} {indeksData?.createdAt} WIB &nbsp;
             </p>
           </div>
         </div>
@@ -180,10 +182,10 @@ const IndeksDetail = () => {
       <div className="w-full">
         <div className="flex flex-col py-5 p-0 lg:p-10 bg-[#f7f7f7]">
           <div className="gap-5 flex flex-col px-4 lg:px-16">
-            <p className="flex items-start text-bases lg:text-lg">Berikan Komentar</p>
+            <p className="flex items-start text-bases lg:text-lg">{t("comment")}</p>
             <Textarea placeholder="Type your comments here." className="flex w-full" onChange={getInputValue} value={message} />
             <button className="flex items-start bg-[#bb3523] text-white rounded-lg text-sm lg:text-base w-fit px-3 lg:px-4 py-1" onClick={() => postData()}>
-              Kirim
+              {t("send")}
             </button>
           </div>
 
@@ -202,7 +204,7 @@ const IndeksDetail = () => {
                     <p className="text-slate-500 text-sm lg:text-base mb-4">{data.message}</p>
                     <div className="gap-3">
                       <a href="javascript:void(0)" className="text-xs lg:text-sm mr-2 bg-blue-500 text-white py-1 px-2 hover:bg-blue-300 hover:text-black rounded-md" onClick={() => showInput(`comment-id-${data.id}`)}>
-                        Balas
+                        {t("reply")}
                       </a>
                       <a
                         href="javascript:void(0)"
@@ -216,15 +218,15 @@ const IndeksDetail = () => {
                         className="text-xs lg:text-sm bg-red-500 text-white py-1 px-2 hover:bg-red-300 hover:text-black rounded-md"
                         onClick={() => deleteData(data.id)}
                       >
-                        Hapus
+                        {t("delete")}
                       </a>
                     </div>
                   </div>
                 </div>
                 <div className="flex flex-row px-4 pl-[55px] lg:px-14 lg:pl-[135px] mt-2" id={`comment-id-${data.id}`}>
-                  <Input type="text" id={`input-comment-${data.id}`} className="p-4 focus:outline-none focus:border-sky-500" placeholder="Masukkan balasan anda" />
+                  <Input type="text" id={`input-comment-${data.id}`} className="p-4 focus:outline-none focus:border-sky-500" placeholder={t("enterReply")} />
                   <a href="javascript:void(0)" className="flex py-1 px-2 rounded-md items-center ml-2 bg-[#f7b357] text-white text-sm lg:text-base" onClick={() => postDataChild(data.id)}>
-                    Send
+                    {t("send")}
                   </a>
                 </div>
                 {data.children.length > 0
@@ -242,7 +244,7 @@ const IndeksDetail = () => {
                             <p className="text-slate-500 text-sm mb-4">{child1.message}</p>
                             <div className="gap-3">
                               <a href="javascript:void(0)" className="mr-2 text-xs lg:text-sm bg-blue-500 text-white py-1 px-2 hover:bg-blue-300 hover:text-black rounded-md" onClick={() => showInput(`comment-id-${child1.id}`)}>
-                                Balas
+                                {t("reply")}
                               </a>
                               <a
                                 href="javascript:void(0)"
@@ -256,15 +258,15 @@ const IndeksDetail = () => {
                                 }
                                 onClick={() => deleteData(child1.id)}
                               >
-                                Hapus
+                                {t("delete")}
                               </a>
                             </div>
                           </div>
                         </div>
                         <div className="flex flex-row justify-center px-4 pl-[87px] lg:px-14 lg:pl-[205px] mt-2" id={`comment-id-${child1.id}`}>
-                          <Input type="text" id={`input-comment-${child1.id}`} className="p-4 focus:outline-none focus:border-sky-500" placeholder="Masukkan balasan anda" />
+                          <Input type="text" id={`input-comment-${child1.id}`} className="p-4 focus:outline-none focus:border-sky-500" placeholder={t("enterReply")} />
                           <a href="javascript:void(0)" className="flex text-sm lg:text-base py-1 px-2 rounded-md items-center ml-2 bg-[#f7b357] text-white" onClick={() => postDataChild(child1.id)}>
-                            Send
+                            {t("send")}
                           </a>
                         </div>
                         {child1.children.length > 0
@@ -282,7 +284,7 @@ const IndeksDetail = () => {
                                     <p className="text-slate-500 text-sm mb-4">{child2.message}</p>
                                     <div>
                                       <a href="javascript:void(0)" className="mr-2 text-xs lg:text-sm bg-blue-500 text-white py-1 px-2 hover:bg-blue-300 hover:text-black rounded-md" onClick={() => showInput("comment-id-" + child2.id)}>
-                                        Balas
+                                        {t("reply")}
                                       </a>
                                       <a
                                         href="javascript:void(0)"
@@ -296,15 +298,15 @@ const IndeksDetail = () => {
                                         }
                                         onClick={() => deleteData(child2.id)}
                                       >
-                                        Hapus
+                                        {t("delete")}
                                       </a>
                                     </div>
                                   </div>
                                 </div>
                                 <div className="flex flex-row px-4 pl-[120px] lg:px-14 lg:pl-[270px] mt-2" id={`comment-id-${child2.id}`}>
-                                  <Input type="text" id={`comment-id-${child2.id}`} className="p-4 focus:outline-none focus:border-sky-500" placeholder="Masukkan balasan anda" />
+                                  <Input type="text" id={`comment-id-${child2.id}`} className="p-4 focus:outline-none focus:border-sky-500" placeholder={t("enterReply")} />
                                   <a href="javascript:void(0)" className="flex text-sm lg:text-base py-1 px-2 rounded-md items-center ml-2 bg-[#f7b357] text-white" onClick={() => postDataChild(child1.id)}>
-                                    Send
+                                    {t("send")}
                                   </a>
                                 </div>
                               </div>
@@ -320,7 +322,7 @@ const IndeksDetail = () => {
 
         {/* Konten Serupa */}
         <div className="space-x-5 flex flex-col px-4 lg:px-16 py-16 gap-5">
-          <h1 className="font-bold text-base lg:text-xl px-4 lg:px-8">Post Terkait</h1>
+          <h1 className="font-bold text-base lg:text-xl px-4 lg:px-8"> {t("relatedPosts")}</h1>
           <Carousel>
             <CarouselContent className="w-full max-w-7xl">
               {indexData?.map((relate: any) => (
diff --git a/app/[locale]/(public)/video/detail/[slug]/page.tsx b/app/[locale]/(public)/video/detail/[slug]/page.tsx
index bc54bb23..f0f17197 100644
--- a/app/[locale]/(public)/video/detail/[slug]/page.tsx
+++ b/app/[locale]/(public)/video/detail/[slug]/page.tsx
@@ -440,7 +440,7 @@ const DetailVideo = () => {
                   {t("by")}&nbsp;<span className="font-semibold text-black">{detailDataVideo?.uploadedBy?.userLevel?.name}</span>
                 </p>
                 <p className="text-xs lg:text-sm">
-                  &nbsp;|&nbsp;{t("updateOn")}
+                  &nbsp;|&nbsp;{t("updatedOn")}
                   {detailDataVideo?.updatedAt} WIB &nbsp;|&nbsp;
                 </p>
                 <p className="text-xs lg:text-sm flex justify-center items-center">
@@ -536,7 +536,7 @@ const DetailVideo = () => {
 
             {/* Tombol Bagikan */}
             <div className="flex flex-row justify-center py-3">
-              <p className="text-base font-semibold">Bagikan</p>
+              <p className="text-base font-semibold">{t("share")}</p>
               <a className="ml-8 cursor-pointer" onClick={() => handleShare("fb", `https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fmediahub.polri.go.id%2F${typeString}%2Fdetail%2F${content?.id}&quote=${content?.title}`)}>
                 <Icon icon="brandico:facebook" height="20" className="px-auto text-red-600 text-center" />
               </a>
@@ -557,7 +557,7 @@ const DetailVideo = () => {
                     <h1 className="mb-2">{t("shareTo")}</h1>
                     <div className="flex flex-col mb-2">
                       <p className="text-base font-semibold mb-1">{t("destinationEmail")}</p>
-                      <Input value={emailShareInput} onChange={(event) => setEmailShareInput(event.target.value)} onKeyPress={handleEmailList} type="email" placeholder="Tekan Enter untuk input Email" />
+                      <Input value={emailShareInput} onChange={(event) => setEmailShareInput(event.target.value)} onKeyPress={handleEmailList} type="email" placeholder={t("pressEnter")} />
                     </div>
                     <Button className="bg-blue-500 text-white p-2 w-fit rounded-lg" onClick={() => shareToEmail()}>
                       {t("send")}
@@ -720,7 +720,7 @@ const DetailVideo = () => {
                                         }
                                         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("cancel")}</small>
+                                        <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>
diff --git a/messages/en.json b/messages/en.json
index 57ea1d12..3124deeb 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -366,7 +366,7 @@
     "previousSchedule": "Previous Schedule",
     "speaker": "Speaker :",
     "nextSchedule": "Next Schedule",
-    "by": "By",
+    "by": "Uploaded By",
     "updatedOn": "Update On",
     "creator": "Creator :",
     "delete": "Delete",
@@ -382,7 +382,10 @@
     "leaveComment": "Leave your comments here.",
     "reply": "Reply",
     "cancel": "Cancel",
-    "enterReply": "Enter Your Replay"
+    "enterReply": "Enter Your Replay",
+    "docSize": "Document Size Options",
+    "audioSize": "Audio Size Options",
+    "relatedPosts": "Related Posts"
   },
   "FilterPage": {
     "image": "Image",
diff --git a/messages/in.json b/messages/in.json
index e82fa2d9..74cb5032 100644
--- a/messages/in.json
+++ b/messages/in.json
@@ -366,7 +366,7 @@
     "previousSchedule": "Jadwal Sebelumnya",
     "speaker": "Pembicara :",
     "nextSchedule": "Jadwal Selanjutnya",
-    "by": "Oleh",
+    "by": "Diunggah Oleh",
     "updatedOn": "Diupdate pada",
     "creator": "Kreator :",
     "delete": "Hapus",
@@ -382,7 +382,10 @@
     "reply": "Balas",
     "cancel": "Batal",
     "videoSize": "Opsi Ukuran Audio Visual",
-    "enterReply": "Masukkan balasan Anda"
+    "enterReply": "Masukkan balasan Anda",
+    "docSize": "Opsi Ukuran Teks",
+    "audioSize": "Opsi Ukuran Audio",
+    "relatedPosts": "Post Terkait"
   },
   "FilterPage": {
     "image": "Foto",