diff --git a/app/[locale]/image/detail/[slug]/page.tsx b/app/[locale]/image/detail/[slug]/page.tsx
new file mode 100644
index 00000000..14724d8f
--- /dev/null
+++ b/app/[locale]/image/detail/[slug]/page.tsx
@@ -0,0 +1,243 @@
+"use client";
+import { Card, CardContent } from "@/components/ui/card";
+import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Textarea } from "@/components/ui/textarea";
+import Link from "next/link";
+import { usePathname, useRouter } from "next/navigation";
+import React, { useState } from "react";
+
+const dummyImage = [
+  { id: 1, thumbnail: "/assets/banner-sample.png" },
+  { id: 2, thumbnail: "https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=125&currentMilis=1732769540018" },
+  { id: 3, thumbnail: "https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=128&currentMilis=1732769540018" },
+  { id: 4, thumbnail: "https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=127&currentMilis=1732769540018" },
+  { id: 5, thumbnail: "https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=93&currentMilis=1732769540018" },
+];
+
+const DetailInfo = () => {
+  const [selectedSize, setSelectedSize] = useState<string>("L");
+  const [selectedTab, setSelectedTab] = useState("video");
+  const router = useRouter();
+  const pathname = usePathname();
+
+  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" },
+  ];
+
+  return (
+    <div className="min-h-screen p-4 md:p-8">
+      {/* Container Utama */}
+      <div className="rounded-md overflow-hidden md:flex">
+        {/* Bagian Kiri */}
+        <div className="md:w-2/3">
+          {/* Gambar Utama */}
+          <div className="relative">
+            <img src="https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=93&currentMilis=1732769540018" alt="Main" className="w-full" />
+            <div className="absolute top-4 left-4"></div>
+          </div>
+
+          {/* Thumbnail */}
+          <div className="p-4 grid grid-cols-4 gap-2">
+            {[1, 2, 3, 4].map((_, index) => (
+              <img
+                key={index}
+                src="https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=93&currentMilis=1732769540018"
+                alt={`Thumbnail ${index + 1}`}
+                className="w-full h-16 object-cover rounded-md cursor-pointer hover:ring-2 hover:ring-red-600"
+              />
+            ))}
+          </div>
+        </div>
+
+        {/* Bagian Kanan */}
+        <div className="md:w-1/3 p-4 bg-gray-300 rounded-lg mx-4">
+          <div className="flex flex-col mb-3 items-center justify-center cursor-pointer">
+            <svg xmlns="http://www.w3.org/2000/svg" width="2.5em" height="2.5em" viewBox="0 0 24 24">
+              <path fill="black" d="m17 18l-5-2.18L7 18V5h10m0-2H7a2 2 0 0 0-2 2v16l7-3l7 3V5a2 2 0 0 0-2-2" />
+            </svg>
+            <p className="text-base lg:text-lg">Simpan</p>
+          </div>
+          {/* garis */}
+          <div className="border-t border-black my-4"></div>
+
+          <Link href="" className="bg-red-600 text-white text-xs font-bold px-3 py-3 my-3 flex justify-center items-center rounded">
+            OPS MANTAP PRAJA & PILKADA 2024
+          </Link>
+
+          <div className="flex justify-center flex-wrap gap-2 mb-4">
+            <p className="bg-gray-200 text-gray-700 text-xs px-3 py-1 rounded-full cursor-pointer hover:bg-gray-500">poldajabar</p>
+            <p className="bg-gray-200 text-gray-700 text-xs px-3 py-1 rounded-full cursor-pointer hover:bg-gray-500">pilkadamai2024</p>
+          </div>
+
+          <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>
+
+          <div className="border-t border-black my-4"></div>
+
+          <div className="space-y-2">
+            {sizes.map((size) => (
+              <label key={size.label} className="flex items-center space-x-2 cursor-pointer">
+                <input type="radio" name="size" value={size.label} checked={selectedSize === size.label} onChange={() => setSelectedSize(size.label)} className="text-red-600 focus:ring-red-600" />
+                <div className="text-sm">
+                  {size.label} ---------------------------------------- {size.value}
+                </div>
+              </label>
+            ))}
+          </div>
+
+          {/* Download Semua */}
+          <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" />
+              <span>Download Semua File?</span>
+            </label>
+          </div>
+
+          {/* Tombol Download */}
+          <button className="mt-4 bg-red-600 text-white w-full py-2 flex justify-center items-center gap-1 rounded-md text-sm hover:bg-red-700">
+            <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
+          </button>
+        </div>
+      </div>
+
+      {/* Footer Informasi */}
+      <div className="p-4 text-sm text-gray-500 flex justify-between items-center border-t mt-4">
+        <p className="items-end">
+          oleh <span className="font-semibold text-black">MABES POLRI</span> | Diupdate pada 29/11/2024 11:15 WIB | 👁️ 65
+        </p>
+        <p>Kreator: poppy-PID-poldajabar</p>
+      </div>
+
+      {/* Keterangan */}
+      <div className="md:w-2/3">
+        <h1 className="flex flex-row font-bold text-2xl mx-5 my-8">Kotak Suara Bogor Tengah Dipastikan Aman Pasca Pencoblosan</h1>
+        <p className="flex justify-center text-center">
+          Kotak Suara Bogor Tengah Dipastikan Aman Pasca Pencoblosan Kota Bogot - Kapolresta Bogor Kota Kombes Bismo Teguh Prakoso melaksanakan pengecekan gudang logistik PPK Bogor Tengah di Gedung Wanita Jl. Jend. Soedirman Kota Bogor,
+          Kamis (28/11/2024). "Pengecekan ini untuk memastikan bahwa proses pergeseran Kotak Suara ke Kecamatan berjalan aman dan lancar serta situasi pasca pencoblosan kondusif dan proses pengiriman logistik pemilu 2024 dari PPS ke Gudang
+          penyimpanan Logistik PPK Bogor Tengah sudah selesai lengkap, lancar dan aman," ucapnya. Selanjutnya kotak suara di gudang Penyimpanan Logistik PPK dilakukan pengamanan selama 1x24 jam dari Personel Polsek Bogor Tengah. Kapolesta
+          Bogor Kota juga menekankan kepada personel yang berjaga di Gudang Logistik agar benar-benar memperhatikan keamanan kotak suara guna mengantisipasi adanya sabotase. "Dalam pengecekan tersebut ada beberapa hal yang di tekankan
+          diantaranya pada saat penghitungan yang masuk ke dalam ruangan wajib menggunakan id card, lembaran blangko yang sudah tidak terpakai harap di simpan dengan baik, pastikan kotak suara dalam keadaan aman dan lakukan patroli rutin di
+          sekitar gudang serta tetap waspada dan jaga kesehatan," pungkasnya.
+        </p>
+      </div>
+
+      {/* Comment */}
+      <div className="flex flex-col my-16 gap-5 p-10 bg-gray-300">
+        <p className="flex items-start text-lg">Berikan Komentar</p>
+        <Textarea placeholder="Type your comments here." className="flex items-start justify-center" />
+        <button className="flex items-start bg-[#bb3523] rounded-lg w-fit px-4 py-1">Kirim</button>
+      </div>
+
+      {/* Konten Serupa */}
+      <div className="w-full">
+        <div className="space-x-5 flex flex-col p-4">
+          <div className="flex px-10 flex-col lg:flex-row gap-5 mb-4">
+            <h2 className="flex items-center text-sm lg:text-xl font-bold bg-[#bb3523] px-4 py-1 rounded-lg text-white">
+              <span className="text-black ">Konten </span> Serupa
+            </h2>
+            <Tabs value={selectedTab} onValueChange={setSelectedTab}>
+              <TabsList>
+                <TabsTrigger value="video" className="relative text-sm md:text-xl font-bold text-black dark:bg-transparent before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary">
+                  Audio Visual
+                </TabsTrigger>
+                <TabsTrigger value="audio" className="relative text-sm md:text-xl font-bold text-black dark:bg-transparent before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary">
+                  Audio
+                </TabsTrigger>
+                <TabsTrigger value="image" className="relative text-sm md:text-xl font-bold text-black dark:bg-transparent before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary">
+                  Foto
+                </TabsTrigger>
+                <TabsTrigger value="teks" className="relative text-sm md:text-xl font-bold text-black dark:bg-transparent before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary">
+                  Teks
+                </TabsTrigger>
+              </TabsList>
+            </Tabs>
+          </div>
+          <div className="px-10">
+            {selectedTab == "video" ? (
+              <Carousel>
+                <CarouselContent>
+                  {dummyImage.map((image) => (
+                    <CarouselItem key={image.id} className="md:basis-1/2 lg:basis-1/3">
+                      <Card>
+                        <CardContent className="flex items-center justify-center">
+                          <img src={image.thumbnail} className="h-60 object-cover w-full cursor-pointer" />
+                        </CardContent>
+                      </Card>
+                    </CarouselItem>
+                  ))}
+                </CarouselContent>
+                <CarouselPrevious />
+                <CarouselNext />
+              </Carousel>
+            ) : selectedTab == "audio" ? (
+              <Carousel>
+                <CarouselContent>
+                  {dummyImage.map((image) => (
+                    <CarouselItem key={image.id} className="md:basis-1/2 lg:basis-1/3">
+                      <Card>
+                        <CardContent className="flex items-center justify-center">
+                          <img src={image.thumbnail} className="h-60 object-cover w-full cursor-pointer" />
+                        </CardContent>
+                      </Card>
+                    </CarouselItem>
+                  ))}
+                </CarouselContent>
+                <CarouselPrevious />
+                <CarouselNext />
+              </Carousel>
+            ) : selectedTab == "image" ? (
+              <Carousel>
+                <CarouselContent>
+                  {dummyImage.map((image) => (
+                    <CarouselItem key={image.id} className="md:basis-1/2 lg:basis-1/3">
+                      <Card onClick={() => router.push(`${pathname}/image/detail/${image.id}`)}>
+                        <CardContent className="flex items-center justify-center">
+                          <img src={image.thumbnail} className="h-60 object-cover w-full cursor-pointer" />
+                        </CardContent>
+                      </Card>
+                    </CarouselItem>
+                  ))}
+                </CarouselContent>
+                <CarouselPrevious />
+                <CarouselNext />
+              </Carousel>
+            ) : (
+              <Carousel>
+                <CarouselContent>
+                  {dummyImage.map((image) => (
+                    <CarouselItem key={image.id} className="md:basis-1/2 lg:basis-1/3">
+                      <Card>
+                        <CardContent>
+                          <img src={image.thumbnail} className="h-60 object-cover w-full cursor-pointer" />
+                        </CardContent>
+                      </Card>
+                    </CarouselItem>
+                  ))}
+                </CarouselContent>
+                <CarouselPrevious />
+                <CarouselNext />
+              </Carousel>
+            )}
+          </div>
+        </div>
+        <div className="flex items-center flex-row justify-center">
+          <Link href="#" className="border text-[#bb3523] text-sm lg:text-md px-4 py-1 border-[#bb3523]">
+            LIHAT SEMUA
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default DetailInfo;
diff --git a/app/[locale]/image/filter/page.tsx b/app/[locale]/image/filter/page.tsx
new file mode 100644
index 00000000..842c70c8
--- /dev/null
+++ b/app/[locale]/image/filter/page.tsx
@@ -0,0 +1,125 @@
+"use client";
+import React, { useState } from "react";
+import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from "@/components/ui/pagination";
+import { Card, CardContent } from "@/components/ui/card";
+
+const dummyImage = [
+  { id: 1, thumbnail: "/assets/banner-sample.png" },
+  { id: 2, thumbnail: "https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=125&currentMilis=1732769540018" },
+  { id: 3, thumbnail: "https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=128&currentMilis=1732769540018" },
+  { id: 4, thumbnail: "https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=127&currentMilis=1732769540018" },
+  { id: 5, thumbnail: "https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=93&currentMilis=1732769540018" },
+  { id: 6, thumbnail: "https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=93&currentMilis=1732769540018" },
+];
+
+const FilterPage = () => {
+  const [selectedTab, setSelectedTab] = useState("video");
+
+  return (
+    <div className="flex flex-col">
+      {/* Header */}
+      <div className="flex flex-col md:flex-row items-start gap-5 p-10 bg-gray-200">
+        <p>
+          {" "}
+          Foto {">"} <span className="font-bold">Semua Foto</span>
+        </p>
+        <p className="font-bold">|</p>
+        <p>Terdapat 32499 artikel berisi Foto yang dapat diunduh </p>
+      </div>
+      {/* Left */}
+      <div className="flex flex-col lg:flex-row gap-6 p-4">
+        {/* Sidebar Kiri */}
+        <div className="lg:w-1/4 w-full bg-white p-4 rounded-lg shadow-md">
+          <h2 className="text-lg font-semibold mb-4">Filter</h2>
+          <div className="space-y-6">
+            {/* Pencarian */}
+            <div>
+              <label htmlFor="search" className="block text-sm font-medium text-gray-700">
+                Pencarian
+              </label>
+              <input type="text" id="search" placeholder="Cari judul..." className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500" />
+            </div>
+
+            {/* Tahun & Bulan */}
+            <div>
+              <label htmlFor="month" className="block text-sm font-medium text-gray-700">
+                Tahun & Bulan
+              </label>
+              <input type="month" id="month" className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500" />
+            </div>
+
+            {/* Tanggal */}
+            <div>
+              <label htmlFor="date" className="block text-sm font-medium text-gray-700">
+                Tanggal
+              </label>
+              <input type="date" id="date" className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500" />
+            </div>
+
+            {/* Kategori */}
+            <div>
+              <h3 className="text-sm font-medium text-gray-700">Kategori</h3>
+              <ul className="mt-2 space-y-2">
+                {["HUT HUMAS KE - 73", "OPERASI ZEBRA 2024", "PON XXI", "OPS LILIN NATARU 2024", "HUT HUMAS KE - 72", "OPS MANTAP PRAJA & PILKADA"].map((category) => (
+                  <li key={category}>
+                    <label className="inline-flex items-center">
+                      <input type="checkbox" className="form-checkbox text-red-500 rounded" />
+                      <span className="ml-2 text-gray-700">{category}</span>
+                    </label>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          </div>
+        </div>
+
+        {/* Konten Kanan */}
+        <div className="flex-1">
+          <div className="flex justify-between items-center mb-4">
+            <h2 className="text-lg font-semibold">Urutkan berdasarkan</h2>
+            <select className="border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500">
+              <option value="terbaru">Terbaru</option>
+              <option value="terlama">Terlama</option>
+            </select>
+          </div>
+
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+            {dummyImage.map((image) => (
+              <Card key={image.id} className="md:basis-1/2 lg:basis-1/3">
+                <CardContent className="flex items-center justify-center">
+                  <img src={image.thumbnail} className="h-60 object-cover w-full cursor-pointer" />
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        </div>
+      </div>
+      <Pagination className="p-3">
+        <PaginationContent>
+          <PaginationItem>
+            <PaginationPrevious href="#" />
+          </PaginationItem>
+          <PaginationItem>
+            <PaginationLink href="#">1</PaginationLink>
+          </PaginationItem>
+          <PaginationItem>
+            <PaginationLink href="#" isActive>
+              2
+            </PaginationLink>
+          </PaginationItem>
+          <PaginationItem>
+            <PaginationLink href="#">3</PaginationLink>
+          </PaginationItem>
+          <PaginationItem>
+            <PaginationEllipsis />
+          </PaginationItem>
+          <PaginationItem>
+            <PaginationNext href="#" />
+          </PaginationItem>
+        </PaginationContent>
+      </Pagination>
+    </div>
+  );
+};
+
+export default FilterPage;
diff --git a/app/[locale]/layout.tsx b/app/[locale]/layout.tsx
index c48559a8..f07c46e2 100644
--- a/app/[locale]/layout.tsx
+++ b/app/[locale]/layout.tsx
@@ -1,18 +1,20 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";
-import "./theme.css"
+import "./theme.css";
 import { ThemeProvider } from "@/providers/theme-provider";
 import MountedProvider from "@/providers/mounted.provider";
-import { Toaster } from '@/components/ui/toaster'
-import { Toaster as SonnerToaster } from "@/components/ui/sonner"
+import { Toaster } from "@/components/ui/toaster";
+import { Toaster as SonnerToaster } from "@/components/ui/sonner";
 const inter = Inter({ subsets: ["latin"] });
-// language 
-import { getLangDir } from 'rtl-detect';
-import { NextIntlClientProvider } from 'next-intl';
-import { getMessages } from 'next-intl/server';
+// language
+import { getLangDir } from "rtl-detect";
+import { NextIntlClientProvider } from "next-intl";
+import { getMessages } from "next-intl/server";
 import DirectionProvider from "@/providers/direction-provider";
 import AuthProvider from "@/providers/auth.provider";
+import Navbar from "@/components/landing-page/Navbar";
+import Footer from "@/components/landing-page/Footer";
 
 export const metadata: Metadata = {
   title: "Dashcode admin Template",
@@ -26,7 +28,6 @@ export default async function RootLayout({
   children: React.ReactNode;
   params: { locale: string };
 }>) {
-
   const messages = await getMessages();
   const direction = getLangDir(locale);
   return (
@@ -34,15 +35,13 @@ export default async function RootLayout({
       <body className={`${inter.className} dashcode-app`}>
         <NextIntlClientProvider messages={messages} locale={locale}>
           <AuthProvider>
-            <ThemeProvider attribute="class"
-
-              defaultTheme="light">
+            <ThemeProvider attribute="class" defaultTheme="light">
               <MountedProvider>
-
                 <DirectionProvider direction={direction}>
+                  <Navbar />
                   {children}
+                  <Footer />
                 </DirectionProvider>
-
               </MountedProvider>
               <Toaster />
               <SonnerToaster />
diff --git a/app/[locale]/page.tsx b/app/[locale]/page.tsx
index 7f532bad..e8c85818 100644
--- a/app/[locale]/page.tsx
+++ b/app/[locale]/page.tsx
@@ -13,15 +13,12 @@ import Footer from "@/components/landing-page/Footer";
 const Home = ({ params: { locale } }: { params: { locale: string } }) => {
   return (
     <>
-      <Navbar />
       <Hero />
       <SearchSection />
       <KontenTerbaru />
       <KontenTerpopuler />
       <KategoriKonten />
       <LiputanWilayah />
-      <Footer />
-     
     </>
   );
 };
diff --git a/components/landing-page/KontenTerbaru.tsx b/components/landing-page/KontenTerbaru.tsx
index 4598ba72..42a03b16 100644
--- a/components/landing-page/KontenTerbaru.tsx
+++ b/components/landing-page/KontenTerbaru.tsx
@@ -3,6 +3,7 @@ import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel";
 import { Card, CardContent } from "../ui/card";
 import Link from "next/link";
+import { usePathname, useRouter } from "next/navigation";
 
 const dummyImage = [
   { id: 1, thumbnail: "/assets/banner-sample.png" },
@@ -14,6 +15,8 @@ const dummyImage = [
 
 const KontenTerbaru = () => {
   const [selectedTab, setSelectedTab] = useState("video");
+  const router = useRouter();
+  const pathname = usePathname();
 
   return (
     <div className="w-full">
@@ -47,7 +50,7 @@ const KontenTerbaru = () => {
                   <CarouselItem key={image.id} className="md:basis-1/2 lg:basis-1/3">
                     <Card>
                       <CardContent className="flex items-center justify-center">
-                        <img src={image.thumbnail} className="h-60 object-cover w-full" />
+                        <img src={image.thumbnail} className="h-60 object-cover w-full cursor-pointer" />
                       </CardContent>
                     </Card>
                   </CarouselItem>
@@ -63,7 +66,7 @@ const KontenTerbaru = () => {
                   <CarouselItem key={image.id} className="md:basis-1/2 lg:basis-1/3">
                     <Card>
                       <CardContent className="flex items-center justify-center">
-                        <img src={image.thumbnail} className="h-60 object-cover w-full" />
+                        <img src={image.thumbnail} className="h-60 object-cover w-full cursor-pointer" />
                       </CardContent>
                     </Card>
                   </CarouselItem>
@@ -77,9 +80,9 @@ const KontenTerbaru = () => {
               <CarouselContent>
                 {dummyImage.map((image) => (
                   <CarouselItem key={image.id} className="md:basis-1/2 lg:basis-1/3">
-                    <Card>
+                    <Card onClick={() => router.push(`${pathname}/image/detail/${image.id}`)}>
                       <CardContent className="flex items-center justify-center">
-                        <img src={image.thumbnail} className="h-60 object-cover w-full" />
+                        <img src={image.thumbnail} className="h-60 object-cover w-full cursor-pointer" />
                       </CardContent>
                     </Card>
                   </CarouselItem>
@@ -95,7 +98,7 @@ const KontenTerbaru = () => {
                   <CarouselItem key={image.id} className="md:basis-1/2 lg:basis-1/3">
                     <Card>
                       <CardContent>
-                        <img src={image.thumbnail} className="h-60 object-cover w-full" />
+                        <img src={image.thumbnail} className="h-60 object-cover w-full cursor-pointer" />
                       </CardContent>
                     </Card>
                   </CarouselItem>
diff --git a/components/landing-page/KontenTerpopuler.tsx b/components/landing-page/KontenTerpopuler.tsx
index fd28c442..bfb31a1b 100644
--- a/components/landing-page/KontenTerpopuler.tsx
+++ b/components/landing-page/KontenTerpopuler.tsx
@@ -47,7 +47,7 @@ const KontenTerpopuler = () => {
                   <CarouselItem key={image.id} className="md:basis-1/2 lg:basis-1/3">
                     <Card>
                       <CardContent className="flex items-center justify-center">
-                        <img src={image.thumbnail} className="h-60 object-cover w-full" />
+                        <img src={image.thumbnail} className="h-60 object-cover w-full cursor-pointer" />
                       </CardContent>
                     </Card>
                   </CarouselItem>
@@ -63,7 +63,7 @@ const KontenTerpopuler = () => {
                   <CarouselItem key={image.id} className="md:basis-1/2 lg:basis-1/3">
                     <Card>
                       <CardContent className="flex items-center justify-center">
-                        <img src={image.thumbnail} className="h-60 object-cover w-full" />
+                        <img src={image.thumbnail} className="h-60 object-cover w-full cursor-pointer" />
                       </CardContent>
                     </Card>
                   </CarouselItem>
@@ -79,7 +79,7 @@ const KontenTerpopuler = () => {
                   <CarouselItem key={image.id} className="md:basis-1/2 lg:basis-1/3">
                     <Card>
                       <CardContent className="flex items-center justify-center">
-                        <img src={image.thumbnail} className="h-60 object-cover w-full" />
+                        <img src={image.thumbnail} className="h-60 object-cover w-full cursor-pointer" />
                       </CardContent>
                     </Card>
                   </CarouselItem>
@@ -95,7 +95,7 @@ const KontenTerpopuler = () => {
                   <CarouselItem key={image.id} className="md:basis-1/2 lg:basis-1/3">
                     <Card>
                       <CardContent>
-                        <img src={image.thumbnail} className="h-60 object-cover w-full" />
+                        <img src={image.thumbnail} className="h-60 object-cover w-full cursor-pointer" />
                       </CardContent>
                     </Card>
                   </CarouselItem>
diff --git a/components/landing-page/Navbar.tsx b/components/landing-page/Navbar.tsx
index 6c5b604b..90b95412 100644
--- a/components/landing-page/Navbar.tsx
+++ b/components/landing-page/Navbar.tsx
@@ -5,9 +5,12 @@ import ThemeSwitcher from "@/components/partials/header/theme-switcher";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../ui/dropdown-menu";
 import Link from "next/link";
 import { FiFile, FiImage, FiMusic, FiYoutube } from "react-icons/fi";
+import { usePathname, useRouter } from "next/navigation";
 
 const Navbar = () => {
   const [menuOpen, setMenuOpen] = useState(false);
+  const router = useRouter();
+  const pathname = usePathname();
 
   return (
     <div className="bg-white dark:bg-black shadow-md">
@@ -52,7 +55,7 @@ const Navbar = () => {
                   Audio
                 </span>
               </DropdownMenuItem>
-              <DropdownMenuItem className="flex items-center gap-1.5 p-2 border-b text-default-600 group focus:bg-default focus:text-primary-foreground rounded-none group">
+              <DropdownMenuItem onClick={() => router.push(`${pathname}/image/filter`)} className="flex items-center gap-1.5 p-2 border-b text-default-600 group focus:bg-default focus:text-primary-foreground rounded-none group">
                 <span className="text-default-700 flex flex-row justify-center items-center group-hover:text-primary-foreground">
                   <FiImage className="mr-2" />
                   Foto
diff --git a/components/landing-page/SearchSection.tsx b/components/landing-page/SearchSection.tsx
index 3d7b16c0..2f7fa959 100644
--- a/components/landing-page/SearchSection.tsx
+++ b/components/landing-page/SearchSection.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../ui/dropdown-menu";
 import { FiFile, FiImage, FiMusic, FiYoutube } from "react-icons/fi";
 
-const SearchSection: React.FC = () => {
+const SearchSection = () => {
   return (
     <section className="w-full py-8 px-4 bg-white">
       <div className="max-w-screen-lg mx-auto text-center">
diff --git a/components/partials/header/theme-switcher.tsx b/components/partials/header/theme-switcher.tsx
index 65069880..3168ea53 100644
--- a/components/partials/header/theme-switcher.tsx
+++ b/components/partials/header/theme-switcher.tsx
@@ -4,84 +4,69 @@ import * as React from "react";
 import { useTheme } from "next-themes";
 import { hexToRGB } from "@/lib/utils";
 import { Button } from "@/components/ui/button";
-import {
-    DropdownMenu,
-    DropdownMenuContent,
-    DropdownMenuItem,
-    DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { Moon, Sun } from "lucide-react"
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
+import { Moon, Sun } from "lucide-react";
 import { Check } from "lucide-react";
 import { cn } from "@/lib/utils";
-import { Icon } from "@/components/ui/icon"
+import { Icon } from "@/components/ui/icon";
 
 const ThemeButton = () => {
-    const { theme, setTheme } = useTheme();
-    return (
-        <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-                <Button size="icon" rounded="full" className=" md:bg-secondary bg-transparent  text-secondary-foreground hover:ring-0  md:h-8 md:w-8 h-auto w-auto text-default-900 hover:bg-secondary hover:ring-offset-0">
-                    <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0 " />
-                    <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
-                    <span className="sr-only">Toggle theme</span>
-                </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end" className="p-2">
-                <DropdownMenuItem
-                    onClick={() => setTheme("light")}
-                    className={cn(
-                        "p-2 font-medium text-sm text-default-600 cursor-pointer mb-[2px] ",
-                        {
-                            "bg-default text-default-foreground": theme === "light",
-                        }
-                    )}
-                >
-                    <Icon icon="heroicons-outline:sun" className="w-5 h-5 me-2" />
-                    <span className="me-2">Light</span>
-                    <Check
-                        className={cn("w-4 h-4 flex-none ms-auto ", {
-                            hidden: theme !== "light",
-                        })}
-                    />
-                </DropdownMenuItem>
-                <DropdownMenuItem
-                    onClick={() => setTheme("dark")}
-                    className={cn(
-                        "p-2 font-medium text-sm text-default-600 hover:bg-default hover:text-default-foreground  dark:hover:bg-background cursor-pointer mb-[2px]",
-                        {
-                            "bg-default text-default-foreground": theme === "dark",
-                        }
-                    )}
-                >
-
-                    <Icon icon="heroicons-outline:moon" className="w-5 h-5 me-2" />
-                    <span className="me-2">Dark</span>
-                    <Check
-                        className={cn("w-4 h-4 flex-none ms-auto text-default-700", {
-                            hidden: theme !== "dark",
-                        })}
-                    />
-                </DropdownMenuItem>
-                <DropdownMenuItem
-                    onClick={() => setTheme("system")}
-                    className={cn(
-                        "p-2 font-medium text-sm text-default-600 hover:bg-default hover:text-default-foreground  dark:hover:bg-background cursor-pointer mb-[2px]",
-                        {
-                            "bg-default text-default-foreground": theme === "system",
-                        }
-                    )}
-                >
-                    <Icon icon="heroicons:computer-desktop" className="w-5 h-5 me-2" />
-                    <span className="me-2">system</span>
-                    <Check
-                        className={cn("w-4 h-4 flex-none ms-auto text-default-700", {
-                            hidden: theme !== "system",
-                        })}
-                    />
-                </DropdownMenuItem>
-            </DropdownMenuContent>
-        </DropdownMenu>
-    );
+  const { theme, setTheme } = useTheme();
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button size="icon" rounded="full" className=" md:bg-transparent bg-transparent  text-secondary-foreground hover:ring-0  md:h-8 md:w-8 h-auto w-auto text-default-900 hover:bg-secondary hover:ring-offset-0">
+          <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0 " />
+          <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+          <span className="sr-only">Toggle theme</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="p-2">
+        <DropdownMenuItem
+          onClick={() => setTheme("light")}
+          className={cn("p-2 font-medium text-sm text-default-600 cursor-pointer mb-[2px] ", {
+            "bg-default text-default-foreground": theme === "light",
+          })}
+        >
+          <Icon icon="heroicons-outline:sun" className="w-5 h-5 me-2" />
+          <span className="me-2">Light</span>
+          <Check
+            className={cn("w-4 h-4 flex-none ms-auto ", {
+              hidden: theme !== "light",
+            })}
+          />
+        </DropdownMenuItem>
+        <DropdownMenuItem
+          onClick={() => setTheme("dark")}
+          className={cn("p-2 font-medium text-sm text-default-600 hover:bg-default hover:text-default-foreground  dark:hover:bg-background cursor-pointer mb-[2px]", {
+            "bg-default text-default-foreground": theme === "dark",
+          })}
+        >
+          <Icon icon="heroicons-outline:moon" className="w-5 h-5 me-2" />
+          <span className="me-2">Dark</span>
+          <Check
+            className={cn("w-4 h-4 flex-none ms-auto text-default-700", {
+              hidden: theme !== "dark",
+            })}
+          />
+        </DropdownMenuItem>
+        <DropdownMenuItem
+          onClick={() => setTheme("system")}
+          className={cn("p-2 font-medium text-sm text-default-600 hover:bg-default hover:text-default-foreground  dark:hover:bg-background cursor-pointer mb-[2px]", {
+            "bg-default text-default-foreground": theme === "system",
+          })}
+        >
+          <Icon icon="heroicons:computer-desktop" className="w-5 h-5 me-2" />
+          <span className="me-2">system</span>
+          <Check
+            className={cn("w-4 h-4 flex-none ms-auto text-default-700", {
+              hidden: theme !== "system",
+            })}
+          />
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
 };
 
 export default ThemeButton;