diff --git a/app/components/navbar.jsx b/app/components/navbar.jsx
index 82e8ae4..1d53365 100644
--- a/app/components/navbar.jsx
+++ b/app/components/navbar.jsx
@@ -244,12 +244,12 @@ const handleLogout = async () => {
     return () => window.removeEventListener("scroll", handleScroll);
   }, []);
 
-  // Toggle theme and save to localStorage
   const toggleTheme = () => {
     const newTheme = theme === "light" ? "dark" : "light";
     setTheme(newTheme);
     localStorage.setItem("theme", newTheme);
     document.documentElement.classList.toggle("dark", newTheme === "dark");
+    window.dispatchEvent(new Event("themeChange"));
   };
 
   // Close mobile menu
diff --git a/app/components/navbarinner.jsx b/app/components/navbarinner.jsx
index 31653ed..b72e173 100644
--- a/app/components/navbarinner.jsx
+++ b/app/components/navbarinner.jsx
@@ -22,6 +22,7 @@ export default function Navbar() {
     setTheme(newTheme);
     localStorage.setItem('theme', newTheme);
     document.documentElement.classList.toggle('dark', newTheme === 'dark');
+    window.dispatchEvent(new Event('themeChange'));
   };
 
   const handleLogout = async () => {
diff --git a/app/visualizer/searching/binarysearch/content.jsx b/app/visualizer/searching/binarysearch/content.jsx
index 9c1c214..0f04e7f 100644
--- a/app/visualizer/searching/binarysearch/content.jsx
+++ b/app/visualizer/searching/binarysearch/content.jsx
@@ -1,7 +1,29 @@
 "use client";
 import ComplexityGraph from "@/app/components/ui/graph";
+import { useEffect, useState } from "react";
 
 const content = () => {
+  const [theme, setTheme] = useState('light');
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    const updateTheme = () => {
+      const savedTheme = localStorage.getItem('theme') || 'light';
+      setTheme(savedTheme);
+    };
+
+    updateTheme();
+    setMounted(true);
+
+    window.addEventListener('storage', updateTheme);
+    window.addEventListener('themeChange', updateTheme);
+
+    return () => {
+      window.removeEventListener('storage', updateTheme);
+      window.removeEventListener('themeChange', updateTheme);
+    };
+  }, []);
+
   const paragraphs = [
     `Binary Search is an efficient algorithm for finding an item in a sorted list. It works by repeatedly dividing the search interval in half. If the target value is less than the middle element, the search continues in the lower half. Otherwise, it continues in the upper half. This process repeats until the value is found.`,
     `If the number is not in the list (e.g., searching for 8), the search ends when the subarray becomes empty.`,
@@ -42,12 +64,19 @@ const content = () => {
     <main className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-5 md:gap-4">
       <div className="col-span-1">
         <div className="hidden md:block">
-          <iframe
-            src="https://hw.glich.co/resources/embed/daily/dsa"
-            width="100%"
-            height="400"
-            title="Daily DSA Challenge"
-          ></iframe>
+          {mounted && (
+            <iframe
+              key={theme}
+              src={
+                theme === "dark"
+                  ? "https://hw.glich.co/resources/embed/daily/dsa?theme=dark"
+                  : "https://hw.glich.co/resources/embed/daily/dsa?theme=light"
+              }
+              width="100%"
+              height="400"
+              title="Daily DSA Challenge"
+            ></iframe>
+          )}
         </div>
         <div className="flex justify-center">
           <span className="text-xs hidden md:block">
diff --git a/app/visualizer/searching/linearsearch/animation.jsx b/app/visualizer/searching/linearsearch/animation.jsx
index 5510af8..76544ce 100644
--- a/app/visualizer/searching/linearsearch/animation.jsx
+++ b/app/visualizer/searching/linearsearch/animation.jsx
@@ -151,7 +151,7 @@ const LinearSearch = () => {
             className="block text-gray-700 dark:text-gray-300 mb-2"
             htmlFor="arrayElements"
           >
-            Array Elements (comma-separated)
+            Array Elements
           </label>
           <div className="flex gap-2">
             <input
diff --git a/app/visualizer/searching/linearsearch/content.jsx b/app/visualizer/searching/linearsearch/content.jsx
index e6b5f9c..ef48d83 100644
--- a/app/visualizer/searching/linearsearch/content.jsx
+++ b/app/visualizer/searching/linearsearch/content.jsx
@@ -1,7 +1,29 @@
 "use client";
 import ComplexityGraph from "@/app/components/ui/graph";
+import { useEffect, useState } from "react";
 
 const content = () => {
+  const [theme, setTheme] = useState('light');
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    const updateTheme = () => {
+      const savedTheme = localStorage.getItem('theme') || 'light';
+      setTheme(savedTheme);
+    };
+
+    updateTheme();
+    setMounted(true);
+
+    window.addEventListener('storage', updateTheme);
+    window.addEventListener('themeChange', updateTheme);
+
+    return () => {
+      window.removeEventListener('storage', updateTheme);
+      window.removeEventListener('themeChange', updateTheme);
+    };
+  }, []);
+
   const paragraphs = [
     `Linear Search is a simple method to find a particular value in a list. It checks each element one by one from the start until it finds the target value. If the value is found, it returns its position; otherwise, it says the value is not present.`,
     `Imagine you have a list of numbers: [5, 3, 8, 1, 9] and you want to find the number 8.`,
@@ -42,12 +64,19 @@ const content = () => {
     <main className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-5 md:gap-4">
       <div className="col-span-1">
         <div className="hidden md:block">
-          <iframe
-            src="https://hw.glich.co/resources/embed/daily/dsa"
-            width="100%"
-            height="400"
-            title="Daily DSA Challenge"
-          ></iframe>
+          {mounted && (
+            <iframe
+              key={theme}
+              src={
+                theme === "dark"
+                  ? "https://hw.glich.co/resources/embed/daily/dsa?theme=dark"
+                  : "https://hw.glich.co/resources/embed/daily/dsa?theme=light"
+              }
+              width="100%"
+              height="400"
+              title="Daily DSA Challenge"
+            ></iframe>
+          )}
         </div>
         <div className="flex justify-center">
           <span className="text-xs hidden md:block">
@@ -174,8 +203,37 @@ const content = () => {
           </div>
         </section>
       </article>
+
+      {/* Mobile iframe at bottom */}
+      <div className="block md:hidden w-full">
+        {mounted && (
+          <iframe
+            key={theme}
+            src={
+              theme === "dark"
+                ? "https://hw.glich.co/resources/embed/daily/dsa?theme=dark"
+                : "https://hw.glich.co/resources/embed/daily/dsa?theme=light"
+            }
+            width="100%"
+            height="300"
+            title="Daily DSA Challenge"
+          ></iframe>
+        )}
+        <div className="flex justify-center pb-8">
+          <span className="text-xs">
+            Powered by{" "}
+            <a
+              href="https://hw.glich.co/resources/daily"
+              target="_blank"
+              className="underline hover:text-blue-500 duration-300"
+            >
+              Hello World
+            </a>
+          </span>
+        </div>
+      </div>
     </main>
   );
 };
 
-export default content;
+export default content;
\ No newline at end of file
diff --git a/app/visualizer/searching/linearsearch/page.jsx b/app/visualizer/searching/linearsearch/page.jsx
index 8ef3263..392024b 100644
--- a/app/visualizer/searching/linearsearch/page.jsx
+++ b/app/visualizer/searching/linearsearch/page.jsx
@@ -86,7 +86,7 @@ export default function Page() {
           <Content />
         </section>
 
-        <section className="px-6">
+        <section>
           <LinearSearchAnimation />
         </section>