diff --git a/app/[locale]/(public)/document/filter/page.tsx b/app/[locale]/(public)/document/filter/page.tsx
index edd10c88..e58cea5a 100644
--- a/app/[locale]/(public)/document/filter/page.tsx
+++ b/app/[locale]/(public)/document/filter/page.tsx
@@ -285,8 +285,9 @@ const FilterPage = () => {
   useEffect(() => {
     initFetch();
   }, [page]);
+  
   const initFetch = async () => {
-    const response = await getListContent({ page: page - 1, size: 6, sortBy: "createdAt", contentTypeId: "3" });
+    const response = await getListContent({ page: page - 1, size: 6, sortBy: "createdAt", contentTypeId: "3", isInt: locale == "en" ? true : false });
     console.log(response);
     setDocumentData(response?.data?.data?.content);
     const data = response?.data?.data;
diff --git a/app/[locale]/(public)/image/filter/page.tsx b/app/[locale]/(public)/image/filter/page.tsx
index a7e9b1e7..03cf5000 100644
--- a/app/[locale]/(public)/image/filter/page.tsx
+++ b/app/[locale]/(public)/image/filter/page.tsx
@@ -15,6 +15,7 @@ import ReactDatePicker from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";
 import { close, loading } from "@/config/swal";
 import { useTranslations } from "next-intl";
+import ImageBlurry from "@/components/ui/image-blurry";
 
 const columns: ColumnDef<any>[] = [
   {
@@ -154,7 +155,8 @@ const FilterPage = () => {
           startDateString,
           endDateString,
           monthYearFilter ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[0]?.replace("", "") : "",
-          monthYearFilter ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1] : ""
+          monthYearFilter ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1] : "",
+          locale == "en" ? true : false,
         );
         close();
         // setGetTotalPage(response?.data?.data?.totalPages);
@@ -368,7 +370,7 @@ const FilterPage = () => {
 
       {/* Left */}
       <div className="flex flex-col lg:flex-row gap-6 p-4">
-        <div className="lg:w-[25%] h-fit w-full bg-[#f7f7f7] dark:bg-black p-4 rounded-lg shadow-md">
+        <div className="lg:w-96 h-fit w-full bg-[#f7f7f7] dark:bg-black p-4 rounded-lg shadow-md">
           <h2 className="text-lg font-semibold mb-4 flex items-center gap-1">
             <Icon icon="stash:filter-light" fontSize={30} />
             Filter
@@ -483,11 +485,20 @@ const FilterPage = () => {
             {imageData?.length > 0 ? (
               <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
                 {imageData?.map((image: any) => (
-                  <Card key={image?.id} className="hover:scale-110 transition-transform duration-300">
+                  <Card key={image?.id} className="hover:scale-105 transition-transform duration-300">
                     <CardContent className="flex flex-col text-xs lg:text-sm w-full p-0">
                       <Link href={`/image/detail/${image?.slug}`}>
-                        <img src={image?.thumbnailLink} className="h-60 object-cover items-center justify-center cursor-pointer rounded-lg" />
-                        <div className="flex flex-row items-center gap-2 text-[10px] mx-2">
+                        {/* <img src={image?.thumbnailLink} className="h-60 object-cover items-center justify-center cursor-pointer rounded-lg" /> */}
+                        <div
+                          className="img-container h-60 bg-[#e9e9e9] cursor-pointer rounded-lg"
+                        >
+                          <ImageBlurry
+                            src={image?.thumbnailLink}
+                            alt={image?.title}
+                            style={{ objectFit: "contain", width: "100%", height: "100%" }}
+                          />
+                        </div>
+                        <div className="flex flex-row items-center gap-2 text-[10px] mx-2 mt-2">
                           {formatDateToIndonesian(new Date(image?.createdAt))} {image?.timezone ? image?.timezone : "WIB"}| <Icon icon="formkit:eye" width="15" height="15" />
                           {image?.clickCount}{" "}
                           <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20">
diff --git a/app/[locale]/(public)/video/filter/page.tsx b/app/[locale]/(public)/video/filter/page.tsx
index 15862735..915d1c46 100644
--- a/app/[locale]/(public)/video/filter/page.tsx
+++ b/app/[locale]/(public)/video/filter/page.tsx
@@ -289,6 +289,7 @@ const FilterPage = () => {
       size: 6,
       sortBy: "createdAt",
       contentTypeId: "2",
+      isInt: locale == "en" ? true : false,
     });
     console.log(response);
     setVideoData(response?.data?.data?.content);
diff --git a/app/[locale]/globals.css b/app/[locale]/globals.css
index 18ad9f8a..688a4f26 100644
--- a/app/[locale]/globals.css
+++ b/app/[locale]/globals.css
@@ -582,4 +582,4 @@ html[dir="rtl"] .react-select .select__loading-indicator {
 /* Hide FullCalendar grid elements */
 .fc-view-harness:has(.hide-calendar-grid) {
   display: none;
-}
+}
\ No newline at end of file
diff --git a/components/landing-page/new-content.tsx b/components/landing-page/new-content.tsx
index ce002d84..70a45bc8 100644
--- a/components/landing-page/new-content.tsx
+++ b/components/landing-page/new-content.tsx
@@ -36,6 +36,7 @@ const NewContent = (props: { group: string, type: string }) => {
       group: props.group == "mabes" ? "" : 
              props.group == "polda" && poldaName && String(poldaName)?.length > 1 ? poldaName :
              props.group == "satker" && satkerName && String(satkerName)?.length > 1 ? "satker-"+satkerName : "",
+      isInt: locale == "en" ? true : false
     };
     const response = await getListContent(request);
     console.log("category", response);
diff --git a/components/ui/image-blurry.tsx b/components/ui/image-blurry.tsx
new file mode 100644
index 00000000..fc32ef6d
--- /dev/null
+++ b/components/ui/image-blurry.tsx
@@ -0,0 +1,61 @@
+import React, { useEffect, useState } from 'react';
+
+interface ImageBlurryProps {
+  src: string;
+  alt?: string;
+  classname?: string;
+  key?: string | number;
+  style?: React.CSSProperties;
+}
+
+const ImageBlurry: React.FC<ImageBlurryProps> = (props) => {
+  const { src, alt, classname, key, style } = props;
+
+  const [imgSrc, setImgSrc] = useState<string>(src);
+  const [isError, setIsError] = useState<boolean>(false);
+
+  useEffect(() => {
+    setImgSrc(src);
+  }, [src]);
+
+  const handleImage = () => {
+    const pics = document.querySelectorAll<HTMLImageElement>('img');
+    pics.forEach((pic) => {
+      if (pic.complete) {
+        checkImage(pic);
+      } else {
+        pic.addEventListener('load', function () {
+          checkImage(this);
+        });
+      }
+    });
+  };
+
+  const checkImage = (img: HTMLImageElement) => {
+    if (img.naturalHeight > img.naturalWidth) {
+      img.classList.add('portrait');
+    } else if (Math.abs(img.naturalHeight - img.naturalWidth) < 10) {
+      img.classList.add('square');
+    } else {
+      img.classList.add('landscape');
+    }
+  };
+
+  const onLoad = () => {
+    console.log('Image loaded:', src);
+    handleImage();
+  };
+
+  return (
+    // <div className="relative overflow-hidden bg-[#e9e9e9] blurry-wrapper">
+    //     <div className="absolute -top-6 -bottom-6 left-0 -right-6 bg-[#e9e9e9] blur-[8px] scale-[1.8] bg-center bg-no-repeat bg-contain blur-bg" style={{ backgroundImage: `url(${imgSrc})` }}></div>
+    //     <div className="absolute inset-0 bg-transparent bg-center bg-no-repeat bg-contain image-bg" style={{ backgroundImage: `url(${imgSrc})` }}></div>
+    // </div>
+    <div className="blurry-wrapper relative overflow-hidden bg-[#e9e9e9] rounded-lg" key={key} style={style}>
+      <div className="absolute -top-6 -bottom-6 -left-0 -right-6 bg-[#e9e9e9] blur-[8px] scale-[1.8] bg-center bg-no-repeat bg-contain blur-bg" style={{ backgroundImage: `url(${imgSrc})` }}></div>
+      <div className="absolute inset-0 bg-transparent bg-center bg-no-repeat bg-contain image-bg" style={{ backgroundImage: `url(${imgSrc})` }}></div>
+    </div>
+  );
+};
+
+export default ImageBlurry;
diff --git a/service/landing/landing.ts b/service/landing/landing.ts
index 96159ff3..4e00d550 100644
--- a/service/landing/landing.ts
+++ b/service/landing/landing.ts
@@ -11,7 +11,7 @@ export async function getCategoryData() {
 
 export async function getListContent(props: any) {
   return await httpGetInterceptor(
-    `media/public/list?enablePage=1&sort=desc&sortBy=${props.sortBy}&size=${props.size}&page=${props.page}&typeId=${props.contentTypeId}&title=${props.title}&group=${props.group}&categoryId=&fileFormats=&tags=&startDate=&endDate=&month=&year=`
+    `media/public/list?enablePage=1&sort=desc&sortBy=${props.sortBy}&size=${props.size}&isInt=${props.isInt}&typeId=${props.contentTypeId}&title=${props.title}&group=${props.group}&group=${props.group}&categoryId=&fileFormats=&tags=&startDate=&endDate=&month=&year=`
   );
 }
 
@@ -47,9 +47,9 @@ export async function publicDetailBlog(slug: any) {
   return await httpGetInterceptor(`blog/public/read/${slug}`);
 }
 
-export async function listData(type: string, search: string, category: string, size = 10, page = 0, sortBy = "createdAt", format = "", tag = "", group = "", startDate = "", endDate = "", month = "", year = "") {
+export async function listData(type: string, search: string, category: string, size = 10, page = 0, sortBy = "createdAt", format = "", tag = "", group = "", startDate = "", endDate = "", month = "", year = "", isInt = false) {
   return await httpGetInterceptor(
-    `media/public/list?enablePage=1&sort=desc&sortBy=${sortBy}&size=${size}&page=${page}&typeId=${type}&title=${search}&categoryId=${category}&fileFormats=${format}&tags=${tag}&group=${group}&startDate=${startDate}&endDate=${endDate}&month=${month}&year=${year}`
+    `media/public/list?enablePage=1&sort=desc&sortBy=${sortBy}&size=${size}&page=${page}&typeId=${type}&title=${search}&categoryId=${category}&fileFormats=${format}&tags=${tag}&group=${group}&startDate=${startDate}&endDate=${endDate}&month=${month}&year=${year}&isInt=${isInt}`
   );
 }