diff --git a/components/landing-page/search-section-polda.tsx b/components/landing-page/search-section-polda.tsx
index a52b9c0a..f8191633 100644
--- a/components/landing-page/search-section-polda.tsx
+++ b/components/landing-page/search-section-polda.tsx
@@ -12,14 +12,26 @@ import EventCalender from "./event-calender";
 import UserSurveyBox from "./survey-box";
 import ScrollableContentPolda from "./scrollable-content-polda";
 import AdvertisementPlacements from "./advertisement-placements";
+import { useTheme } from "next-themes";
 
 const SearchSectionPolda = () => {
   const [contentType, setContentType] = useState("all");
   const [search, setSearch] = useState("");
   const router = useRouter();
   const t = useTranslations("LandingPage");
+  const { theme } = useTheme();
+  
+  // Determine background image based on theme
+  const getBackgroundImage = () => {
+    if (theme === "dark") {
+      return "url('/assets/background-dark.jpg')";
+    } else {
+      return "url('/assets/background-white.jpg')";
+    }
+  };
+
   return (
-    <div className="flex w-full min-h-screen bg-center bg-cover bg-no-repeat" style={{ backgroundImage: "url('/assets/background.png')" }}>
+    <div className="flex w-full min-h-screen bg-center bg-cover bg-no-repeat" style={{ backgroundImage: getBackgroundImage() }}>
       <div className="hidden xl:block w-[15%] pr-4 py-5 sticky top-[150px] space-y-4 self-start">
         <AdvertisementPlacements placement="left"/>
       </div>
diff --git a/components/landing-page/search-section-satker.tsx b/components/landing-page/search-section-satker.tsx
index 8b673b54..a5b4c936 100644
--- a/components/landing-page/search-section-satker.tsx
+++ b/components/landing-page/search-section-satker.tsx
@@ -13,14 +13,27 @@ import UserSurveyBox from "./survey-box";
 import ScrollableContentPolda from "./scrollable-content-polda";
 import ScrollableContentSatker from "./scrollable-content-satker";
 import AdvertisementPlacements from "./advertisement-placements";
+import { useTheme } from "next-themes";
 
 const SearchSectionSatker = () => {
   const [contentType, setContentType] = useState("all");
   const [search, setSearch] = useState("");
   const router = useRouter();
   const t = useTranslations("LandingPage");
+
+  const { theme } = useTheme();
+  
+  // Determine background image based on theme
+  const getBackgroundImage = () => {
+    if (theme === "dark") {
+      return "url('/assets/background-dark.jpg')";
+    } else {
+      return "url('/assets/background-white.jpg')";
+    }
+  };
+  
   return (
-    <div className="flex w-full min-h-screen bg-center bg-cover bg-no-repeat" style={{ backgroundImage: "url('/assets/background.png')" }}>
+    <div className="flex w-full min-h-screen bg-center bg-cover bg-no-repeat" style={{ backgroundImage: getBackgroundImage() }}>
       <div className="hidden xl:block w-[15%] pr-4 py-5 sticky top-[150px] space-y-4 self-start">
         <AdvertisementPlacements placement="left"/>
       </div>
diff --git a/components/landing-page/search-section.tsx b/components/landing-page/search-section.tsx
index acca5827..89ef5b7f 100644
--- a/components/landing-page/search-section.tsx
+++ b/components/landing-page/search-section.tsx
@@ -11,6 +11,7 @@ import { useTranslations } from "next-intl";
 import { useRouter } from "next/navigation";
 import router from "next/router";
 import React, { useState } from "react";
+import { useTheme } from "next-themes";
 import ScrollableContent from "./search-section-new";
 import NewContent from "./new-content";
 import ContentCategory from "./content-category";
@@ -24,10 +25,21 @@ const SearchSection = () => {
   const [search, setSearch] = useState("");
   const router = useRouter();
   const t = useTranslations("LandingPage");
+  const { theme } = useTheme();
+  
+  // Determine background image based on theme
+  const getBackgroundImage = () => {
+    if (theme === "dark") {
+      return "url('/assets/background-dark.jpg')";
+    } else {
+      return "url('/assets/background-white.jpg')";
+    }
+  };
+
   return (
     <div
       className="flex w-full min-h-screen bg-center bg-cover bg-no-repeat"
-      style={{ backgroundImage: "url('/assets/background.png')" }}
+      style={{ backgroundImage: getBackgroundImage() }}
     >
       <div className="hidden xl:block w-[15%] pr-4 py-5 sticky top-[130px] space-y-4 self-start">
         <AdvertisementPlacements placement="left"/>
diff --git a/public/assets/background-dark.jpg b/public/assets/background-dark.jpg
new file mode 100644
index 00000000..083f5350
Binary files /dev/null and b/public/assets/background-dark.jpg differ
diff --git a/public/assets/background-white.jpg b/public/assets/background-white.jpg
new file mode 100644
index 00000000..6e0ed904
Binary files /dev/null and b/public/assets/background-white.jpg differ