diff --git a/app/components/ui/DailyDSAEmbed.jsx b/app/components/ui/DailyDSAEmbed.jsx
new file mode 100644
index 0000000..c51e4f7
--- /dev/null
+++ b/app/components/ui/DailyDSAEmbed.jsx
@@ -0,0 +1,41 @@
+"use client";
+import { useEffect, useState } from "react";
+
+const DailyDSAEmbed = ({ mobile = false, theme = "light" }) => {
+  const src = `https://scaleengineer.com/embed/daily/dsa?theme=${theme}`;
+  const wrapperClasses = mobile
+    ? "block md:hidden w-full"
+    : "max-w-full hidden md:block";
+  const height = mobile ? 200 : 280;
+
+  return (
+    <div className={wrapperClasses}>
+      <div className="max-w-full mb-4">
+        <a
+          href="https://scaleengineer.com/daily"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="mb-2 inline-block text-[#737373] no-underline"
+          style={{
+            font: "500 12px/1.4 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif",
+          }}
+        >
+          Daily DSA Challenge by{" "}
+          <span className="text-[#0a0a0a] underline underline-offset-[3px]">
+            Scale Engineer
+          </span>
+        </a>
+        <iframe
+          src={src}
+          width="100%"
+          height={height}
+          className="border border-black border-dashed rounded-none overflow-hidden"
+          title="Daily DSA Challenge"
+          loading="lazy"
+        ></iframe>
+      </div>
+    </div>
+  );
+};
+
+export default DailyDSAEmbed;
diff --git a/app/visualizer/queue/implementation/array/content.jsx b/app/visualizer/queue/implementation/array/content.jsx
index f43bde2..f513ba9 100755
--- a/app/visualizer/queue/implementation/array/content.jsx
+++ b/app/visualizer/queue/implementation/array/content.jsx
@@ -1,10 +1,9 @@
 "use client";
 import { useEffect, useState } from "react";
+import DailyDSAEmbed from "@/app/components/ui/DailyDSAEmbed";
 
 const content = () => {
   const [theme, setTheme] = useState("light");
-  const [mounted, setMounted] = useState(false);
-
   useEffect(() => {
     const updateTheme = () => {
       const savedTheme = localStorage.getItem("theme") || "light";
@@ -12,7 +11,6 @@ const content = () => {
     };
 
     updateTheme();
-    setMounted(true);
 
     window.addEventListener("storage", updateTheme);
     window.addEventListener("themeChange", updateTheme);
@@ -96,35 +94,8 @@ const content = () => {
 
   return (
     <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">
-          {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">
-            Daily DSA Challenge 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>
+
+      <DailyDSAEmbed mobile={false} theme={theme} />
       <article className="col-span-4 max-w-4xl bg-white dark:bg-neutral-950 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden mb-8">
         {/* Queue Array Implementation Overview */}
         <section className="p-6 border-b border-gray-100 dark:border-gray-700">
@@ -261,33 +232,7 @@ const content = () => {
       </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="320"
-            title="Daily DSA Challenge"
-          ></iframe>
-        )}
-        <div className="flex justify-center pb-8">
-          <span className="text-xs">
-            Daily DSA Challenge 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>
+      <DailyDSAEmbed mobile theme={theme} />
     </main>
   );
 };
diff --git a/app/visualizer/queue/implementation/linkedList/content.jsx b/app/visualizer/queue/implementation/linkedList/content.jsx
index abdbbed..dbdc868 100755
--- a/app/visualizer/queue/implementation/linkedList/content.jsx
+++ b/app/visualizer/queue/implementation/linkedList/content.jsx
@@ -1,10 +1,9 @@
 "use client";
 import { useEffect, useState } from "react";
+import DailyDSAEmbed from "@/app/components/ui/DailyDSAEmbed";
 
 const content = () => {
   const [theme, setTheme] = useState("light");
-  const [mounted, setMounted] = useState(false);
-
   useEffect(() => {
     const updateTheme = () => {
       const savedTheme = localStorage.getItem("theme") || "light";
@@ -12,7 +11,6 @@ const content = () => {
     };
 
     updateTheme();
-    setMounted(true);
 
     window.addEventListener("storage", updateTheme);
     window.addEventListener("themeChange", updateTheme);
@@ -71,33 +69,7 @@ const content = () => {
   return (
     <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">
-          {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">
-            Daily DSA Challenge by{" "}
-            <a
-              href="https://hw.glich.co/resources/daily"
-              target="_blank"
-              className="underline hover:text-blue-500 duration-300"
-            >
-              Hello World
-            </a>
-          </span>
-        </div>
+        <DailyDSAEmbed mobile={false} theme={theme} />
       </div>
       <article className="col-span-4 max-w-4xl bg-white dark:bg-neutral-950 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden mb-8">
         {/* Queue Linked List Implementation Overview */}
@@ -220,33 +192,7 @@ const content = () => {
       </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="320"
-            title="Daily DSA Challenge"
-          ></iframe>
-        )}
-        <div className="flex justify-center pb-8">
-          <span className="text-xs">
-            Daily DSA Challenge 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>
+      <DailyDSAEmbed mobile theme={theme} />
     </main>
   );
 };
diff --git a/app/visualizer/queue/operations/enqueue-dequeue/content.jsx b/app/visualizer/queue/operations/enqueue-dequeue/content.jsx
index 7c750c9..e273eea 100755
--- a/app/visualizer/queue/operations/enqueue-dequeue/content.jsx
+++ b/app/visualizer/queue/operations/enqueue-dequeue/content.jsx
@@ -1,11 +1,10 @@
 "use client";
 import ComplexityGraph from "@/app/components/ui/graph";
 import { useEffect, useState } from "react";
+import DailyDSAEmbed from "@/app/components/ui/DailyDSAEmbed";
 
 const content = () => {
   const [theme, setTheme] = useState('light');
-  const [mounted, setMounted] = useState(false);
-
   useEffect(() => {
     const updateTheme = () => {
       const savedTheme = localStorage.getItem('theme') || 'light';
@@ -13,7 +12,6 @@ const content = () => {
     };
 
     updateTheme();
-    setMounted(true);
 
     window.addEventListener('storage', updateTheme);
     window.addEventListener('themeChange', updateTheme);
@@ -65,33 +63,7 @@ const content = () => {
     return (
     <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">
-          {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">
-            Daily DSA Challenge by{" "}
-            <a
-              href="https://hw.glich.co/resources/daily"
-              target="_blank"
-              className="underline hover:text-blue-500 duration-300"
-            >
-              Hello World
-            </a>
-          </span>
-        </div>
+        <DailyDSAEmbed mobile={false} theme={theme} />
       </div>
       <article className="col-span-4 max-w-4xl bg-white dark:bg-neutral-950 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden mb-8">
     {/* What is a Queue? */}
@@ -249,33 +221,7 @@ const content = () => {
   </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="320"
-            title="Daily DSA Challenge"
-          ></iframe>
-        )}
-        <div className="flex justify-center pb-8">
-          <span className="text-xs">
-            Daily DSA Challenge 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>
+      <DailyDSAEmbed mobile theme={theme} />
 </main>
     );
   };
diff --git a/app/visualizer/queue/operations/isempty/content.jsx b/app/visualizer/queue/operations/isempty/content.jsx
index 550f888..6461eb7 100755
--- a/app/visualizer/queue/operations/isempty/content.jsx
+++ b/app/visualizer/queue/operations/isempty/content.jsx
@@ -1,10 +1,9 @@
 "use client";
 import { useEffect, useState } from "react";
+import DailyDSAEmbed from "@/app/components/ui/DailyDSAEmbed";
 
 const content = () => {
   const [theme, setTheme] = useState("light");
-  const [mounted, setMounted] = useState(false);
-
   useEffect(() => {
     const updateTheme = () => {
       const savedTheme = localStorage.getItem("theme") || "light";
@@ -12,7 +11,6 @@ const content = () => {
     };
 
     updateTheme();
-    setMounted(true);
 
     window.addEventListener("storage", updateTheme);
     window.addEventListener("themeChange", updateTheme);
@@ -73,33 +71,7 @@ const content = () => {
   return (
     <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">
-          {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">
-            Daily DSA Challenge by{" "}
-            <a
-              href="https://hw.glich.co/resources/daily"
-              target="_blank"
-              className="underline hover:text-blue-500 duration-300"
-            >
-              Hello World
-            </a>
-          </span>
-        </div>
+        <DailyDSAEmbed mobile={false} theme={theme} />
       </div>
       <article className="col-span-4 max-w-4xl bg-white dark:bg-neutral-950 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden mb-8">
         {/* What is the isEmpty Operation? */}
@@ -272,33 +244,7 @@ const content = () => {
       </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="320"
-            title="Daily DSA Challenge"
-          ></iframe>
-        )}
-        <div className="flex justify-center pb-8">
-          <span className="text-xs">
-            Daily DSA Challenge 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>
+      <DailyDSAEmbed mobile theme={theme} />
     </main>
   );
 };
diff --git a/app/visualizer/queue/operations/isfull/content.jsx b/app/visualizer/queue/operations/isfull/content.jsx
index 0a46afe..bbe2470 100755
--- a/app/visualizer/queue/operations/isfull/content.jsx
+++ b/app/visualizer/queue/operations/isfull/content.jsx
@@ -1,10 +1,9 @@
 "use client";
 import { useEffect, useState } from "react";
+import DailyDSAEmbed from "@/app/components/ui/DailyDSAEmbed";
 
 const content = () => {
   const [theme, setTheme] = useState("light");
-  const [mounted, setMounted] = useState(false);
-
   useEffect(() => {
     const updateTheme = () => {
       const savedTheme = localStorage.getItem("theme") || "light";
@@ -12,7 +11,6 @@ const content = () => {
     };
 
     updateTheme();
-    setMounted(true);
 
     window.addEventListener("storage", updateTheme);
     window.addEventListener("themeChange", updateTheme);
@@ -83,33 +81,7 @@ const content = () => {
   return (
     <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">
-          {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">
-            Daily DSA Challenge by{" "}
-            <a
-              href="https://hw.glich.co/resources/daily"
-              target="_blank"
-              className="underline hover:text-blue-500 duration-300"
-            >
-              Hello World
-            </a>
-          </span>
-        </div>
+        <DailyDSAEmbed mobile={false} theme={theme} />
       </div>
       <article className="col-span-4 max-w-4xl bg-white dark:bg-neutral-950 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden mb-8">
         {/* What is the isFull Operation? */}
@@ -288,33 +260,7 @@ const content = () => {
       </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="320"
-            title="Daily DSA Challenge"
-          ></iframe>
-        )}
-        <div className="flex justify-center pb-8">
-          <span className="text-xs">
-            Daily DSA Challenge 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>
+      <DailyDSAEmbed mobile theme={theme} />
     </main>
   );
 };
diff --git a/app/visualizer/queue/operations/peek-front/content.jsx b/app/visualizer/queue/operations/peek-front/content.jsx
index a3d64f9..2c2981e 100755
--- a/app/visualizer/queue/operations/peek-front/content.jsx
+++ b/app/visualizer/queue/operations/peek-front/content.jsx
@@ -1,10 +1,9 @@
 "use client";
 import { useEffect, useState } from "react";
+import DailyDSAEmbed from "@/app/components/ui/DailyDSAEmbed";
 
 const content = () => {
   const [theme, setTheme] = useState("light");
-  const [mounted, setMounted] = useState(false);
-
   useEffect(() => {
     const updateTheme = () => {
       const savedTheme = localStorage.getItem("theme") || "light";
@@ -12,7 +11,6 @@ const content = () => {
     };
 
     updateTheme();
-    setMounted(true);
 
     window.addEventListener("storage", updateTheme);
     window.addEventListener("themeChange", updateTheme);
@@ -69,33 +67,7 @@ const content = () => {
   return (
     <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">
-          {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">
-            Daily DSA Challenge by{" "}
-            <a
-              href="https://hw.glich.co/resources/daily"
-              target="_blank"
-              className="underline hover:text-blue-500 duration-300"
-            >
-              Hello World
-            </a>
-          </span>
-        </div>
+        <DailyDSAEmbed mobile={false} theme={theme} />
       </div>
       <article className="col-span-4 max-w-4xl bg-white dark:bg-neutral-950 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden mb-8">
         {/* What is Peek Front Operation? */}
@@ -260,33 +232,7 @@ const content = () => {
       </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="320"
-            title="Daily DSA Challenge"
-          ></iframe>
-        )}
-        <div className="flex justify-center pb-8">
-          <span className="text-xs">
-            Daily DSA Challenge 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>
+      <DailyDSAEmbed mobile theme={theme} />
     </main>
   );
 };
diff --git a/app/visualizer/queue/types/circular/content.jsx b/app/visualizer/queue/types/circular/content.jsx
index fc66a9f..b39fe48 100755
--- a/app/visualizer/queue/types/circular/content.jsx
+++ b/app/visualizer/queue/types/circular/content.jsx
@@ -1,10 +1,9 @@
 "use client";
 import { useEffect, useState } from "react";
+import DailyDSAEmbed from "@/app/components/ui/DailyDSAEmbed";
 
 const content = () => {
   const [theme, setTheme] = useState("light");
-  const [mounted, setMounted] = useState(false);
-
   useEffect(() => {
     const updateTheme = () => {
       const savedTheme = localStorage.getItem("theme") || "light";
@@ -12,7 +11,6 @@ const content = () => {
     };
 
     updateTheme();
-    setMounted(true);
 
     window.addEventListener("storage", updateTheme);
     window.addEventListener("themeChange", updateTheme);
@@ -87,33 +85,7 @@ const content = () => {
     return (
           <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">
-          {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">
-            Daily DSA Challenge by{" "}
-            <a
-              href="https://hw.glich.co/resources/daily"
-              target="_blank"
-              className="underline hover:text-blue-500 duration-300"
-            >
-              Hello World
-            </a>
-          </span>
-        </div>
+        <DailyDSAEmbed mobile={false} theme={theme} />
       </div>
       <article className="col-span-4 max-w-4xl bg-white dark:bg-neutral-950 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden mb-8">
     {/* What is a Circular Queue? */}
@@ -257,33 +229,7 @@ const content = () => {
   </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="320"
-            title="Daily DSA Challenge"
-          ></iframe>
-        )}
-        <div className="flex justify-center pb-8">
-          <span className="text-xs">
-            Daily DSA Challenge 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>
+      <DailyDSAEmbed mobile theme={theme} />
 </main>
     );
   };
diff --git a/app/visualizer/queue/types/deque/content.jsx b/app/visualizer/queue/types/deque/content.jsx
index 7352d70..5757ab1 100755
--- a/app/visualizer/queue/types/deque/content.jsx
+++ b/app/visualizer/queue/types/deque/content.jsx
@@ -1,10 +1,9 @@
 "use client";
 import { useEffect, useState } from "react";
+import DailyDSAEmbed from "@/app/components/ui/DailyDSAEmbed";
 
 const content = () => {
   const [theme, setTheme] = useState("light");
-  const [mounted, setMounted] = useState(false);
-
   useEffect(() => {
     const updateTheme = () => {
       const savedTheme = localStorage.getItem("theme") || "light";
@@ -12,7 +11,6 @@ const content = () => {
     };
 
     updateTheme();
-    setMounted(true);
 
     window.addEventListener("storage", updateTheme);
     window.addEventListener("themeChange", updateTheme);
@@ -98,33 +96,7 @@ const content = () => {
   return (
     <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">
-          {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">
-            Daily DSA Challenge by{" "}
-            <a
-              href="https://hw.glich.co/resources/daily"
-              target="_blank"
-              className="underline hover:text-blue-500 duration-300"
-            >
-              Hello World
-            </a>
-          </span>
-        </div>
+        <DailyDSAEmbed mobile={false} theme={theme} />
       </div>
       <article className="col-span-4 max-w-4xl bg-white dark:bg-neutral-950 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden mb-8">
         {/* What is a Double-Ended Queue (Deque)? */}
@@ -292,33 +264,7 @@ const content = () => {
       </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="320"
-            title="Daily DSA Challenge"
-          ></iframe>
-        )}
-        <div className="flex justify-center pb-8">
-          <span className="text-xs">
-            Daily DSA Challenge 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>
+      <DailyDSAEmbed mobile theme={theme} />
     </main>
   );
 };
diff --git a/app/visualizer/queue/types/priority/content.jsx b/app/visualizer/queue/types/priority/content.jsx
index 86ada8f..f6f0075 100755
--- a/app/visualizer/queue/types/priority/content.jsx
+++ b/app/visualizer/queue/types/priority/content.jsx
@@ -1,10 +1,9 @@
 "use client";
 import { useEffect, useState } from "react";
+import DailyDSAEmbed from "@/app/components/ui/DailyDSAEmbed";
 
 const content = () => {
   const [theme, setTheme] = useState("light");
-  const [mounted, setMounted] = useState(false);
-
   useEffect(() => {
     const updateTheme = () => {
       const savedTheme = localStorage.getItem("theme") || "light";
@@ -12,7 +11,6 @@ const content = () => {
     };
 
     updateTheme();
-    setMounted(true);
 
     window.addEventListener("storage", updateTheme);
     window.addEventListener("themeChange", updateTheme);
@@ -112,33 +110,7 @@ const content = () => {
   return (
     <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">
-          {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">
-            Daily DSA Challenge by{" "}
-            <a
-              href="https://hw.glich.co/resources/daily"
-              target="_blank"
-              className="underline hover:text-blue-500 duration-300"
-            >
-              Hello World
-            </a>
-          </span>
-        </div>
+        <DailyDSAEmbed mobile={false} theme={theme} />
       </div>
       <article className="col-span-4 max-w-4xl bg-white dark:bg-neutral-950 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden mb-8">
         {/* What is a Priority Queue? */}
@@ -283,33 +255,7 @@ const content = () => {
       </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="320"
-            title="Daily DSA Challenge"
-          ></iframe>
-        )}
-        <div className="flex justify-center pb-8">
-          <span className="text-xs">
-            Daily DSA Challenge 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>
+      <DailyDSAEmbed mobile theme={theme} />
     </main>
   );
 };
diff --git a/app/visualizer/queue/types/singleEnded/content.jsx b/app/visualizer/queue/types/singleEnded/content.jsx
index 28b957b..9d074c0 100755
--- a/app/visualizer/queue/types/singleEnded/content.jsx
+++ b/app/visualizer/queue/types/singleEnded/content.jsx
@@ -1,10 +1,9 @@
 "use client";
 import { useEffect, useState } from "react";
+import DailyDSAEmbed from "@/app/components/ui/DailyDSAEmbed";
 
 const content = () => {
   const [theme, setTheme] = useState("light");
-  const [mounted, setMounted] = useState(false);
-
   useEffect(() => {
     const updateTheme = () => {
       const savedTheme = localStorage.getItem("theme") || "light";
@@ -12,7 +11,6 @@ const content = () => {
     };
 
     updateTheme();
-    setMounted(true);
 
     window.addEventListener("storage", updateTheme);
     window.addEventListener("themeChange", updateTheme);
@@ -101,33 +99,7 @@ const content = () => {
   return (
     <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">
-          {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">
-            Daily DSA Challenge by{" "}
-            <a
-              href="https://hw.glich.co/resources/daily"
-              target="_blank"
-              className="underline hover:text-blue-500 duration-300"
-            >
-              Hello World
-            </a>
-          </span>
-        </div>
+        <DailyDSAEmbed mobile={false} theme={theme} />
       </div>
       <article className="col-span-4 max-w-4xl bg-white dark:bg-neutral-950 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden mb-8">
         {/* What is a Single-Ended Queue? */}
@@ -318,33 +290,7 @@ const content = () => {
       </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="320"
-            title="Daily DSA Challenge"
-          ></iframe>
-        )}
-        <div className="flex justify-center pb-8">
-          <span className="text-xs">
-            Daily DSA Challenge 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>
+      <DailyDSAEmbed mobile theme={theme} />
     </main>
   );
 };
diff --git a/app/visualizer/searching/binarysearch/content.jsx b/app/visualizer/searching/binarysearch/content.jsx
index 5653d37..edd8938 100755
--- a/app/visualizer/searching/binarysearch/content.jsx
+++ b/app/visualizer/searching/binarysearch/content.jsx
@@ -1,10 +1,10 @@
 "use client";
 import ComplexityGraph from "@/app/components/ui/graph";
+import DailyDSAEmbed from "@/app/components/ui/DailyDSAEmbed";
 import { useEffect, useState } from "react";
 
 const content = () => {
   const [theme, setTheme] = useState('light');
-  const [mounted, setMounted] = useState(false);
 
   useEffect(() => {
     const updateTheme = () => {
@@ -13,7 +13,6 @@ const content = () => {
     };
 
     updateTheme();
-    setMounted(true);
 
     window.addEventListener('storage', updateTheme);
     window.addEventListener('themeChange', updateTheme);
@@ -62,35 +61,7 @@ const content = () => {
 
   return (
     <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">
-          {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">
-            Daily DSA Challenge 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>
+      <DailyDSAEmbed mobile={false} theme={theme} />
       <article className="col-span-4 max-w-4xl bg-white dark:bg-neutral-950 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden mb-8">
         {/* What is Binary Search */}
         <section className="p-6 border-b border-gray-100 dark:border-gray-700">
@@ -215,33 +186,7 @@ const content = () => {
       </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="320"
-            title="Daily DSA Challenge"
-          ></iframe>
-        )}
-        <div className="flex justify-center pb-8">
-          <span className="text-xs">
-            Daily DSA Challenge 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>
+      <DailyDSAEmbed mobile theme={theme} />
     </main>
   );
 };
diff --git a/app/visualizer/searching/linearsearch/content.jsx b/app/visualizer/searching/linearsearch/content.jsx
index 400584a..fdbc0cd 100755
--- a/app/visualizer/searching/linearsearch/content.jsx
+++ b/app/visualizer/searching/linearsearch/content.jsx
@@ -1,10 +1,10 @@
 "use client";
 import ComplexityGraph from "@/app/components/ui/graph";
+import DailyDSAEmbed from "@/app/components/ui/DailyDSAEmbed";
 import { useEffect, useState } from "react";
 
 const content = () => {
   const [theme, setTheme] = useState('light');
-  const [mounted, setMounted] = useState(false);
 
   useEffect(() => {
     const updateTheme = () => {
@@ -13,7 +13,6 @@ const content = () => {
     };
 
     updateTheme();
-    setMounted(true);
 
     window.addEventListener('storage', updateTheme);
     window.addEventListener('themeChange', updateTheme);
@@ -62,35 +61,7 @@ const content = () => {
 
   return (
     <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">
-          {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">
-            Daily DSA Challenge 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>
+      <DailyDSAEmbed mobile={false} theme={theme} />
       <article className="col-span-4 max-w-4xl bg-white dark:bg-neutral-950 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden mb-8">
         {/* What is Linear Search */}
         <section className="p-6 border-b border-gray-100 dark:border-gray-700">
@@ -205,35 +176,10 @@ const content = () => {
       </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="320"
-            title="Daily DSA Challenge"
-          ></iframe>
-        )}
-        <div className="flex justify-center pb-8">
-          <span className="text-xs">
-            Daily DSA Challenge 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>
+      <DailyDSAEmbed mobile theme={theme} />
     </main>
   );
 };
 
-export default content;
\ No newline at end of file
+export default content;
+
diff --git a/app/visualizer/sorting/bubblesort/content.jsx b/app/visualizer/sorting/bubblesort/content.jsx
index a88c842..d32bdc5 100755
--- a/app/visualizer/sorting/bubblesort/content.jsx
+++ b/app/visualizer/sorting/bubblesort/content.jsx
@@ -1,10 +1,10 @@
 "use client";
 import ComplexityGraph from "@/app/components/ui/graph";
 import { useEffect, useState } from "react";
+import DailyDSAEmbed from "@/app/components/ui/DailyDSAEmbed";
 
 const content = () => {
   const [theme, setTheme] = useState("light");
-  const [mounted, setMounted] = useState(false);
 
   useEffect(() => {
     const updateTheme = () => {
@@ -13,7 +13,6 @@ const content = () => {
     };
 
     updateTheme();
-    setMounted(true);
 
     window.addEventListener("storage", updateTheme);
     window.addEventListener("themeChange", updateTheme);
@@ -80,35 +79,7 @@ const content = () => {
 
   return (
     <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">
-          {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">
-            Daily DSA Challenge 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>
+      <DailyDSAEmbed mobile={false} theme={theme} />
       <article className="col-span-4 max-w-4xl bg-white dark:bg-neutral-950 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden mb-8">
         {/* What is Bubble Sort */}
         <section className="p-6 border-b border-gray-100 dark:border-gray-700">
@@ -254,33 +225,7 @@ const content = () => {
       </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="320"
-            title="Daily DSA Challenge"
-          ></iframe>
-        )}
-        <div className="flex justify-center pb-8">
-          <span className="text-xs">
-            Daily DSA Challenge 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>
+      <DailyDSAEmbed mobile theme={theme} />
     </main>
   );
 };
diff --git a/app/visualizer/sorting/insertionsort/content.jsx b/app/visualizer/sorting/insertionsort/content.jsx
index d10fe7c..2cb3d69 100755
--- a/app/visualizer/sorting/insertionsort/content.jsx
+++ b/app/visualizer/sorting/insertionsort/content.jsx
@@ -1,10 +1,10 @@
 "use client";
 import ComplexityGraph from "@/app/components/ui/graph";
 import { useEffect, useState } from "react";
+import DailyDSAEmbed from "@/app/components/ui/DailyDSAEmbed";
 
 const content = () => {
   const [theme, setTheme] = useState('light');
-  const [mounted, setMounted] = useState(false);
 
   useEffect(() => {
     const updateTheme = () => {
@@ -13,7 +13,6 @@ const content = () => {
     };
 
     updateTheme();
-    setMounted(true);
 
     window.addEventListener('storage', updateTheme);
     window.addEventListener('themeChange', updateTheme);
@@ -93,35 +92,7 @@ const content = () => {
 
   return (
     <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">
-          {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">
-            Daily DSA Challenge 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>
+      <DailyDSAEmbed mobile={false} theme={theme} />
       <article className="col-span-4 max-w-4xl bg-white dark:bg-neutral-950 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden mb-8">
         {/* What is Insertion Sort */}
         <section className="p-6 border-b border-gray-100 dark:border-gray-700">
@@ -272,33 +243,7 @@ const content = () => {
       </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="320"
-            title="Daily DSA Challenge"
-          ></iframe>
-        )}
-        <div className="flex justify-center pb-8">
-          <span className="text-xs">
-            Daily DSA Challenge 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>
+      <DailyDSAEmbed mobile theme={theme} />
     </main>
   );
 };
diff --git a/app/visualizer/sorting/mergesort/content.jsx b/app/visualizer/sorting/mergesort/content.jsx
index 8d5bb94..93104b1 100755
--- a/app/visualizer/sorting/mergesort/content.jsx
+++ b/app/visualizer/sorting/mergesort/content.jsx
@@ -1,10 +1,10 @@
 "use client";
 import ComplexityGraph from "@/app/components/ui/graph";
 import { useEffect, useState } from "react";
+import DailyDSAEmbed from "@/app/components/ui/DailyDSAEmbed";
 
 const content = () => {
   const [theme, setTheme] = useState('light');
-  const [mounted, setMounted] = useState(false);
 
   useEffect(() => {
     const updateTheme = () => {
@@ -13,7 +13,6 @@ const content = () => {
     };
 
     updateTheme();
-    setMounted(true);
 
     window.addEventListener('storage', updateTheme);
     window.addEventListener('themeChange', updateTheme);
@@ -86,35 +85,7 @@ const content = () => {
 
   return (
     <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">
-          {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">
-            Daily DSA Challenge 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>
+      <DailyDSAEmbed mobile={false} theme={theme} />
       <article className="col-span-4 max-w-4xl bg-white dark:bg-neutral-950 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden mb-8">
         {/* What is Merge Sort */}
         <section className="p-6 border-b border-gray-100 dark:border-gray-700">
@@ -261,33 +232,7 @@ const content = () => {
       </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="320"
-            title="Daily DSA Challenge"
-          ></iframe>
-        )}
-        <div className="flex justify-center pb-8">
-          <span className="text-xs">
-            Daily DSA Challenge 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>
+      <DailyDSAEmbed mobile theme={theme} />
     </main>
   );
 };
diff --git a/app/visualizer/sorting/quicksort/content.jsx b/app/visualizer/sorting/quicksort/content.jsx
index 45570d1..b1c5cd4 100755
--- a/app/visualizer/sorting/quicksort/content.jsx
+++ b/app/visualizer/sorting/quicksort/content.jsx
@@ -1,10 +1,10 @@
 "use client";
 import ComplexityGraph from "@/app/components/ui/graph";
 import { useEffect, useState } from "react";
+import DailyDSAEmbed from "@/app/components/ui/DailyDSAEmbed";
 
 const content = () => {
   const [theme, setTheme] = useState('light');
-  const [mounted, setMounted] = useState(false);
 
   useEffect(() => {
     const updateTheme = () => {
@@ -13,7 +13,6 @@ const content = () => {
     };
 
     updateTheme();
-    setMounted(true);
 
     window.addEventListener('storage', updateTheme);
     window.addEventListener('themeChange', updateTheme);
@@ -127,35 +126,7 @@ const content = () => {
 
   return (
     <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">
-          {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">
-            Daily DSA Challenge 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>
+      <DailyDSAEmbed mobile={false} theme={theme} />
       <article className="col-span-4 max-w-4xl bg-white dark:bg-neutral-950 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden mb-8">
         {/* What is Quick Sort */}
         <section className="p-6 border-b border-gray-100 dark:border-gray-700">
@@ -356,33 +327,7 @@ const content = () => {
       </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="320"
-            title="Daily DSA Challenge"
-          ></iframe>
-        )}
-        <div className="flex justify-center pb-8">
-          <span className="text-xs">
-            Daily DSA Challenge 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>
+      <DailyDSAEmbed mobile theme={theme} />
     </main>
   );
 };
diff --git a/app/visualizer/sorting/selectionsort/content.jsx b/app/visualizer/sorting/selectionsort/content.jsx
index e6ba5df..ead90e2 100755
--- a/app/visualizer/sorting/selectionsort/content.jsx
+++ b/app/visualizer/sorting/selectionsort/content.jsx
@@ -1,10 +1,10 @@
 "use client";
 import ComplexityGraph from "@/app/components/ui/graph";
 import { useEffect, useState } from "react";
+import DailyDSAEmbed from "@/app/components/ui/DailyDSAEmbed";
 
 const content = () => {
   const [theme, setTheme] = useState('light');
-  const [mounted, setMounted] = useState(false);
 
   useEffect(() => {
     const updateTheme = () => {
@@ -13,7 +13,6 @@ const content = () => {
     };
 
     updateTheme();
-    setMounted(true);
 
     window.addEventListener('storage', updateTheme);
     window.addEventListener('themeChange', updateTheme);
@@ -96,35 +95,7 @@ const content = () => {
 
   return (
     <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">
-          {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">
-            Daily DSA Challenge 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>
+      <DailyDSAEmbed mobile={false} theme={theme} />
       <article className="col-span-4 max-w-4xl bg-white dark:bg-neutral-950 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden mb-8">
         {/* What is Selection Sort */}
         <section className="p-6 border-b border-gray-100 dark:border-gray-700">
@@ -309,33 +280,7 @@ const content = () => {
       </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="320"
-            title="Daily DSA Challenge"
-          ></iframe>
-        )}
-        <div className="flex justify-center pb-8">
-          <span className="text-xs">
-            Daily DSA Challenge 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>
+      <DailyDSAEmbed mobile theme={theme} />
     </main>
   );
 };
diff --git a/app/visualizer/stack/implementation/usingArray/content.jsx b/app/visualizer/stack/implementation/usingArray/content.jsx
index 1dde175..2880efe 100755
--- a/app/visualizer/stack/implementation/usingArray/content.jsx
+++ b/app/visualizer/stack/implementation/usingArray/content.jsx
@@ -2,10 +2,10 @@
 import React from "react";
 import { motion } from "framer-motion";
 import { useEffect, useState } from "react";
+import DailyDSAEmbed from "@/app/components/ui/DailyDSAEmbed";
 
 const content = () => {
   const [theme, setTheme] = useState("light");
-  const [mounted, setMounted] = useState(false);
 
   useEffect(() => {
     const updateTheme = () => {
@@ -14,7 +14,6 @@ const content = () => {
     };
 
     updateTheme();
-    setMounted(true);
 
     window.addEventListener("storage", updateTheme);
     window.addEventListener("themeChange", updateTheme);
@@ -65,33 +64,7 @@ const content = () => {
   return (
     <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">
-          {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">
-            Daily DSA Challenge by{" "}
-            <a
-              href="https://hw.glich.co/resources/daily"
-              target="_blank"
-              className="underline hover:text-blue-500 duration-300"
-            >
-              Hello World
-            </a>
-          </span>
-        </div>
+        <DailyDSAEmbed mobile={false} theme={theme} />
       </div>
       <article className="col-span-4 max-w-4xl bg-white dark:bg-neutral-950 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden mb-8">
         {/* -------  HEADER  ------- */}
@@ -240,33 +213,7 @@ const content = () => {
       </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="320"
-            title="Daily DSA Challenge"
-          ></iframe>
-        )}
-        <div className="flex justify-center pb-8">
-          <span className="text-xs">
-            Daily DSA Challenge 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>
+      <DailyDSAEmbed mobile theme={theme} />
     </main>
   );
 };
diff --git a/app/visualizer/stack/implementation/usingLinkedList/content.jsx b/app/visualizer/stack/implementation/usingLinkedList/content.jsx
index 1e3aa28..a8d6d40 100755
--- a/app/visualizer/stack/implementation/usingLinkedList/content.jsx
+++ b/app/visualizer/stack/implementation/usingLinkedList/content.jsx
@@ -4,7 +4,6 @@ import { useEffect, useState } from "react";
 
 const content = () => {
   const [theme, setTheme] = useState("light");
-  const [mounted, setMounted] = useState(false);
 
   useEffect(() => {
     const updateTheme = () => {
@@ -13,7 +12,6 @@ const content = () => {
     };
 
     updateTheme();
-    setMounted(true);
 
     window.addEventListener("storage", updateTheme);
     window.addEventListener("themeChange", updateTheme);
@@ -79,35 +77,7 @@ const content = () => {
 
     return (
     <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">
-          {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">
-            Daily DSA Challenge 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>
+            <DailyDSAEmbed mobile={false} theme={theme} />
       <article className="col-span-4 max-w-4xl bg-white dark:bg-neutral-950 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden mb-8">
     {/* Header Section */}
     <section className="p-6 border-b border-gray-100 dark:border-gray-700">
diff --git a/app/visualizer/stack/isempty/content.jsx b/app/visualizer/stack/isempty/content.jsx
index 3a15f07..1873c40 100755
--- a/app/visualizer/stack/isempty/content.jsx
+++ b/app/visualizer/stack/isempty/content.jsx
@@ -1,10 +1,10 @@
 "use client";
 import ComplexityGraph from "@/app/components/ui/graph";
 import { useEffect, useState } from "react";
+import DailyDSAEmbed from "@/app/components/ui/DailyDSAEmbed";
 
 const content = () => {
   const [theme, setTheme] = useState('light');
-  const [mounted, setMounted] = useState(false);
 
   useEffect(() => {
     const updateTheme = () => {
@@ -13,7 +13,6 @@ const content = () => {
     };
 
     updateTheme();
-    setMounted(true);
 
     window.addEventListener('storage', updateTheme);
     window.addEventListener('themeChange', updateTheme);
@@ -59,33 +58,7 @@ const content = () => {
     return (
     <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">
-          {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">
-            Daily DSA Challenge by{" "}
-            <a
-              href="https://hw.glich.co/resources/daily"
-              target="_blank"
-              className="underline hover:text-blue-500 duration-300"
-            >
-              Hello World
-            </a>
-          </span>
-        </div>
+        <DailyDSAEmbed mobile={false} theme={theme} />
       </div>
       <article className="col-span-4 max-w-4xl bg-white dark:bg-neutral-950 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden mb-8">
           {/* What is the isEmpty Operation in Stack? */}
@@ -227,33 +200,7 @@ const content = () => {
         </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="320"
-            title="Daily DSA Challenge"
-          ></iframe>
-        )}
-        <div className="flex justify-center pb-8">
-          <span className="text-xs">
-            Daily DSA Challenge 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>
+      <DailyDSAEmbed mobile theme={theme} />
       </main>
     );
   };
diff --git a/app/visualizer/stack/isfull/content.jsx b/app/visualizer/stack/isfull/content.jsx
index 376ea98..c920894 100755
--- a/app/visualizer/stack/isfull/content.jsx
+++ b/app/visualizer/stack/isfull/content.jsx
@@ -1,10 +1,10 @@
 "use client";
 import ComplexityGraph from "@/app/components/ui/graph";
 import { useEffect, useState } from "react";
+import DailyDSAEmbed from "@/app/components/ui/DailyDSAEmbed";
 
 const content = () => {
   const [theme, setTheme] = useState("light");
-  const [mounted, setMounted] = useState(false);
 
   useEffect(() => {
     const updateTheme = () => {
@@ -13,7 +13,6 @@ const content = () => {
     };
 
     updateTheme();
-    setMounted(true);
 
     window.addEventListener("storage", updateTheme);
     window.addEventListener("themeChange", updateTheme);
@@ -60,33 +59,7 @@ const content = () => {
   return (
     <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">
-          {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">
-            Daily DSA Challenge by{" "}
-            <a
-              href="https://hw.glich.co/resources/daily"
-              target="_blank"
-              className="underline hover:text-blue-500 duration-300"
-            >
-              Hello World
-            </a>
-          </span>
-        </div>
+        <DailyDSAEmbed mobile={false} theme={theme} />
       </div>
       <article className="col-span-4 max-w-4xl bg-white dark:bg-neutral-950 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden mb-8">
         {/* What is the "Is Full" Operation? */}
@@ -241,33 +214,7 @@ const content = () => {
       </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="320"
-            title="Daily DSA Challenge"
-          ></iframe>
-        )}
-        <div className="flex justify-center pb-8">
-          <span className="text-xs">
-            Daily DSA Challenge 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>
+      <DailyDSAEmbed mobile theme={theme} />
     </main>
   );
 };
diff --git a/app/visualizer/stack/peek/content.jsx b/app/visualizer/stack/peek/content.jsx
index 09c44ee..f090b94 100755
--- a/app/visualizer/stack/peek/content.jsx
+++ b/app/visualizer/stack/peek/content.jsx
@@ -1,10 +1,10 @@
 "use client";
 import ComplexityGraph from "@/app/components/ui/graph";
 import { useEffect, useState } from "react";
+import DailyDSAEmbed from "@/app/components/ui/DailyDSAEmbed";
 
 const content = () => {
   const [theme, setTheme] = useState("light");
-  const [mounted, setMounted] = useState(false);
 
   useEffect(() => {
     const updateTheme = () => {
@@ -13,7 +13,6 @@ const content = () => {
     };
 
     updateTheme();
-    setMounted(true);
 
     window.addEventListener("storage", updateTheme);
     window.addEventListener("themeChange", updateTheme);
@@ -44,33 +43,7 @@ const content = () => {
   return (
 <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">
-          {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">
-            Daily DSA Challenge by{" "}
-            <a
-              href="https://hw.glich.co/resources/daily"
-              target="_blank"
-              className="underline hover:text-blue-500 duration-300"
-            >
-              Hello World
-            </a>
-          </span>
-        </div>
+        <DailyDSAEmbed mobile={false} theme={theme} />
       </div>
       <article className="col-span-4 max-w-4xl bg-white dark:bg-neutral-950 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden mb-8">
         {/* Peek Operation */}
@@ -130,33 +103,7 @@ const content = () => {
       </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="320"
-            title="Daily DSA Challenge"
-          ></iframe>
-        )}
-        <div className="flex justify-center pb-8">
-          <span className="text-xs">
-            Daily DSA Challenge 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>
+      <DailyDSAEmbed mobile theme={theme} />
     </main>
   );
 };
diff --git a/app/visualizer/stack/polish/postfix/content.jsx b/app/visualizer/stack/polish/postfix/content.jsx
index 93fb32e..b24d182 100755
--- a/app/visualizer/stack/polish/postfix/content.jsx
+++ b/app/visualizer/stack/polish/postfix/content.jsx
@@ -1,9 +1,9 @@
 "use client";
 import { useEffect, useState } from "react";
+import DailyDSAEmbed from "@/app/components/ui/DailyDSAEmbed";
 
 const content = () => {
   const [theme, setTheme] = useState("light");
-  const [mounted, setMounted] = useState(false);
 
   useEffect(() => {
     const updateTheme = () => {
@@ -12,7 +12,6 @@ const content = () => {
     };
 
     updateTheme();
-    setMounted(true);
 
     window.addEventListener("storage", updateTheme);
     window.addEventListener("themeChange", updateTheme);
@@ -52,33 +51,7 @@ const content = () => {
   return (
     <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">
-          {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">
-            Daily DSA Challenge by{" "}
-            <a
-              href="https://hw.glich.co/resources/daily"
-              target="_blank"
-              className="underline hover:text-blue-500 duration-300"
-            >
-              Hello World
-            </a>
-          </span>
-        </div>
+        <DailyDSAEmbed mobile={false} theme={theme} />
       </div>
       <article className="col-span-4 max-w-4xl bg-white dark:bg-neutral-950 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden mb-8">
         {/* What is Postfix Notation? */}
@@ -205,33 +178,7 @@ const content = () => {
       </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="320"
-            title="Daily DSA Challenge"
-          ></iframe>
-        )}
-        <div className="flex justify-center pb-8">
-          <span className="text-xs">
-            Daily DSA Challenge 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>
+      <DailyDSAEmbed mobile theme={theme} />
     </main>
   );
   };
diff --git a/app/visualizer/stack/polish/prefix/content.jsx b/app/visualizer/stack/polish/prefix/content.jsx
index 2635aa1..27197c7 100755
--- a/app/visualizer/stack/polish/prefix/content.jsx
+++ b/app/visualizer/stack/polish/prefix/content.jsx
@@ -1,9 +1,9 @@
 "use client";
 import { useEffect, useState } from "react";
+import DailyDSAEmbed from "@/app/components/ui/DailyDSAEmbed";
 
 const content = () => {
   const [theme, setTheme] = useState("light");
-  const [mounted, setMounted] = useState(false);
 
   useEffect(() => {
     const updateTheme = () => {
@@ -12,7 +12,6 @@ const content = () => {
     };
 
     updateTheme();
-    setMounted(true);
 
     window.addEventListener("storage", updateTheme);
     window.addEventListener("themeChange", updateTheme);
@@ -46,33 +45,7 @@ const content = () => {
   return (
     <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">
-          {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">
-            Daily DSA Challenge by{" "}
-            <a
-              href="https://hw.glich.co/resources/daily"
-              target="_blank"
-              className="underline hover:text-blue-500 duration-300"
-            >
-              Hello World
-            </a>
-          </span>
-        </div>
+        <DailyDSAEmbed mobile={false} theme={theme} />
       </div>
       <article className="col-span-4 max-w-4xl bg-white dark:bg-neutral-950 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden mb-8">
         {/* What is Prefix Notation? */}
@@ -200,33 +173,7 @@ const content = () => {
       </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="320"
-            title="Daily DSA Challenge"
-          ></iframe>
-        )}
-        <div className="flex justify-center pb-8">
-          <span className="text-xs">
-            Daily DSA Challenge 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>
+      <DailyDSAEmbed mobile theme={theme} />
     </main>
   );
 };
diff --git a/app/visualizer/stack/push-pop/content.jsx b/app/visualizer/stack/push-pop/content.jsx
index bb2e914..3b2aee1 100755
--- a/app/visualizer/stack/push-pop/content.jsx
+++ b/app/visualizer/stack/push-pop/content.jsx
@@ -1,10 +1,10 @@
 "use client";
 import ComplexityGraph from "@/app/components/ui/graph";
 import { useEffect, useState } from "react";
+import DailyDSAEmbed from "@/app/components/ui/DailyDSAEmbed";
 
 const content = () => {
   const [theme, setTheme] = useState("light");
-  const [mounted, setMounted] = useState(false);
 
   useEffect(() => {
     const updateTheme = () => {
@@ -13,7 +13,6 @@ const content = () => {
     };
 
     updateTheme();
-    setMounted(true);
 
     window.addEventListener("storage", updateTheme);
     window.addEventListener("themeChange", updateTheme);
@@ -86,33 +85,7 @@ const content = () => {
   return (
     <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">
-          {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">
-            Daily DSA Challenge by{" "}
-            <a
-              href="https://hw.glich.co/resources/daily"
-              target="_blank"
-              className="underline hover:text-blue-500 duration-300"
-            >
-              Hello World
-            </a>
-          </span>
-        </div>
+        <DailyDSAEmbed mobile={false} theme={theme} />
       </div>
       <article className="col-span-4 max-w-4xl bg-white dark:bg-neutral-950 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden mb-8">
         {/* What is Stack Push & Pop */}
@@ -269,33 +242,7 @@ const content = () => {
       </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="320"
-            title="Daily DSA Challenge"
-          ></iframe>
-        )}
-        <div className="flex justify-center pb-8">
-          <span className="text-xs">
-            Daily DSA Challenge 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>
+      <DailyDSAEmbed mobile theme={theme} />
     </main>
   );
 };