diff --git a/app/[locale]/(public)/content-management/download/page.tsx b/app/[locale]/(public)/content-management/download/page.tsx
index d13b7b27..729e70dc 100644
--- a/app/[locale]/(public)/content-management/download/page.tsx
+++ b/app/[locale]/(public)/content-management/download/page.tsx
@@ -18,6 +18,7 @@ import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
 import { sendMediaUploadToEmail } from "@/service/media-tracking/media-tracking";
 import ImageBlurry from "@/components/ui/image-blurry";
+import Image from "next/image";
 
 const Galery = (props: any) => {
   const [profile, setProfile] = useState<any>();
@@ -376,7 +377,7 @@ const Galery = (props: any) => {
                   </div>
                 ) : (
                   <p className="flex items-center justify-center">
-                    <img src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
+                    <Image width={1920} height={1080} src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
                   </p>
                 )
               ) : selectedTab == "audio" ? (
@@ -456,7 +457,7 @@ const Galery = (props: any) => {
                   </div>
                 ) : (
                   <p className="flex items-center justify-center">
-                    <img src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
+                    <Image width={1920} height={1080} src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
                   </p>
                 )
               ) : selectedTab == "image" ? (
@@ -517,7 +518,7 @@ const Galery = (props: any) => {
                   </div>
                 ) : (
                   <p className="flex items-center justify-center">
-                    <img src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
+                    <Image width={1920} height={1080} src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
                   </p>
                 )
               ) : contentDocument.length > 0 ? (
@@ -588,7 +589,7 @@ const Galery = (props: any) => {
                 </div>
               ) : (
                 <p className="flex items-center justify-center">
-                  <img src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
+                  <Image width={1920} height={1080} src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
                 </p>
               )}
             </div>
diff --git a/app/[locale]/(public)/content-management/galery/page.tsx b/app/[locale]/(public)/content-management/galery/page.tsx
index 774adc29..adedbe35 100644
--- a/app/[locale]/(public)/content-management/galery/page.tsx
+++ b/app/[locale]/(public)/content-management/galery/page.tsx
@@ -20,6 +20,7 @@ import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
 import { sendMediaUploadToEmail } from "@/service/media-tracking/media-tracking";
 import ImageBlurry from "@/components/ui/image-blurry";
+import Image from "next/image";
 
 const Galery = (props: any) => {
   const [profile, setProfile] = useState<any>();
@@ -382,7 +383,7 @@ const Galery = (props: any) => {
                   </div>
                 ) : (
                   <p className="flex items-center justify-center">
-                    <img src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
+                    <Image width={1920} height={1080} src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
                   </p>
                 )
               ) : selectedTab == "audio" ? (
@@ -460,7 +461,7 @@ const Galery = (props: any) => {
                   </div>
                 ) : (
                   <p className="flex items-center justify-center">
-                    <img src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
+                    <Image width={1920} height={1080} src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
                   </p>
                 )
               ) : selectedTab == "image" ? (
@@ -521,7 +522,7 @@ const Galery = (props: any) => {
                   </div>
                 ) : (
                   <p className="flex items-center justify-center">
-                    <img src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
+                    <Image width={1920} height={1080} src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
                   </p>
                 )
               ) : contentDocument.length > 0 ? (
@@ -592,7 +593,7 @@ const Galery = (props: any) => {
                 </div>
               ) : (
                 <p className="flex items-center justify-center">
-                  <img src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
+                  <Image width={1920} height={1080} src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
                 </p>
               )}
             </div>
diff --git a/app/[locale]/(public)/content-management/rewrite/page.tsx b/app/[locale]/(public)/content-management/rewrite/page.tsx
index c599c737..74230f44 100644
--- a/app/[locale]/(public)/content-management/rewrite/page.tsx
+++ b/app/[locale]/(public)/content-management/rewrite/page.tsx
@@ -17,6 +17,7 @@ import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
 import { sendMediaUploadToEmail } from "@/service/media-tracking/media-tracking";
 import ImageBlurry from "@/components/ui/image-blurry";
+import Image from "next/image";
 
 const page = () => {
   const [, setProfile] = useState();
@@ -259,7 +260,7 @@ const page = () => {
               </div>
             ) : (
               <p className="flex items-center justify-center">
-                <img src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
+                <Image width={1920} height={1080} src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
               </p>
             )}
           </div>
diff --git a/app/[locale]/(public)/image/detail/[slug]/page.tsx b/app/[locale]/(public)/image/detail/[slug]/page.tsx
index 9a119d3e..15442eff 100644
--- a/app/[locale]/(public)/image/detail/[slug]/page.tsx
+++ b/app/[locale]/(public)/image/detail/[slug]/page.tsx
@@ -20,6 +20,7 @@ import Swal from "sweetalert2";
 import parse from "html-react-parser";
 import { Skeleton } from "@/components/ui/skeleton";
 import { useTranslations } from "next-intl";
+import Image from "next/image";
 
 const DetailInfo = () => {
   const MySwal = withReactContent(Swal);
@@ -444,7 +445,7 @@ const DetailInfo = () => {
               </div>
             ) : (
               <div className="relative">
-                <img src={detailDataImage?.files[selectedImage]?.url} alt="Main" className="rounded-lg w-auto h-fit" />
+                <Image width={2560} height={1440} src={detailDataImage?.files[selectedImage]?.url} alt="Main" className="rounded-lg w-auto h-fit" />
                 <div className="absolute top-4 left-4"></div>
               </div>
             )}
@@ -460,7 +461,7 @@ const DetailInfo = () => {
               <div className="py-4 flex flex-row gap-3">
                 {detailDataImage?.files?.map((file: any, index: number) => (
                   <a onClick={() => setSelectedImage(index)} key={file?.id}>
-                    <img src={file?.url} className="w-[120px] h-[90px] object-cover rounded-md cursor-pointer hover:ring-2 hover:ring-red-600" />
+                    <Image width={1920} height={1080} alt="image-small" src={file?.url} className="w-[120px] h-[90px] object-cover rounded-md cursor-pointer hover:ring-2 hover:ring-red-600" />
                   </a>
                 ))}
               </div>
@@ -614,7 +615,7 @@ const DetailInfo = () => {
             {listSuggestion?.map((data: any) => (
               <div className="flex flex-col">
                 <div className="flex flex-row mt-2 px-4 lg:px-14">
-                  <img src={data?.suggestionFrom?.profilePictureUrl} className="h-12 lg:h-16 w-12 lg:w-16 mr-2" onError={addDefaultProfile} alt="" />
+                  <Image width={1080} height={1080} src={data?.suggestionFrom?.profilePictureUrl} className="h-12 lg:h-16 w-12 lg:w-16 mr-2" onError={addDefaultProfile} alt="" />
                   <div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1">
                     <p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
                       {Number(data.suggestionFrom?.roleId) == 2 || Number(data.suggestionFrom?.roleId) == 3 || Number(data.suggestionFrom?.roleId) == 4 ? "HUMAS POLRI" : data.suggestionFrom?.fullname}
@@ -663,7 +664,7 @@ const DetailInfo = () => {
                   ? data.children?.map((child1: any) => (
                       <div className="flex flex-col">
                         <div className="flex flex-row mt-2 px-4 lg:pr-14 pl-16 lg:pl-32">
-                          <img src={child1.suggestionFrom?.profilePictureUrl} onError={addDefaultProfile} alt="" className="h-10 lg:h-16 w-10 lg:w-16 mr-2" />
+                          <Image width={1080} height={1080} src={child1.suggestionFrom?.profilePictureUrl} onError={addDefaultProfile} alt="" className="h-10 lg:h-16 w-10 lg:w-16 mr-2" />
                           <div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1">
                             <p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
                               {" "}
@@ -718,7 +719,7 @@ const DetailInfo = () => {
                           ? child1.children?.map((child2: any) => (
                               <div className="">
                                 <div className="flex flex-row mt-2 px-4 lg:pr-14 pl-28 lg:pl-48">
-                                  <img src={child2.suggestionFrom?.profilePictureUrl} className="h-9 lg:h-16 w-9 lg:w-16 mr-2" onError={addDefaultProfile} alt="" />
+                                  <Image width={1080} height={1080} src={child2.suggestionFrom?.profilePictureUrl} className="h-9 lg:h-16 w-9 lg:w-16 mr-2" onError={addDefaultProfile} alt="" />
                                   <div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1">
                                     <p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
                                       {" "}
diff --git a/app/[locale]/(public)/image/filter/page.tsx b/app/[locale]/(public)/image/filter/page.tsx
index 50723aef..4e4e24b9 100644
--- a/app/[locale]/(public)/image/filter/page.tsx
+++ b/app/[locale]/(public)/image/filter/page.tsx
@@ -17,6 +17,7 @@ import { close, loading } from "@/config/swal";
 import { useTranslations } from "next-intl";
 import ImageBlurry from "@/components/ui/image-blurry";
 import { Skeleton } from "@/components/ui/skeleton";
+import Image from "next/image";
 
 const columns: ColumnDef<any>[] = [
   {
@@ -537,7 +538,7 @@ const FilterPage = () => {
                     </div>
                   ) : (
                     <p className="flex items-center justify-center text-black">
-                      <img src="/assets/empty-data.png" alt="empty" className="h-60 w-60 my-4" />
+                      <Image width={1920} height={1080} src="/assets/empty-data.png" alt="empty" className="h-60 w-60 my-4" />
                     </p>
                   )}
                 </>
diff --git a/app/[locale]/(public)/indeks/detail/[slug]/page.tsx b/app/[locale]/(public)/indeks/detail/[slug]/page.tsx
index af0d0358..4cc35e68 100644
--- a/app/[locale]/(public)/indeks/detail/[slug]/page.tsx
+++ b/app/[locale]/(public)/indeks/detail/[slug]/page.tsx
@@ -11,6 +11,7 @@ import { getCookiesDecrypt } from "@/lib/utils";
 import { close, loading } from "@/config/swal";
 import { Input } from "@/components/ui/input";
 import { useTranslations } from "next-intl";
+import Image from "next/image";
 
 const IndeksDetail = () => {
   const searchParams = useSearchParams();
@@ -161,7 +162,7 @@ const IndeksDetail = () => {
         </div>
         {/* Gambar Utama */}
         <div className="flex items-center justify-center">
-          <img src={indeksData?.thumbnailLink} alt="Main" className="h-fit lg:h-[550px] w-full rounded-lg" />
+          <Image width={2560} height={1440} src={indeksData?.thumbnailLink} alt="Main" className="h-fit lg:h-[550px] w-full rounded-lg" />
         </div>
         {/* Footer Informasi */}
         <div className="text-gray-500 flex border-t mt-4">
@@ -195,7 +196,7 @@ const IndeksDetail = () => {
             {listComments?.map((data: any) => (
               <div className="flex flex-col">
                 <div className="flex flex-row mt-2 px-4 lg:px-14">
-                  <img className="h-10 lg:h-20 w-10 lg:w-20" src="/assets/img/user-avatar-yellow.svg" alt="#" />
+                  <Image width={512} height={512} className="h-10 lg:h-20 w-10 lg:w-20" src="/assets/img/user-avatar-yellow.svg" alt="#" />
                   <div className="border border-slate-300 w-full p-4 bg-white gap-1">
                     <p className="flex justify-between text-sm text-slate-500 lg:text-base border-b-2 border-slate-200 mb-2">
                       <b>{Number(data.commentFrom?.roleId) == 2 || Number(data.commentFrom?.roleId) == 3 || Number(data.commentFrom?.roleId) == 4 ? "HUMAS POLRI" : data.commentFrom?.fullname}</b>
@@ -233,7 +234,7 @@ const IndeksDetail = () => {
                   ? data.children?.map((child1: any) => (
                       <div className="flex flex-col">
                         <div className="flex flex-row mt-2 px-4 lg:pr-14 pl-12 lg:pl-32">
-                          <img className="h-10 lg:h-20 w-10 lg:w-20" src="/assets/img/user-avatar-yellow.svg" alt="#" />
+                          <Image width={512} height={512} className="h-10 lg:h-20 w-10 lg:w-20" src="/assets/img/user-avatar-yellow.svg" alt="#" />
                           <div className="border border-slate-300 w-full p-4 bg-white gap-1">
                             <p className="flex justify-between text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
                               <b>{Number(child1.commentFrom?.roleId) == 2 || Number(child1.commentFrom?.roleId) == 3 || Number(child1.commentFrom?.roleId) == 4 ? "HUMAS POLRI" : child1.commentFrom?.fullname}</b>
@@ -273,7 +274,7 @@ const IndeksDetail = () => {
                           ? child1.children?.map((child2: any) => (
                               <div className="flex flex-col">
                                 <div className="flex flex-row mt-2 px-4 lg:pr-14 pl-20 lg:pl-48">
-                                  <img className="h-10 lg:h-20 w-10 lg:w-20" src="/assets/img/user-avatar-yellow.svg" alt="#" />
+                                  <Image width={512} height={512} className="h-10 lg:h-20 w-10 lg:w-20" src="/assets/img/user-avatar-yellow.svg" alt="#" />
                                   <div className="border border-slate-300 w-full p-4 bg-white gap-2">
                                     <p className="flex justify-between text-slate-500 text-xs lg:text-base border-b-2 border-slate-200 mb-2">
                                       <b>{Number(child2.commentFrom?.roleId) == 2 || Number(child2.commentFrom?.roleId) == 3 || Number(child2.commentFrom?.roleId) == 4 ? "HUMAS POLRI" : child2.commentFrom?.fullname}</b>
@@ -328,7 +329,7 @@ const IndeksDetail = () => {
               {indexData?.map((relate: any) => (
                 <CarouselItem key={relate?.id} className="md:basis-1/2 lg:basis-1/3">
                   <Link href={`/indeks/detail/${relate?.slug}`} className="relative group overflow-hidden shadow-md hover:shadow-lg">
-                    <img src={relate?.thumbnailLink} className="w-full rounded-lg h-40 lg:h-60 object-cover group-hover:scale-100 transition-transform duration-300" />
+                    <Image alt="" width={2560} height={1440} src={relate?.thumbnailLink} className="w-full rounded-lg h-40 lg:h-60 object-cover group-hover:scale-100 transition-transform duration-300" />
                     <div className="absolute bottom-0 left-0 right-0 bg-gray-600 border-l-4 border-[#bb3523] rounded-lg backdrop-blur-sm text-white p-2">
                       <span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-sm px-4 py-1">{relate?.categoryName}</span>
                       <h1 className="text-sm lg:text-lg mb-2 font-semibold h-5 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">{relate?.title}</h1>
diff --git a/app/[locale]/(public)/indeks/page.tsx b/app/[locale]/(public)/indeks/page.tsx
index 596c1401..2e471bdc 100644
--- a/app/[locale]/(public)/indeks/page.tsx
+++ b/app/[locale]/(public)/indeks/page.tsx
@@ -4,6 +4,7 @@ import { Skeleton } from "@/components/ui/skeleton";
 import { Link } from "@/i18n/routing";
 import { getIndeksData } from "@/service/landing/landing";
 import { formatDateToIndonesian } from "@/utils/globals";
+import Image from "next/image";
 import { usePathname } from "next/navigation";
 import React, { useEffect, useState } from "react";
 
@@ -53,14 +54,14 @@ const Indeks: React.FC = () => {
               (indeks: any, index: number) =>
                 index == count && (
                   <div key={indeks?.id} className="relative h-[310px] lg:h-[435px]">
-                    <img src={indeks?.thumbnailLink} alt="image" className="w-full h-[310px] lg:h-[435px] rounded-lg object-cover" />
+                    <Image width={2560} height={1440} src={indeks?.thumbnailLink} alt="image" className="w-full h-[310px] lg:h-[435px] rounded-lg object-cover" />
                     <div className="absolute bottom-0 left-0 right-0 bg-transparent backdrop-blur-sm text-white p-4 rounded-b-lg">
                       <span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-xs px-2 py-1">{indeks?.categoryName}</span>
                       <Link href={`/indeks/detail/${indeks?.slug}`}>
                         <h2 className="text-2xl font-bold mt-2">{indeks?.title}</h2>
                       </Link>
-                      <p className="text-xs flex flex-row items-center gap-1 mt-1 ml-2">
-                        {formatDateToIndonesian(new Date(indeks?.createdAt))} {indeks?.timezone ? indeks?.timezone : "WIB"}|{" "}
+                      <p className="text-xs flex flex-row items-center gap-1 mt-1">
+                        {formatDateToIndonesian(new Date(indeks?.createdAt))} {indeks?.timezone ? indeks?.timezone : "WIB"} | {" "}
                         <svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24">
                           <path
                             fill="currentColor"
@@ -91,7 +92,7 @@ const Indeks: React.FC = () => {
                 (indeksRight: any, index: number) =>
                   (index == count + 1 || index == count + 2) && (
                     <div key={indeksRight?.id} className="relative h-[310px] lg:h-[215px]">
-                      <img src={indeksRight?.thumbnailLink} alt="image" className="w-full h-[310px] lg:h-[215px] rounded-lg " />
+                      <Image width={1920} height={1080} src={indeksRight?.thumbnailLink} alt="image" className="w-full h-[310px] lg:h-[215px] rounded-lg " />
                       <div className="absolute bottom-0 left-0 right-0 bg-transparent backdrop-blur-sm text-white p-4 rounded-b-lg">
                         <span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-xs px-2 py-1">{indeksRight?.categoryName}</span>
                         <Link href={`/indeks/detail/${indeksRight?.slug}`}>
@@ -148,7 +149,7 @@ const Indeks: React.FC = () => {
               (indeksBottom: any, index: number) =>
                 index < 3 && (
                   <div key={indeksBottom?.id} className="flex flex-col md:flex-row items-start p-4 gap-4">
-                    <img src={indeksBottom?.thumbnailLink} alt="" className="h-40 object-cover rounded-lg w-full lg:w-full lg:h-[300px]" />
+                    <Image width={2560} height={1440} src={indeksBottom?.thumbnailLink} alt="" className="h-40 object-cover rounded-lg w-full lg:w-full lg:h-[300px]" />
                     <div className="flex flex-col justify-between w-full">
                       <p className="text-sm">{indeksBottom?.date}</p>
                       <Link href={`/indeks/detail/${indeksBottom?.slug}`} className="text-2xl font-semibold text-gray-800">
diff --git a/app/[locale]/(public)/profile/change-profile/page.tsx b/app/[locale]/(public)/profile/change-profile/page.tsx
index f5c8688f..a546960b 100644
--- a/app/[locale]/(public)/profile/change-profile/page.tsx
+++ b/app/[locale]/(public)/profile/change-profile/page.tsx
@@ -1,5 +1,6 @@
 "use client";
 import { Link } from "@/components/navigation";
+import Image from "next/image";
 import React, { useState } from "react";
 
 const ChangeProfile: React.FC = () => {
@@ -36,55 +37,29 @@ const ChangeProfile: React.FC = () => {
 
       <div className="flex justify-center gap-4 mb-8">
         <Link href={"/profile"}>
-          <button className="border border-red-700 text-red-700 px-4 py-2 rounded">
-            User Profile
-          </button>
+          <button className="border border-red-700 text-red-700 px-4 py-2 rounded">User Profile</button>
         </Link>
         <Link href={"/profile/change-profile"}>
-          <button className="bg-red-700 text-white px-4 py-2 rounded">
-            Ubah Foto
-          </button>
+          <button className="bg-red-700 text-white px-4 py-2 rounded">Ubah Foto</button>
         </Link>
         <Link href={"/profile/change-password"}>
-          <button className="border border-red-700 text-red-700 px-4 py-2 rounded">
-            Ubah Password
-          </button>
+          <button className="border border-red-700 text-red-700 px-4 py-2 rounded">Ubah Password</button>
         </Link>
       </div>
 
       <div className="w-80 mx-auto bg-gray-900 text-white shadow-md p-8 rounded">
         <div className="flex justify-center mb-6">
           <div className="w-40 h-40 rounded-full border border-gray-300 flex items-center justify-center">
-            {selectedImage ? (
-              <img
-                src={URL.createObjectURL(selectedImage)}
-                alt="Preview"
-                className="w-full h-full rounded-full object-cover"
-              />
-            ) : (
-              <span className="text-gray-500">No Image</span>
-            )}
+            {selectedImage ? <Image width={1920} height={1080} src={URL.createObjectURL(selectedImage)} alt="Preview" className="w-full h-full rounded-full object-cover" /> : <span className="text-gray-500">No Image</span>}
           </div>
         </div>
 
         <div className="flex justify-center gap-4">
-          <input
-            type="file"
-            id="upload"
-            accept="image/*"
-            className="hidden"
-            onChange={handleImageChange}
-          />
-          <label
-            htmlFor="upload"
-            className="bg-blue-600 text-white px-4 py-2 rounded cursor-pointer"
-          >
+          <input type="file" id="upload" accept="image/*" className="hidden" onChange={handleImageChange} />
+          <label htmlFor="upload" className="bg-blue-600 text-white px-4 py-2 rounded cursor-pointer">
             Ganti Foto
           </label>
-          <button
-            onClick={handleDelete}
-            className="border border-red-700 text-red-700 px-4 py-2 rounded"
-          >
+          <button onClick={handleDelete} className="border border-red-700 text-red-700 px-4 py-2 rounded">
             Hapus Foto
           </button>
         </div>
diff --git a/app/[locale]/(public)/video/detail/[slug]/page.tsx b/app/[locale]/(public)/video/detail/[slug]/page.tsx
index f0f17197..da19244c 100644
--- a/app/[locale]/(public)/video/detail/[slug]/page.tsx
+++ b/app/[locale]/(public)/video/detail/[slug]/page.tsx
@@ -20,6 +20,7 @@ import withReactContent from "sweetalert2-react-content";
 import Swal from "sweetalert2";
 import parse from "html-react-parser";
 import { useTranslations } from "next-intl";
+import Image from "next/image";
 
 const DetailVideo = () => {
   const [selectedSize, setSelectedSize] = useState<string>("L");
@@ -586,7 +587,7 @@ const DetailVideo = () => {
             {listSuggestion?.map((data: any) => (
               <div className="flex flex-col">
                 <div className="flex flex-row mt-2 px-4 lg:px-14">
-                  <img src={data?.suggestionFrom?.profilePictureUrl} className="h-12 lg:h-16 w-12 lg:w-16 mr-2" onError={addDefaultProfile} alt="" />
+                  <Image width={1080} height={1080} src={data?.suggestionFrom?.profilePictureUrl} className="h-12 lg:h-16 w-12 lg:w-16 mr-2" onError={addDefaultProfile} alt="" />
                   <div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1">
                     <p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
                       {Number(data.suggestionFrom?.roleId) == 2 || Number(data.suggestionFrom?.roleId) == 3 || Number(data.suggestionFrom?.roleId) == 4 ? "HUMAS POLRI" : data.suggestionFrom?.fullname}
@@ -635,7 +636,7 @@ const DetailVideo = () => {
                   ? data.children?.map((child1: any) => (
                       <div className="flex flex-col">
                         <div className="flex flex-row mt-2 px-4 lg:pr-14 pl-16 lg:pl-32">
-                          <img src={child1.suggestionFrom?.profilePictureUrl} onError={addDefaultProfile} alt="" className="h-10 lg:h-16 w-10 lg:w-16 mr-2" />
+                          <Image width={1080} height={1080} src={child1.suggestionFrom?.profilePictureUrl} onError={addDefaultProfile} alt="" className="h-10 lg:h-16 w-10 lg:w-16 mr-2" />
                           <div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1">
                             <p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
                               {" "}
@@ -689,7 +690,7 @@ const DetailVideo = () => {
                           ? child1.children?.map((child2: any) => (
                               <div className="">
                                 <div className="flex flex-row mt-2 px-4 lg:pr-14 pl-28 lg:pl-48">
-                                  <img src={child2.suggestionFrom?.profilePictureUrl} className="h-9 lg:h-16 w-9 lg:w-16 mr-2" onError={addDefaultProfile} alt="" />
+                                  <Image width={1080} height={1080} src={child2.suggestionFrom?.profilePictureUrl} className="h-9 lg:h-16 w-9 lg:w-16 mr-2" onError={addDefaultProfile} alt="" />
                                   <div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1">
                                     <p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
                                       {" "}
diff --git a/app/[locale]/(public)/video/filter/page.tsx b/app/[locale]/(public)/video/filter/page.tsx
index 1552cc5a..2d711740 100644
--- a/app/[locale]/(public)/video/filter/page.tsx
+++ b/app/[locale]/(public)/video/filter/page.tsx
@@ -17,6 +17,7 @@ import { close, loading } from "@/config/swal";
 import { useTranslations } from "next-intl";
 import ImageBlurry from "@/components/ui/image-blurry";
 import { Skeleton } from "@/components/ui/skeleton";
+import Image from "next/image";
 
 const columns: ColumnDef<any>[] = [
   {
@@ -562,7 +563,7 @@ const FilterPage = () => {
                   </div>
                 ) : (
                   <p className="flex items-center justify-center">
-                    <img src="/assets/empty-data.png" alt="empty" className="h-60 w-60 my-4" />
+                    <Image width={1920} height={1080} src="/assets/empty-data.png" alt="empty" className="h-60 w-60 my-4" />
                   </p>
                 )}
               </>
diff --git a/components/landing-page/content-category.tsx b/components/landing-page/content-category.tsx
index f764863a..61dc8707 100644
--- a/components/landing-page/content-category.tsx
+++ b/components/landing-page/content-category.tsx
@@ -6,6 +6,7 @@ import { Reveal } from "./Reveal";
 import { useTranslations } from "next-intl";
 import { usePathname } from "next/navigation";
 import { useParams } from "next/navigation";
+import Image from "next/image";
 
 const ContentCategory = (props: { group?: string }) => {
   const [categories, setCategories] = useState<any>();
@@ -55,7 +56,7 @@ const ContentCategory = (props: { group?: string }) => {
             !seeAllValue ? (
               index < 4 ? (
                 <Link key={category?.id} href={`all/filter?category=${category?.id}`} className="relative group rounded-md overflow-hidden shadow-md hover:shadow-lg">
-                  <img src={category?.thumbnailLink} className="w-full h-48 sm:h-40 object-cover group-hover:scale-110 transition-transform duration-300" />
+                  <Image alt="category" width={2560} height={1440} src={category?.thumbnailLink} className="w-full h-48 sm:h-40 object-cover group-hover:scale-110 transition-transform duration-300" />
                   <div className="absolute  bottom-0 rounded-lg left-0 right-0 bg-gray-400 border-l-4 mb-4 border-[#bb3523] text-white p-2">
                     <h3 className="text-sm font-semibold truncate">{category?.name}</h3>
                   </div>
@@ -65,7 +66,7 @@ const ContentCategory = (props: { group?: string }) => {
               )
             ) : (
               <Link key={category?.id} href={`all/filter?category=${category?.id}`} className="relative group rounded-md overflow-hidden shadow-md hover:shadow-lg">
-                <img src={category?.thumbnailLink} className="w-full h-48 sm:h-40 object-cover group-hover:scale-110 transition-transform duration-300" />
+                <Image alt="category" width={2560} height={1440} src={category?.thumbnailLink} className="w-full h-48 sm:h-40 object-cover group-hover:scale-110 transition-transform duration-300" />
                 <div className="absolute bottom-0 left-0 right-0 bg-gray-400 border-l-4 mb-4 border-[#bb3523] rounded-lg text-white p-2">
                   <h3 className="text-sm font-semibold truncate">{category?.name}</h3>
                 </div>
diff --git a/components/landing-page/hero.tsx b/components/landing-page/hero.tsx
index 76f5d65c..301da675 100644
--- a/components/landing-page/hero.tsx
+++ b/components/landing-page/hero.tsx
@@ -7,6 +7,7 @@ import Link from "next/link";
 import { useParams, usePathname, useRouter } from "next/navigation";
 import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel";
 import { Skeleton } from "../ui/skeleton";
+import Image from "next/image";
 
 const Hero: React.FC = () => {
   const router = useRouter();
@@ -67,7 +68,7 @@ const Hero: React.FC = () => {
             {heroData?.map((list: any) => (
               <CarouselItem key={list?.id}>
                 <div className="relative h-[310px] lg:h-[420px]">
-                  <img src={list?.thumbnailLink} alt="Gambar Utama" className="w-full h-[310px] lg:h-[420px] rounded-lg object-cover" />
+                  <Image src={list?.thumbnailLink} alt="gambar-utama" width={1920} height={1080} className="w-full h-[310px] lg:h-[420px] rounded-lg object-cover" />
                   <div className="absolute bottom-0 left-0 right-0 bg-transparent backdrop-blur-sm text-black dark:text-white p-4 rounded-b-lg">
                     <span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-xs px-2 py-1">{list?.categoryName}</span>
                     <Link href={`${locale}/image/detail/${list?.slug}`}>
@@ -138,7 +139,7 @@ const Hero: React.FC = () => {
             {heroData?.map((item: any) => (
               <li key={item?.id} className="flex gap-4 flex-row lg:w-full ">
                 <div className="flex-shrink-0 w-24 rounded-lg">
-                  <img src={item?.thumbnailLink} alt={item?.title} className="w-full h-[73px] object-cover rounded-lg" />
+                  <Image width={720} height={480} src={item?.thumbnailLink} alt={item?.title} className="w-full h-[73px] object-cover rounded-lg" />
                 </div>
                 <div className="w-[280px] lg:w-auto">
                   <span className="text-white bg-[#bb3523] px-4 py-1 rounded-lg flex text-[8px] font-bold uppercase w-fit">{item?.categoryName}</span>
diff --git a/components/landing-page/navbar.tsx b/components/landing-page/navbar.tsx
index 669c007a..f42dd6e6 100644
--- a/components/landing-page/navbar.tsx
+++ b/components/landing-page/navbar.tsx
@@ -146,7 +146,7 @@ const Navbar = () => {
       <div className="flex items-center justify-between px-4 lg:px-20 py-4 gap-3">
         {/* Logo */}
         <Link href={prefixPath} className="flex items-center">
-          <img src="/assets/mediahub-logo.gif" alt="Media Hub Logo" className="object-contain h-20" />
+          <Image src="/assets/mediahub-logo.gif" alt="Media Hub Logo" width={200} height={300} className="object-contain" />
         </Link>
 
         {/* Mobile Menu Toggle */}
@@ -294,7 +294,7 @@ const Navbar = () => {
           </Link> */}
           <div className="flex items-center space-x-1  ">
             <a href="https://tvradio.polri.go.id/">
-              <img src="/assets/polriTv.png" className="object-contain h-10 flex-auto " />
+              <Image src="/assets/polriTv.png" width={100} height={120} alt="polritv" className="object-contain flex-auto " />
             </a>
           </div>
 
@@ -417,7 +417,7 @@ const Navbar = () => {
                         {notifications?.map((list: any) => (
                           <a className="flex flex-row" href={list.redirectUrl} key={list.id}>
                             <div className="ml-4">
-                              <img src="/assets/avatar-profile.png" alt="..." className="w-8 items-center mr-3" />
+                              <Image src="/assets/avatar-profile.png" alt="avatar" width={5} height={10} className="items-center mr-3" />
                             </div>
                             <div className="text-wrap text-left">{list?.message}</div>
                             <div>
@@ -441,7 +441,7 @@ const Navbar = () => {
                         {notificationsUpdate?.map((list: any) => (
                           <a className="flex flex-row" href={list.redirectUrl} key={list.id}>
                             <div className="ml-4">
-                              <img src="/assets/avatar-profile.png" alt="..." className="w-8 items-center mr-3" />
+                              <Image src="/assets/avatar-profile.png" alt="..." width={5} height={10} className="w-8 items-center mr-3" />
                             </div>
                             <div className="">
                               <div className="text-wrap text-left">{list?.message}</div>
@@ -563,7 +563,7 @@ const Navbar = () => {
                     {notifications?.map((list: any) => (
                       <a className="" href={list.redirectUrl} key={list.id}>
                         <div className="">
-                          <img src="/assets/avatar-profile.png" alt="..." className="" />
+                          <Image src="/assets/avatar-profile.png" alt="..." width={5} height={10} />
                         </div>
                         <div className="">
                           <div className="text-wrap text-left">{list?.message}</div>
@@ -587,7 +587,7 @@ const Navbar = () => {
                     {notificationsUpdate?.map((list: any) => (
                       <a className="flex flex-row" href={list.redirectUrl} key={list.id}>
                         <div className="ml-4">
-                          <img src="/assets/avatar-profile.png" alt="..." className="w-8 items-center mr-3" />
+                          <Image src="/assets/avatar-profile.png" alt="..." width={5} height={10} className="items-center mr-3" />
                         </div>
                         <div className="">
                           <div className="text-wrap text-left">{list?.message}</div>
@@ -834,7 +834,7 @@ const Navbar = () => {
             </div> */}
             <div className="flex items-center space-x-1 mx-3 text-yellow-600 font-medium">
               <a href="https://tvradio.polri.go.id/">
-                <img src="/assets/polriTv.png" className="object-contain h-11 flex items-center" />
+                <Image src="/assets/polriTv.png" width={100} height={120} alt="polritv" className="object-contain flex items-center" />
               </a>
             </div>
 
@@ -989,7 +989,7 @@ const Navbar = () => {
                           {notifications?.map((list: any) => (
                             <a className="flex flex-row" href={list.redirectUrl} key={list.id}>
                               <div className="ml-4">
-                                <img src="/assets/avatar-profile.png" alt="..." className="w-8 items-center mr-3" />
+                                <Image width={5} height={10} src="/assets/avatar-profile.png" alt="..." className="items-center mr-3" />
                               </div>
                               <div className="text-wrap text-left">{list?.message}</div>
                               <div>
@@ -1013,7 +1013,7 @@ const Navbar = () => {
                           {notificationsUpdate?.map((list: any) => (
                             <a className="flex flex-row" href={list.redirectUrl} key={list.id}>
                               <div className="ml-4">
-                                <img src="/assets/avatar-profile.png" alt="..." className="w-8 items-center mr-3" />
+                                <Image width={5} height={10} src="/assets/avatar-profile.png" alt="..." className="items-center mr-3" />
                               </div>
                               <div className="">
                                 <div className="text-wrap text-left">{list?.message}</div>
@@ -1135,7 +1135,7 @@ const Navbar = () => {
                       {notifications?.map((list: any) => (
                         <a className="" href={list.redirectUrl} key={list.id}>
                           <div className="">
-                            <img src="/assets/avatar-profile.png" alt="..." className="" />
+                            <Image width={5} height={10} src="/assets/avatar-profile.png" alt="..." />
                           </div>
                           <div className="">
                             <div className="text-wrap text-left">{list?.message}</div>
@@ -1159,7 +1159,7 @@ const Navbar = () => {
                       {notificationsUpdate?.map((list: any) => (
                         <a className="flex flex-row" href={list.redirectUrl} key={list.id}>
                           <div className="ml-4">
-                            <img src="/assets/avatar-profile.png" alt="..." className="w-8 items-center mr-3" />
+                            <Image width={5} height={10} src="/assets/avatar-profile.png" alt="..." className="items-center mr-3" />
                           </div>
                           <div className="">
                             <div className="text-wrap text-left">{list?.message}</div>
diff --git a/components/landing-page/new-content.tsx b/components/landing-page/new-content.tsx
index 1192ba7e..3301eecf 100644
--- a/components/landing-page/new-content.tsx
+++ b/components/landing-page/new-content.tsx
@@ -11,6 +11,7 @@ import { Link } from "@/i18n/routing";
 import { Reveal } from "./Reveal";
 import { useTranslations } from "next-intl";
 import { Skeleton } from "../ui/skeleton";
+import Image from "next/image";
 
 const NewContent = (props: { group: string; type: string }) => {
   const [newContent, setNewContent] = useState<any>();
@@ -117,9 +118,9 @@ const NewContent = (props: { group: string; type: string }) => {
                       {newContent?.map((image: any) => (
                         <CarouselItem key={image?.id} className="md:basis-1/2 lg:basis-1/3">
                           <Link href={`/image/detail/${image?.slug}`} className="relative group overflow-hidden shadow-md hover:shadow-lg">
-                            <img src={image?.thumbnailLink} className="w-full rounded-lg h-48 lg:h-60 object-cover group-hover:scale-100 transition-transform duration-300" />
+                            <Image width={2560} height={1440} alt="image" src={image?.thumbnailLink} className="w-full rounded-lg h-48 lg:h-60 object-cover group-hover:scale-100 transition-transform duration-300" />
                             <div className="absolute bottom-0 left-0 right-0 bg-gray-600 border-l-4 border-[#bb3523] rounded-lg backdrop-blur-sm text-white p-2">
-                              <h1 className="text-sm lg:text-lg mb-2 font-semibold h-5 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">{image?.title}</h1>
+                              <p className="text-sm lg:text-base mb-2 font-semibold h-6 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">{image?.title}</p>
                               <p className="flex flex-row items-center text-[10px] gap-2">
                                 {formatDateToIndonesian(new Date(image?.createdAt))} {image?.timezone ? image?.timezone : "WIB"} | <Icon icon="formkit:eye" width="15" height="15" /> {image.clickCount}{" "}
                               </p>
@@ -133,7 +134,7 @@ const NewContent = (props: { group: string; type: string }) => {
                   </Carousel>
                 ) : (
                   <p className="flex items-center justify-center">
-                    <img src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
+                    <Image width={1920} height={1080} src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
                   </p>
                 )
               ) : selectedTab == "audio" ? (
@@ -171,7 +172,7 @@ const NewContent = (props: { group: string; type: string }) => {
                   </Carousel>
                 ) : (
                   <p className="flex items-center justify-center">
-                    <img src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
+                    <Image width={1920} height={1080} src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
                   </p>
                 )
               ) : selectedTab == "video" ? (
@@ -181,9 +182,9 @@ const NewContent = (props: { group: string; type: string }) => {
                       {newContent?.map((video: any) => (
                         <CarouselItem key={video?.id} className="md:basis-1/2 lg:basis-1/3">
                           <Link href={`/video/detail/${video?.slug}`} className="relative group rounded-md overflow-hidden shadow-md hover:shadow-lg">
-                            <img src={video?.thumbnailLink} className="w-full h-40 lg:h-60 object-cover rounded-lg group-hover:scale-100 transition-transform duration-300" />
+                            <Image alt="video" width={2560} height={1440} src={video?.thumbnailLink} className="w-full h-40 lg:h-60 object-cover rounded-lg group-hover:scale-100 transition-transform duration-300" />
                             <div className="absolute bottom-0 rounded-lg left-0 right-0 border-l-4 border-[#bb3523] bg-gray-600 text-white p-2">
-                              <h1 className="text-sm font-semibold h-5 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">{video?.title}</h1>
+                              <p className="text-sm lg:text-base mb-2 font-semibold h-6 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">{video?.title}</p>
                               <p className="flex flex-row items-center text-sm gap-2">
                                 {formatDateToIndonesian(new Date(video?.createdAt))} {video?.timezone ? video?.timezone : "WIB"}| <Icon icon="formkit:eye" width="15" height="15" /> {video?.clickCount}{" "}
                               </p>
@@ -197,7 +198,7 @@ const NewContent = (props: { group: string; type: string }) => {
                   </Carousel>
                 ) : (
                   <p className="flex items-center justify-center">
-                    <img src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
+                    <Image width={1920} height={1080} src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
                   </p>
                 )
               ) : newContent.length > 0 ? (
@@ -241,7 +242,7 @@ const NewContent = (props: { group: string; type: string }) => {
                 </Carousel>
               ) : (
                 <p className="flex items-center justify-center">
-                  <img src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
+                  <Image width={1920} height={1080} src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
                 </p>
               )}
             </div>