diff --git a/app/[locale]/(public)/video/filter/page.tsx b/app/[locale]/(public)/video/filter/page.tsx
index 61d6edef..752885ca 100644
--- a/app/[locale]/(public)/video/filter/page.tsx
+++ b/app/[locale]/(public)/video/filter/page.tsx
@@ -702,7 +702,10 @@ const FilterPage = () => {
                               {/* <img src={video?.thumbnailLink} className="h-60 object-cover items-center justify-center cursor-pointer rounded-lg place-self-center" /> */}
                               <div className="img-container h-60 bg-[#e9e9e9] cursor-pointer rounded-lg">
                                 <ImageBlurry
-                                  src={video?.thumbnailLink}
+                                  src={
+                                    video?.smallThumbnailLink ||
+                                    video?.thumbnailLink
+                                  }
                                   alt={video?.title}
                                   style={{
                                     objectFit: "contain",
diff --git a/components/landing-page/content-category.tsx b/components/landing-page/content-category.tsx
index 2212cff2..690cda74 100644
--- a/components/landing-page/content-category.tsx
+++ b/components/landing-page/content-category.tsx
@@ -81,7 +81,7 @@ const ContentCategory = (props: { group?: string; type: string }) => {
                     alt="category"
                     width={2560}
                     height={1440}
-                    src={category?.thumbnailLink}
+                    src={category?.smallThumbnailLink}
                     className="w-full lg:h-[300px] h-40 object-cover group-hover:scale-110 transition-transform duration-300"
                   />
 
diff --git a/components/landing-page/hero-new.tsx b/components/landing-page/hero-new.tsx
index 64d4c7d8..0b3e6dcf 100644
--- a/components/landing-page/hero-new.tsx
+++ b/components/landing-page/hero-new.tsx
@@ -150,7 +150,7 @@ const HeroModal = ({
                   ✕
                 </button>
                 <Image
-                  src={list?.thumbnailLink}
+                  src={list?.smallThumbnailLink}
                   alt="gambar-utama"
                   width={1920}
                   height={1080}
@@ -364,7 +364,7 @@ const HeroNew = (props: { group?: string }) => {
                   <div className="relative h-[310px] lg:h-[700px]">
                     {/* Gambar */}
                     <Image
-                      src={list?.thumbnailLink}
+                      src={list?.smallThumbnailLink}
                       alt="gambar"
                       fill
                       className="object-cover w-full h-full"
diff --git a/components/landing-page/new-content.tsx b/components/landing-page/new-content.tsx
index c28d1170..8c7487e3 100644
--- a/components/landing-page/new-content.tsx
+++ b/components/landing-page/new-content.tsx
@@ -153,7 +153,7 @@ const NewContent = (props: { group: string; type: string }) => {
                           <div onClick={() => router.push(prefixPath + `/image/detail/${image?.slug}`)} className="cursor-pointer relative group overflow-hidden bg-white rounded-xl shadow-md hover:shadow-lg transition-shadow duration-300">
                             {/* Image with motion effect */}
                             <motion.div className="w-full h-48 lg:h-60" whileHover={{ scale: 0.95 }} transition={{ duration: 0.3 }}>
-                              <Image placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`} width={2560} height={1440} alt="image" src={image?.thumbnailLink} className="w-full h-full object-cover" />
+                              <Image placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`} width={2560} height={1440} alt="image" src={image?.smallThumbnailLink} className="w-full h-full object-cover" />
                             </motion.div>
 
                             {/* Badge category */}
@@ -258,7 +258,7 @@ const NewContent = (props: { group: string; type: string }) => {
                           <div onClick={() => router.push(prefixPath + `/video/detail/${video?.slug}`)} className="cursor-pointer relative group overflow-hidden bg-white rounded-xl shadow-md hover:shadow-lg transition-shadow duration-300">
                             {/* Image with motion effect */}
                             <motion.div className="w-full h-48 lg:h-60" whileHover={{ scale: 0.95 }} transition={{ duration: 0.3 }}>
-                              <Image placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`} alt="video" width={2560} height={1440} src={video?.thumbnailLink} className="w-full h-full object-cover" />
+                              <Image placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`} alt="video" width={2560} height={1440} src={video?.smallThumbnailLink} className="w-full h-full object-cover" />
                             </motion.div>
 
                             {/* Badge category */}
diff --git a/components/landing-page/search-section-new.tsx b/components/landing-page/search-section-new.tsx
index 3e71c58a..b1b27514 100644
--- a/components/landing-page/search-section-new.tsx
+++ b/components/landing-page/search-section-new.tsx
@@ -131,7 +131,7 @@ const ScrollableContent = () => {
                         : `${locale}/audio/detail/${item?.slug}`
                     }
                   >
-                    <Image src={item?.thumbnailLink} alt={item?.title} layout="fill" objectFit="cover" />
+                    <Image src={item?.smallThumbnailLink} alt={item?.title} layout="fill" objectFit="cover" />
                     <div className="absolute top-2 right-2 bg-[#c03724] rounded-full p-1 shadow">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                         <g fill="none">
@@ -252,7 +252,7 @@ const ScrollableContent = () => {
                         : `${locale}/audio/detail/${item?.slug}`
                     }
                   >
-                    <Image src={item?.thumbnailLink} alt={item?.title} layout="fill" objectFit="cover" />
+                    <Image src={item?.smallThumbnailLink} alt={item?.title} layout="fill" objectFit="cover" />
                     <div className="absolute top-2 right-2 bg-[#c03724] rounded-full p-1 shadow">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                         <g fill="none">
diff --git a/components/main/audio-detail.tsx b/components/main/audio-detail.tsx
index 548c94c2..719d1590 100644
--- a/components/main/audio-detail.tsx
+++ b/components/main/audio-detail.tsx
@@ -39,18 +39,21 @@ import $ from "jquery";
 import { useTranslations } from "next-intl";
 import { postActivityLog } from "@/service/content/content";
 
-const formWaveSurferOptions = (ref: any) => ({
-  container: ref,
-  waveColor: "#eee",
-  progressColor: "OrangeRed",
-  cursorColor: "OrangeRed",
-  barWidth: 3,
-  barRadius: 3,
-  responsive: true,
-  height: 150,
-  normalize: true,
-  partialRender: true,
-});
+const formWaveSurferOptions = (container: HTMLElement | null) => {
+  if (!container) throw new Error("Waveform container is null");
+  return {
+    container,
+    waveColor: "#E0E0E0",
+    progressColor: "#FFC831",
+    cursorColor: "#000",
+    barWidth: 2,
+    barRadius: 2,
+    responsive: true,
+    height: 80,
+    normalize: true,
+    partialRender: true,
+  };
+};
 
 const DetailAudio = () => {
   const [selectedSize, setSelectedSize] = useState<string>("L");
@@ -1209,7 +1212,7 @@ const DetailAudio = () => {
         </div>
 
         {/* Konten Serupa */}
-        <div className="px-4">
+        <div className="px-4 lg:px-20">
           <NewContent group="mabes" type={"similar"} />
         </div>
       </div>
diff --git a/components/main/document-detail.tsx b/components/main/document-detail.tsx
index 2908eaa7..cff6574b 100644
--- a/components/main/document-detail.tsx
+++ b/components/main/document-detail.tsx
@@ -452,13 +452,26 @@ const DetailDocument = () => {
         <div className="rounded-md overflow-hidden md:flex">
           {/* Bagian Kiri */}
           <div className="md:w-3/4">
-            <div className="relative">
+            {/* <div className="relative">
               <img
                 src={detailDataDocument?.files[selectedDocument]?.url}
                 alt="Main"
                 className="rounded-lg w-auto h-fit"
               />
               <div className="absolute top-4 left-4"></div>
+            </div> */}
+            <div className="bg-[#e0c350] flex items-center justify-center h-[170px] text-white">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="150"
+                height="150"
+                viewBox="0 0 16 16"
+              >
+                <path
+                  fill="currentColor"
+                  d="M5 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V5.414a1.5 1.5 0 0 0-.44-1.06L9.647 1.439A1.5 1.5 0 0 0 8.586 1zM4 3a1 1 0 0 1 1-1h3v2.5A1.5 1.5 0 0 0 9.5 6H12v7a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1zm7.793 2H9.5a.5.5 0 0 1-.5-.5V2.207zM7 7.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5M7.5 9a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1zM7 11.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5M5.5 8a.5.5 0 1 0 0-1a.5.5 0 0 0 0 1M6 9.5a.5.5 0 1 1-1 0a.5.5 0 0 1 1 0M5.5 12a.5.5 0 1 0 0-1a.5.5 0 0 0 0 1"
+                />
+              </svg>
             </div>
 
             {/* Footer Informasi */}
@@ -1038,7 +1051,7 @@ const DetailDocument = () => {
         </div>
 
         {/* Konten Serupa */}
-        <div className="">
+        <div className="px-4 lg:px-20">
           <NewContent group="mabes" type={"similar"} />
         </div>
       </div>