diff --git a/app/components/ui/DailyDSAEmbed.jsx b/app/components/ui/DailyDSAEmbed.jsx
index c51e4f7..c499d22 100755
--- a/app/components/ui/DailyDSAEmbed.jsx
+++ b/app/components/ui/DailyDSAEmbed.jsx
@@ -6,7 +6,7 @@ const DailyDSAEmbed = ({ mobile = false, theme = "light" }) => {
   const wrapperClasses = mobile
     ? "block md:hidden w-full"
     : "max-w-full hidden md:block";
-  const height = mobile ? 200 : 280;
+  const height = mobile ? 350 : 350;
 
   return (
     <div className={wrapperClasses}>
diff --git a/app/components/ui/NewsletterEmbed.jsx b/app/components/ui/NewsletterEmbed.jsx
new file mode 100644
index 0000000..3772626
--- /dev/null
+++ b/app/components/ui/NewsletterEmbed.jsx
@@ -0,0 +1,30 @@
+"use client";
+
+const NewsletterEmbed = ({ mobile = false, theme = "light" }) => {
+  const pageUrl =
+    typeof window !== "undefined"
+      ? encodeURIComponent(window.location.href)
+      : "";
+  const src = `https://scaleengineer.com/embed/subscribe?theme=${theme}&utm_campaign=dsa_visualizer&utm_source=${pageUrl}`;
+  const wrapperClasses = mobile
+    ? "block md:hidden w-full"
+    : "max-w-full hidden md:block";
+  const height = mobile ? 340 : 360;
+
+  return (
+    <div className={wrapperClasses}>
+      <div className="max-w-full mb-4">
+        <iframe
+          src={src}
+          width="100%"
+          height={height}
+          className="border border-black border-dashed rounded-none overflow-hidden"
+          title="Newsletter Subscribe"
+          loading="lazy"
+        ></iframe>
+      </div>
+    </div>
+  );
+};
+
+export default NewsletterEmbed;
diff --git a/app/visualizer/linkedList/operations/comparison/content.jsx b/app/visualizer/linkedList/operations/comparison/content.jsx
index 70ec189..f7edcc2 100755
--- a/app/visualizer/linkedList/operations/comparison/content.jsx
+++ b/app/visualizer/linkedList/operations/comparison/content.jsx
@@ -1,4 +1,28 @@
+"use client";
+import { useEffect, useState } from "react";
+import NewsletterEmbed from "@/app/components/ui/NewsletterEmbed";
+
 const content = () => {
+
+  const [theme, setTheme] = useState("light");
+
+  useEffect(() => {
+    const updateTheme = () => {
+      const savedTheme = localStorage.getItem("theme") || "light";
+      setTheme(savedTheme);
+    };
+
+    updateTheme();
+
+    window.addEventListener("storage", updateTheme);
+    window.addEventListener("themeChange", updateTheme);
+
+    return () => {
+      window.removeEventListener("storage", updateTheme);
+      window.removeEventListener("themeChange", updateTheme);
+    };
+  }, []);
+
   const overview = [
     `Comparing two linked lists involves checking whether both lists contain the same sequence of values in the same order.`,
     `This is typically done using a pointer approach where we traverse both lists simultaneously and compare values at each corresponding node.`
@@ -29,8 +53,11 @@ const content = () => {
   ];
 
   return (
-    <main className="max-w-4xl mx-auto">
-      <article className="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden mb-8">
+    <main className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-12 md:gap-4">
+      <div className="md:col-span-3">
+        <NewsletterEmbed mobile={false} theme={theme} />
+      </div>
+      <article className="md:col-span-9 bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden mb-8">
         {/* Overview */}
         <section className="p-6 border-b border-gray-100 dark:border-gray-700">
           <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
@@ -83,6 +110,7 @@ const content = () => {
           </ul>
         </section>
       </article>
+      <NewsletterEmbed mobile theme={theme} />
     </main>
   );
 };
diff --git a/app/visualizer/linkedList/operations/deletion/content.jsx b/app/visualizer/linkedList/operations/deletion/content.jsx
index fa53d2b..9ac6553 100755
--- a/app/visualizer/linkedList/operations/deletion/content.jsx
+++ b/app/visualizer/linkedList/operations/deletion/content.jsx
@@ -1,4 +1,28 @@
+"use client";
+import { useEffect, useState } from "react";
+import NewsletterEmbed from "@/app/components/ui/NewsletterEmbed";
+
 const content = () => {
+
+  const [theme, setTheme] = useState("light");
+
+  useEffect(() => {
+    const updateTheme = () => {
+      const savedTheme = localStorage.getItem("theme") || "light";
+      setTheme(savedTheme);
+    };
+
+    updateTheme();
+
+    window.addEventListener("storage", updateTheme);
+    window.addEventListener("themeChange", updateTheme);
+
+    return () => {
+      window.removeEventListener("storage", updateTheme);
+      window.removeEventListener("themeChange", updateTheme);
+    };
+  }, []);
+
   const overview = [
     `Linked List deletion involves removing nodes from the linked data structure at various positions. Unlike arrays, linked lists allow efficient deletion at any point without requiring shifting of remaining elements.`,
     `Deletion is a fundamental operation that enables dynamic modification of the list. The efficiency varies based on deletion position, from O(1) for head to O(n) for arbitrary positions or tail (without tail pointer).`,
@@ -192,8 +216,11 @@ const content = () => {
   ];
 
   return (
-    <main className="max-w-4xl mx-auto">
-      <article className="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden mb-8">
+    <main className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-12 md:gap-4">
+      <div className="md:col-span-3">
+        <NewsletterEmbed mobile={false} theme={theme} />
+      </div>
+      <article className="md:col-span-9 bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden mb-8">
         {/* Overview Section */}
         <section className="p-6 border-b border-gray-100 dark:border-gray-700">
           <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
@@ -398,6 +425,7 @@ const content = () => {
           </div>
         </section>
       </article>
+      <NewsletterEmbed mobile theme={theme} />
     </main>
   );
 };
diff --git a/app/visualizer/linkedList/operations/insertion/content.jsx b/app/visualizer/linkedList/operations/insertion/content.jsx
index ef4b8d1..1ef837f 100755
--- a/app/visualizer/linkedList/operations/insertion/content.jsx
+++ b/app/visualizer/linkedList/operations/insertion/content.jsx
@@ -1,4 +1,28 @@
+"use client";
+import { useEffect, useState } from "react";
+import NewsletterEmbed from "@/app/components/ui/NewsletterEmbed";
+
 const content = () => {
+
+  const [theme, setTheme] = useState("light");
+
+  useEffect(() => {
+    const updateTheme = () => {
+      const savedTheme = localStorage.getItem("theme") || "light";
+      setTheme(savedTheme);
+    };
+
+    updateTheme();
+
+    window.addEventListener("storage", updateTheme);
+    window.addEventListener("themeChange", updateTheme);
+
+    return () => {
+      window.removeEventListener("storage", updateTheme);
+      window.removeEventListener("themeChange", updateTheme);
+    };
+  }, []);
+
   const overview = [
     `Linked List insertion involves adding new nodes to the linked data structure at various positions. Unlike arrays, linked lists allow efficient insertion at any point without reallocation or shifting of existing elements.`,
     `Insertion is a fundamental operation that enables dynamic growth of the list. The efficiency varies based on insertion position, from O(1) for head/tail (with tail pointer) to O(n) for arbitrary positions.`,
@@ -142,8 +166,11 @@ const content = () => {
   ];
 
   return (
-    <main className="max-w-4xl mx-auto">
-      <article className="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden mb-8">
+    <main className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-12 md:gap-4">
+      <div className="md:col-span-3">
+        <NewsletterEmbed mobile={false} theme={theme} />
+      </div>
+      <article className="md:col-span-9 bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden mb-8">
         {/* Overview Section */}
         <section className="p-6 border-b border-gray-100 dark:border-gray-700">
           <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
@@ -345,6 +372,7 @@ const content = () => {
           </div>
         </section>
       </article>
+      <NewsletterEmbed mobile theme={theme} />
     </main>
   );
 };
diff --git a/app/visualizer/linkedList/operations/merge/content.jsx b/app/visualizer/linkedList/operations/merge/content.jsx
index f7092aa..092a933 100755
--- a/app/visualizer/linkedList/operations/merge/content.jsx
+++ b/app/visualizer/linkedList/operations/merge/content.jsx
@@ -1,4 +1,28 @@
+"use client";
+import { useEffect, useState } from "react";
+import NewsletterEmbed from "@/app/components/ui/NewsletterEmbed";
+
 const content = () => {
+
+  const [theme, setTheme] = useState("light");
+
+  useEffect(() => {
+    const updateTheme = () => {
+      const savedTheme = localStorage.getItem("theme") || "light";
+      setTheme(savedTheme);
+    };
+
+    updateTheme();
+
+    window.addEventListener("storage", updateTheme);
+    window.addEventListener("themeChange", updateTheme);
+
+    return () => {
+      window.removeEventListener("storage", updateTheme);
+      window.removeEventListener("themeChange", updateTheme);
+    };
+  }, []);
+
   const overview = [
     `Merging two linked lists involves combining the nodes of both lists into one sorted list. This is typically done using a two-pointer approach where we repeatedly compare the heads of both lists and append the smaller node to the result.`,
     `This operation is especially useful when both input lists are already sorted. The result is also a sorted list without requiring additional sorting operations.`
@@ -30,8 +54,11 @@ const content = () => {
   ];
 
   return (
-    <main className="max-w-4xl mx-auto">
-      <article className="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden mb-8">
+    <main className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-12 md:gap-4">
+      <div className="md:col-span-3">
+        <NewsletterEmbed mobile={false} theme={theme} />
+      </div>
+      <article className="md:col-span-9 bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden mb-8">
         {/* Overview */}
         <section className="p-6 border-b border-gray-100 dark:border-gray-700">
           <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
@@ -84,6 +111,7 @@ const content = () => {
           </ul>
         </section>
       </article>
+      <NewsletterEmbed mobile theme={theme} />
     </main>
   );
 };
diff --git a/app/visualizer/linkedList/operations/reverse/content.jsx b/app/visualizer/linkedList/operations/reverse/content.jsx
index 88487dd..b98e7c2 100755
--- a/app/visualizer/linkedList/operations/reverse/content.jsx
+++ b/app/visualizer/linkedList/operations/reverse/content.jsx
@@ -1,4 +1,28 @@
+"use client";
+import { useEffect, useState } from "react";
+import NewsletterEmbed from "@/app/components/ui/NewsletterEmbed";
+
 const content = () => {
+
+  const [theme, setTheme] = useState("light");
+
+  useEffect(() => {
+    const updateTheme = () => {
+      const savedTheme = localStorage.getItem("theme") || "light";
+      setTheme(savedTheme);
+    };
+
+    updateTheme();
+
+    window.addEventListener("storage", updateTheme);
+    window.addEventListener("themeChange", updateTheme);
+
+    return () => {
+      window.removeEventListener("storage", updateTheme);
+      window.removeEventListener("themeChange", updateTheme);
+    };
+  }, []);
+
   const overview = [
     `Reversing a linked list involves changing the direction of the pointers so that the last node becomes the head and the head becomes the last node.`,
     `This operation is fundamental in many algorithms and helps in scenarios where you need to process the list in reverse order without using extra space.`
@@ -30,8 +54,11 @@ const content = () => {
   ];
 
   return (
-    <main className="max-w-4xl mx-auto">
-      <article className="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden mb-8">
+    <main className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-12 md:gap-4">
+      <div className="md:col-span-3">
+        <NewsletterEmbed mobile={false} theme={theme} />
+      </div>
+      <article className="md:col-span-9 bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden mb-8">
         {/* Overview */}
         <section className="p-6 border-b border-gray-100 dark:border-gray-700">
           <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
@@ -84,6 +111,7 @@ const content = () => {
           </ul>
         </section>
       </article>
+      <NewsletterEmbed mobile theme={theme} />
     </main>
   );
 };
diff --git a/app/visualizer/linkedList/operations/traversal/content.jsx b/app/visualizer/linkedList/operations/traversal/content.jsx
index c8f9463..95851bc 100755
--- a/app/visualizer/linkedList/operations/traversal/content.jsx
+++ b/app/visualizer/linkedList/operations/traversal/content.jsx
@@ -1,4 +1,28 @@
+"use client";
+import { useEffect, useState } from "react";
+import NewsletterEmbed from "@/app/components/ui/NewsletterEmbed";
+
 const content = () => {
+
+  const [theme, setTheme] = useState("light");
+
+  useEffect(() => {
+    const updateTheme = () => {
+      const savedTheme = localStorage.getItem("theme") || "light";
+      setTheme(savedTheme);
+    };
+
+    updateTheme();
+
+    window.addEventListener("storage", updateTheme);
+    window.addEventListener("themeChange", updateTheme);
+
+    return () => {
+      window.removeEventListener("storage", updateTheme);
+      window.removeEventListener("themeChange", updateTheme);
+    };
+  }, []);
+
   const overview = [
     `Linked List traversal involves visiting each node in the list exactly once, starting from the head and moving through the next pointers until the end is reached.`,
     `Traversal is essential for operations like searching, displaying, or processing each element of the list. It ensures that all elements are accessed in sequence.`,
@@ -81,8 +105,11 @@ const content = () => {
   ];
 
   return (
-    <main className="max-w-4xl mx-auto">
-      <article className="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden mb-8">
+    <main className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-12 md:gap-4">
+      <div className="md:col-span-3">
+        <NewsletterEmbed mobile={false} theme={theme} />
+      </div>
+      <article className="md:col-span-9 bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden mb-8">
         {/* Overview Section */}
         <section className="p-6 border-b border-gray-100 dark:border-gray-700">
           <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
@@ -254,6 +281,7 @@ const content = () => {
           </div>
         </section>
       </article>
+      <NewsletterEmbed mobile theme={theme} />
     </main>
   );
 };
diff --git a/app/visualizer/linkedList/types/circular/animation.jsx b/app/visualizer/linkedList/types/circular/animation.jsx
index da8d8ca..150d933 100755
--- a/app/visualizer/linkedList/types/circular/animation.jsx
+++ b/app/visualizer/linkedList/types/circular/animation.jsx
@@ -103,7 +103,7 @@ const CircularLinkedListVisualizer = () => {
         <h1 className="text-4xl md:text-4xl mt-6 ml-10 font-bold text-left text-gray-900 dark:text-white mb-0">
           <span className="text-black dark:text-white">Circular Linked List</span>
         </h1>
-        <div className="bg-black border border-none dark:bg-gray-600 w-100 h-[2px] rounded-xl mt-2 mb-5"></div>
+        <div className="bg-black border border-none dark:bg-gray-600 w-full h-[2px] rounded-xl mt-2 mb-5"></div>
         <Content />
         <p className="text-lg text-center text-gray-600 dark:text-gray-400 mb-8">
           Visualize Circular Linked List Operations
diff --git a/app/visualizer/linkedList/types/circular/content.jsx b/app/visualizer/linkedList/types/circular/content.jsx
index 275e539..72133fc 100755
--- a/app/visualizer/linkedList/types/circular/content.jsx
+++ b/app/visualizer/linkedList/types/circular/content.jsx
@@ -1,4 +1,28 @@
+"use client";
+import { useEffect, useState } from "react";
+import NewsletterEmbed from "@/app/components/ui/NewsletterEmbed";
+
 const content = () => {
+
+  const [theme, setTheme] = useState("light");
+
+  useEffect(() => {
+    const updateTheme = () => {
+      const savedTheme = localStorage.getItem("theme") || "light";
+      setTheme(savedTheme);
+    };
+
+    updateTheme();
+
+    window.addEventListener("storage", updateTheme);
+    window.addEventListener("themeChange", updateTheme);
+
+    return () => {
+      window.removeEventListener("storage", updateTheme);
+      window.removeEventListener("themeChange", updateTheme);
+    };
+  }, []);
+
   const overview = [
     `A Circular Linked List is a variation of a linked list where the last node points back to the first node instead of containing a null reference. This creates a circular structure that can be traversed indefinitely.`,
     `Circular linked lists can be either singly linked (each node has one pointer) or doubly linked (each node has two pointers). The circular nature enables continuous traversal and is particularly useful in round-robin scheduling and buffer implementations.`,
@@ -70,8 +94,11 @@ const content = () => {
   ];
 
   return (
-    <main className="max-w-4xl mx-auto">
-      <article className="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden mb-8">
+    <main className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-12 md:gap-4">
+      <div className="md:col-span-3">
+        <NewsletterEmbed mobile={false} theme={theme} />
+      </div>
+      <article className="md:col-span-9 bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden mb-8">
         {/* Overview Section */}
         <section className="p-6 border-b border-gray-100 dark:border-gray-700">
           <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
@@ -291,6 +318,7 @@ const content = () => {
           </div>
         </section>
       </article>
+      <NewsletterEmbed mobile theme={theme} />
     </main>
   );
 };
diff --git a/app/visualizer/linkedList/types/doubly/animation.jsx b/app/visualizer/linkedList/types/doubly/animation.jsx
index b6cb408..b36c79b 100755
--- a/app/visualizer/linkedList/types/doubly/animation.jsx
+++ b/app/visualizer/linkedList/types/doubly/animation.jsx
@@ -73,7 +73,7 @@ const DoublyLinkedListVisualizer = () => {
         <h1 className="text-4xl md:text-4xl mt-6 ml-10 font-bold text-left text-gray-900 dark:text-white mb-0">
           <span className="text-black dark:text-white">Doubly Linked List</span>
         </h1>
-        <div className="bg-black border border-none dark:bg-gray-600 w-100 h-[2px] rounded-xl mt-2 mb-5"></div>
+        <div className="bg-black border border-none dark:bg-gray-600 w-full h-[2px] rounded-xl mt-2 mb-5"></div>
         <Content />
         <p className="text-lg text-center text-gray-600 dark:text-gray-400 mb-8">
           Visualize Singly Linked List Operations
diff --git a/app/visualizer/linkedList/types/doubly/content.jsx b/app/visualizer/linkedList/types/doubly/content.jsx
index 41b217b..7c7ebe0 100755
--- a/app/visualizer/linkedList/types/doubly/content.jsx
+++ b/app/visualizer/linkedList/types/doubly/content.jsx
@@ -1,4 +1,28 @@
+"use client";
+import { useEffect, useState } from "react";
+import NewsletterEmbed from "@/app/components/ui/NewsletterEmbed";
+
 const content = () => {
+
+  const [theme, setTheme] = useState("light");
+
+  useEffect(() => {
+    const updateTheme = () => {
+      const savedTheme = localStorage.getItem("theme") || "light";
+      setTheme(savedTheme);
+    };
+
+    updateTheme();
+
+    window.addEventListener("storage", updateTheme);
+    window.addEventListener("themeChange", updateTheme);
+
+    return () => {
+      window.removeEventListener("storage", updateTheme);
+      window.removeEventListener("themeChange", updateTheme);
+    };
+  }, []);
+
   const overview = [
     `A Doubly Linked List is an advanced variation of the linked list where each node contains data and two pointers - one to the next node and another to the previous node. This bidirectional linkage enables traversal in both directions.`,
     `The list maintains head and tail pointers, allowing O(1) operations at both ends. Each node's previous pointer forms the backward chain, while the next pointer forms the forward chain.`,
@@ -107,8 +131,11 @@ const content = () => {
   ];
 
   return (
-    <main className="max-w-4xl mx-auto">
-      <article className="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden mb-8">
+    <main className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-12 md:gap-4">
+      <div className="md:col-span-3">
+        <NewsletterEmbed mobile={false} theme={theme} />
+      </div>
+      <article className="md:col-span-9 bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden mb-8">
         {/* Overview Section */}
         <section className="p-6 border-b border-gray-100 dark:border-gray-700">
           <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
@@ -330,6 +357,7 @@ const content = () => {
           </div>
         </section>
       </article>
+      <NewsletterEmbed mobile theme={theme} />
     </main>
   );
 };
diff --git a/app/visualizer/linkedList/types/singly/content.jsx b/app/visualizer/linkedList/types/singly/content.jsx
index 72bd1a5..e2c6732 100755
--- a/app/visualizer/linkedList/types/singly/content.jsx
+++ b/app/visualizer/linkedList/types/singly/content.jsx
@@ -1,6 +1,29 @@
 "use client";
+import { useEffect, useState } from "react";
+import NewsletterEmbed from "@/app/components/ui/NewsletterEmbed";
+
 
 const content = () => {
+
+  const [theme, setTheme] = useState("light");
+
+  useEffect(() => {
+    const updateTheme = () => {
+      const savedTheme = localStorage.getItem("theme") || "light";
+      setTheme(savedTheme);
+    };
+
+    updateTheme();
+
+    window.addEventListener("storage", updateTheme);
+    window.addEventListener("themeChange", updateTheme);
+
+    return () => {
+      window.removeEventListener("storage", updateTheme);
+      window.removeEventListener("themeChange", updateTheme);
+    };
+  }, []);
+
   const overview = [
     `A Singly Linked List is a linear data structure where each element (node) contains data and a pointer to the next node. Unlike arrays, linked lists don't have fixed sizes and allow efficient insertion/deletion at any position.`,
     `The list maintains a head pointer that points to the first node. The last node's next pointer is null, indicating the end of the list. This structure provides O(1) insertion/deletion at the head but O(n) access time for arbitrary elements.`,
@@ -87,8 +110,11 @@ const content = () => {
   ];
 
   return (
-    <main className="max-w-4xl mx-auto">
-      <article className="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden mb-8">
+    <main className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-12 md:gap-4">
+      <div className="md:col-span-3">
+        <NewsletterEmbed mobile={false} theme={theme} />
+      </div>
+      <article className="md:col-span-9 bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden mb-8">
         {/* Overview Section */}
         <section className="p-6 border-b border-gray-100 dark:border-gray-700">
           <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
@@ -281,6 +307,7 @@ const content = () => {
           </div>
         </section>
       </article>
+      <NewsletterEmbed mobile theme={theme} />
     </main>
   );
 };
diff --git a/app/visualizer/linkedList/types/singly/page.jsx b/app/visualizer/linkedList/types/singly/page.jsx
index aed7df8..f9b457c 100755
--- a/app/visualizer/linkedList/types/singly/page.jsx
+++ b/app/visualizer/linkedList/types/singly/page.jsx
@@ -75,7 +75,7 @@ export default function Page() {
             </h1>
             <ArticleActions />
           </div>
-          <div className="bg-black border border-none dark:bg-gray-600 w-100 h-[2px] rounded-xl my-10"></div>
+          <div className="bg-black border border-none dark:bg-gray-600 w-full h-[2px] rounded-xl my-10"></div>
           <Content />
         </section>
 
diff --git a/app/visualizer/queue/implementation/array/content.jsx b/app/visualizer/queue/implementation/array/content.jsx
index f513ba9..69c13b3 100755
--- a/app/visualizer/queue/implementation/array/content.jsx
+++ b/app/visualizer/queue/implementation/array/content.jsx
@@ -1,6 +1,7 @@
 "use client";
 import { useEffect, useState } from "react";
 import DailyDSAEmbed from "@/app/components/ui/DailyDSAEmbed";
+import NewsletterEmbed from "@/app/components/ui/NewsletterEmbed";
 
 const content = () => {
   const [theme, setTheme] = useState("light");
@@ -93,10 +94,12 @@ const content = () => {
   ];
 
   return (
-    <main className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-5 md:gap-4">
-
-      <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">
+    <main className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-12 md:gap-4">
+      <div className="md:col-span-3">
+        <NewsletterEmbed mobile={false} theme={theme} />
+        <DailyDSAEmbed mobile={false} theme={theme} />
+      </div>
+      <article className="md:col-span-9 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">
           <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
@@ -230,8 +233,7 @@ const content = () => {
           </div>
         </section>
       </article>
-
-      {/* Mobile iframe at bottom */}
+      <NewsletterEmbed mobile theme={theme} />
       <DailyDSAEmbed mobile theme={theme} />
     </main>
   );
diff --git a/app/visualizer/queue/implementation/array/page.jsx b/app/visualizer/queue/implementation/array/page.jsx
index 7e8452c..cc8b02d 100755
--- a/app/visualizer/queue/implementation/array/page.jsx
+++ b/app/visualizer/queue/implementation/array/page.jsx
@@ -72,7 +72,7 @@ export default function Page() {
             </h1>
             <ArticleActions />
           </div>
-          <div className="bg-black border border-none dark:bg-gray-600 w-100 h-[2px] rounded-xl my-10"></div>
+          <div className="bg-black border border-none dark:bg-gray-600 w-full h-[2px] rounded-xl my-10"></div>
           <Content />
         </section>
 
diff --git a/app/visualizer/queue/implementation/linkedList/content.jsx b/app/visualizer/queue/implementation/linkedList/content.jsx
index dbdc868..6981672 100755
--- a/app/visualizer/queue/implementation/linkedList/content.jsx
+++ b/app/visualizer/queue/implementation/linkedList/content.jsx
@@ -1,6 +1,7 @@
 "use client";
 import { useEffect, useState } from "react";
 import DailyDSAEmbed from "@/app/components/ui/DailyDSAEmbed";
+import NewsletterEmbed from "@/app/components/ui/NewsletterEmbed";
 
 const content = () => {
   const [theme, setTheme] = useState("light");
@@ -67,11 +68,12 @@ 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">
+    <main className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-12 md:gap-4">
+      <div className="md:col-span-3">
+        <NewsletterEmbed mobile={false} theme={theme} />
         <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">
+      <article className="md:col-span-9 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 */}
         <section className="p-6 border-b border-gray-100 dark:border-gray-700">
           <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
@@ -190,8 +192,7 @@ const content = () => {
           </div>
         </section>
       </article>
-
-      {/* Mobile iframe at bottom */}
+      <NewsletterEmbed mobile theme={theme} />
       <DailyDSAEmbed mobile theme={theme} />
     </main>
   );
diff --git a/app/visualizer/queue/implementation/linkedList/page.jsx b/app/visualizer/queue/implementation/linkedList/page.jsx
index 3af6eb3..5b90d6c 100755
--- a/app/visualizer/queue/implementation/linkedList/page.jsx
+++ b/app/visualizer/queue/implementation/linkedList/page.jsx
@@ -73,7 +73,7 @@ export default function Page() {
             </h1>
             <ArticleActions />
           </div>
-          <div className="bg-black border border-none dark:bg-gray-600 w-100 h-[2px] rounded-xl my-10"></div>
+          <div className="bg-black border border-none dark:bg-gray-600 w-full h-[2px] rounded-xl my-10"></div>
           <Content />
         </section>
 
diff --git a/app/visualizer/queue/operations/enqueue-dequeue/content.jsx b/app/visualizer/queue/operations/enqueue-dequeue/content.jsx
index e273eea..0e87bd8 100755
--- a/app/visualizer/queue/operations/enqueue-dequeue/content.jsx
+++ b/app/visualizer/queue/operations/enqueue-dequeue/content.jsx
@@ -2,6 +2,7 @@
 import ComplexityGraph from "@/app/components/ui/graph";
 import { useEffect, useState } from "react";
 import DailyDSAEmbed from "@/app/components/ui/DailyDSAEmbed";
+import NewsletterEmbed from "@/app/components/ui/NewsletterEmbed";
 
 const content = () => {
   const [theme, setTheme] = useState('light');
@@ -61,11 +62,12 @@ 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">
+    <main className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-12 md:gap-4">
+      <div className="md:col-span-3">
+        <NewsletterEmbed mobile={false} theme={theme} />
         <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">
+      <article className="md:col-span-9 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? */}
     <section className="p-6 border-b border-gray-100 dark:border-gray-700">
       <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
@@ -219,8 +221,7 @@ const content = () => {
       </div>
     </section>
   </article>
-
-  {/* Mobile iframe at bottom */}
+      <NewsletterEmbed mobile theme={theme} />
       <DailyDSAEmbed mobile theme={theme} />
 </main>
     );
diff --git a/app/visualizer/queue/operations/enqueue-dequeue/page.jsx b/app/visualizer/queue/operations/enqueue-dequeue/page.jsx
index 7167457..adec238 100755
--- a/app/visualizer/queue/operations/enqueue-dequeue/page.jsx
+++ b/app/visualizer/queue/operations/enqueue-dequeue/page.jsx
@@ -74,7 +74,7 @@ export default function Page() {
             </h1>
             <ArticleActions />
           </div>
-          <div className="bg-black border border-none dark:bg-gray-600 w-100 h-[2px] rounded-xl my-10"></div>
+          <div className="bg-black border border-none dark:bg-gray-600 w-full h-[2px] rounded-xl my-10"></div>
           <Content />
         </section>
 
diff --git a/app/visualizer/queue/operations/isempty/content.jsx b/app/visualizer/queue/operations/isempty/content.jsx
index 6461eb7..d9d1ebe 100755
--- a/app/visualizer/queue/operations/isempty/content.jsx
+++ b/app/visualizer/queue/operations/isempty/content.jsx
@@ -1,6 +1,7 @@
 "use client";
 import { useEffect, useState } from "react";
 import DailyDSAEmbed from "@/app/components/ui/DailyDSAEmbed";
+import NewsletterEmbed from "@/app/components/ui/NewsletterEmbed";
 
 const content = () => {
   const [theme, setTheme] = useState("light");
@@ -69,11 +70,12 @@ 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">
+    <main className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-12 md:gap-4">
+      <div className="md:col-span-3">
+        <NewsletterEmbed mobile={false} theme={theme} />
         <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">
+      <article className="md:col-span-9 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? */}
         <section className="p-6 border-b border-gray-100 dark:border-gray-700">
           <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
@@ -242,8 +244,7 @@ const content = () => {
           </div>
         </section>
       </article>
-
-      {/* Mobile iframe at bottom */}
+      <NewsletterEmbed mobile theme={theme} />
       <DailyDSAEmbed mobile theme={theme} />
     </main>
   );
diff --git a/app/visualizer/queue/operations/isempty/page.jsx b/app/visualizer/queue/operations/isempty/page.jsx
index eda3c6d..ce403e8 100755
--- a/app/visualizer/queue/operations/isempty/page.jsx
+++ b/app/visualizer/queue/operations/isempty/page.jsx
@@ -71,7 +71,7 @@ export default function Page() {
             </h1>
             <ArticleActions />
           </div>
-          <div className="bg-black border border-none dark:bg-gray-600 w-100 h-[2px] rounded-xl my-10"></div>
+          <div className="bg-black border border-none dark:bg-gray-600 w-full h-[2px] rounded-xl my-10"></div>
           <Content />
         </section>
 
diff --git a/app/visualizer/queue/operations/isfull/content.jsx b/app/visualizer/queue/operations/isfull/content.jsx
index bbe2470..5a5a880 100755
--- a/app/visualizer/queue/operations/isfull/content.jsx
+++ b/app/visualizer/queue/operations/isfull/content.jsx
@@ -1,6 +1,7 @@
 "use client";
 import { useEffect, useState } from "react";
 import DailyDSAEmbed from "@/app/components/ui/DailyDSAEmbed";
+import NewsletterEmbed from "@/app/components/ui/NewsletterEmbed";
 
 const content = () => {
   const [theme, setTheme] = useState("light");
@@ -79,11 +80,12 @@ 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">
+    <main className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-12 md:gap-4">
+      <div className="md:col-span-3">
+        <NewsletterEmbed mobile={false} theme={theme} />
         <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">
+      <article className="md:col-span-9 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? */}
         <section className="p-6 border-b border-gray-100 dark:border-gray-700">
           <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
@@ -258,8 +260,7 @@ const content = () => {
           </div>
         </section>
       </article>
-
-      {/* Mobile iframe at bottom */}
+      <NewsletterEmbed mobile theme={theme} />
       <DailyDSAEmbed mobile theme={theme} />
     </main>
   );
diff --git a/app/visualizer/queue/operations/isfull/page.jsx b/app/visualizer/queue/operations/isfull/page.jsx
index 2b0d03d..7cb1cad 100755
--- a/app/visualizer/queue/operations/isfull/page.jsx
+++ b/app/visualizer/queue/operations/isfull/page.jsx
@@ -71,7 +71,7 @@ export default function page() {
             </h1>
             <ArticleActions />
           </div>
-          <div className="bg-black border border-none dark:bg-gray-600 w-100 h-[2px] rounded-xl my-10"></div>
+          <div className="bg-black border border-none dark:bg-gray-600 w-full h-[2px] rounded-xl my-10"></div>
           <Content />
         </section>
 
diff --git a/app/visualizer/queue/operations/peek-front/content.jsx b/app/visualizer/queue/operations/peek-front/content.jsx
index 2c2981e..0ec8ef2 100755
--- a/app/visualizer/queue/operations/peek-front/content.jsx
+++ b/app/visualizer/queue/operations/peek-front/content.jsx
@@ -1,6 +1,7 @@
 "use client";
 import { useEffect, useState } from "react";
 import DailyDSAEmbed from "@/app/components/ui/DailyDSAEmbed";
+import NewsletterEmbed from "@/app/components/ui/NewsletterEmbed";
 
 const content = () => {
   const [theme, setTheme] = useState("light");
@@ -65,11 +66,12 @@ 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">
+    <main className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-12 md:gap-4">
+      <div className="md:col-span-3">
+        <NewsletterEmbed mobile={false} theme={theme} />
         <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">
+      <article className="md:col-span-9 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? */}
         <section className="p-6 border-b border-gray-100 dark:border-gray-700">
           <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
@@ -230,8 +232,7 @@ const content = () => {
           </div>
         </section>
       </article>
-
-      {/* Mobile iframe at bottom */}
+      <NewsletterEmbed mobile theme={theme} />
       <DailyDSAEmbed mobile theme={theme} />
     </main>
   );
diff --git a/app/visualizer/queue/operations/peek-front/page.jsx b/app/visualizer/queue/operations/peek-front/page.jsx
index 024c1a2..4d71213 100755
--- a/app/visualizer/queue/operations/peek-front/page.jsx
+++ b/app/visualizer/queue/operations/peek-front/page.jsx
@@ -73,7 +73,7 @@ export default function Page() {
             </h1>
             <ArticleActions />
           </div>
-          <div className="bg-black border border-none dark:bg-gray-600 w-100 h-[2px] rounded-xl my-10"></div>
+          <div className="bg-black border border-none dark:bg-gray-600 w-full h-[2px] rounded-xl my-10"></div>
           <Content />
         </section>
 
diff --git a/app/visualizer/queue/types/circular/content.jsx b/app/visualizer/queue/types/circular/content.jsx
index b39fe48..6ad0d40 100755
--- a/app/visualizer/queue/types/circular/content.jsx
+++ b/app/visualizer/queue/types/circular/content.jsx
@@ -1,6 +1,7 @@
 "use client";
 import { useEffect, useState } from "react";
 import DailyDSAEmbed from "@/app/components/ui/DailyDSAEmbed";
+import NewsletterEmbed from "@/app/components/ui/NewsletterEmbed";
 
 const content = () => {
   const [theme, setTheme] = useState("light");
@@ -83,11 +84,12 @@ 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">
+          <main className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-12 md:gap-4">
+      <div className="md:col-span-3">
+        <NewsletterEmbed mobile={false} theme={theme} />
         <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">
+      <article className="md:col-span-9 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? */}
     <section className="p-6 border-b border-gray-100 dark:border-gray-700">
       <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
@@ -227,8 +229,7 @@ const content = () => {
       </div>
     </section>
   </article>
-
-  {/* Mobile iframe at bottom */}
+      <NewsletterEmbed mobile theme={theme} />
       <DailyDSAEmbed mobile theme={theme} />
 </main>
     );
diff --git a/app/visualizer/queue/types/circular/page.jsx b/app/visualizer/queue/types/circular/page.jsx
index 981aa4e..608cd9c 100755
--- a/app/visualizer/queue/types/circular/page.jsx
+++ b/app/visualizer/queue/types/circular/page.jsx
@@ -71,7 +71,7 @@ export default function Page() {
             </h1>
             <ArticleActions />
           </div>
-          <div className="bg-black border border-none dark:bg-gray-600 w-100 h-[2px] rounded-xl my-10"></div>
+          <div className="bg-black border border-none dark:bg-gray-600 w-full h-[2px] rounded-xl my-10"></div>
           <Content />
         </section>
 
diff --git a/app/visualizer/queue/types/deque/content.jsx b/app/visualizer/queue/types/deque/content.jsx
index 5757ab1..e902a24 100755
--- a/app/visualizer/queue/types/deque/content.jsx
+++ b/app/visualizer/queue/types/deque/content.jsx
@@ -1,6 +1,7 @@
 "use client";
 import { useEffect, useState } from "react";
 import DailyDSAEmbed from "@/app/components/ui/DailyDSAEmbed";
+import NewsletterEmbed from "@/app/components/ui/NewsletterEmbed";
 
 const content = () => {
   const [theme, setTheme] = useState("light");
@@ -94,11 +95,12 @@ 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">
+    <main className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-12 md:gap-4">
+      <div className="md:col-span-3">
+        <NewsletterEmbed mobile={false} theme={theme} />
         <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">
+      <article className="md:col-span-9 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)? */}
         <section className="p-6 border-b border-gray-100 dark:border-gray-700">
           <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
@@ -262,8 +264,7 @@ const content = () => {
           </div>
         </section>
       </article>
-
-      {/* Mobile iframe at bottom */}
+      <NewsletterEmbed mobile theme={theme} />
       <DailyDSAEmbed mobile theme={theme} />
     </main>
   );
diff --git a/app/visualizer/queue/types/deque/page.jsx b/app/visualizer/queue/types/deque/page.jsx
index 3b1b56d..77d2451 100755
--- a/app/visualizer/queue/types/deque/page.jsx
+++ b/app/visualizer/queue/types/deque/page.jsx
@@ -71,7 +71,7 @@ export default function Page() {
             </h1>
             <ArticleActions />
           </div>
-          <div className="bg-black border border-none dark:bg-gray-600 w-100 h-[2px] rounded-xl my-10"></div>
+          <div className="bg-black border border-none dark:bg-gray-600 w-full h-[2px] rounded-xl my-10"></div>
           <Content />
         </section>
 
diff --git a/app/visualizer/queue/types/priority/content.jsx b/app/visualizer/queue/types/priority/content.jsx
index f6f0075..253b99f 100755
--- a/app/visualizer/queue/types/priority/content.jsx
+++ b/app/visualizer/queue/types/priority/content.jsx
@@ -1,6 +1,7 @@
 "use client";
 import { useEffect, useState } from "react";
 import DailyDSAEmbed from "@/app/components/ui/DailyDSAEmbed";
+import NewsletterEmbed from "@/app/components/ui/NewsletterEmbed";
 
 const content = () => {
   const [theme, setTheme] = useState("light");
@@ -108,11 +109,12 @@ 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">
+    <main className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-12 md:gap-4">
+      <div className="md:col-span-3">
+        <NewsletterEmbed mobile={false} theme={theme} />
         <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">
+      <article className="md:col-span-9 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? */}
         <section className="p-6 border-b border-gray-100 dark:border-gray-700">
           <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
@@ -253,8 +255,7 @@ const content = () => {
           </div>
         </section>
       </article>
-
-      {/* Mobile iframe at bottom */}
+      <NewsletterEmbed mobile theme={theme} />
       <DailyDSAEmbed mobile theme={theme} />
     </main>
   );
diff --git a/app/visualizer/queue/types/priority/page.jsx b/app/visualizer/queue/types/priority/page.jsx
index fe8f1d4..70c57cd 100755
--- a/app/visualizer/queue/types/priority/page.jsx
+++ b/app/visualizer/queue/types/priority/page.jsx
@@ -75,7 +75,7 @@ export default function Page() {
             </h1>
             <ArticleActions />
           </div>
-          <div className="bg-black border border-none dark:bg-gray-600 w-100 h-[2px] rounded-xl my-10"></div>
+          <div className="bg-black border border-none dark:bg-gray-600 w-full h-[2px] rounded-xl my-10"></div>
           <Content />
         </section>
 
diff --git a/app/visualizer/queue/types/singleEnded/content.jsx b/app/visualizer/queue/types/singleEnded/content.jsx
index 9d074c0..9c189d3 100755
--- a/app/visualizer/queue/types/singleEnded/content.jsx
+++ b/app/visualizer/queue/types/singleEnded/content.jsx
@@ -1,6 +1,7 @@
 "use client";
 import { useEffect, useState } from "react";
 import DailyDSAEmbed from "@/app/components/ui/DailyDSAEmbed";
+import NewsletterEmbed from "@/app/components/ui/NewsletterEmbed";
 
 const content = () => {
   const [theme, setTheme] = useState("light");
@@ -97,11 +98,12 @@ 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">
+    <main className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-12 md:gap-4">
+      <div className="md:col-span-3">
+        <NewsletterEmbed mobile={false} theme={theme} />
         <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">
+      <article className="md:col-span-9 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? */}
         <section className="p-6 border-b border-gray-100 dark:border-gray-700">
           <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
@@ -288,8 +290,7 @@ const content = () => {
           </div>
         </section>
       </article>
-
-      {/* Mobile iframe at bottom */}
+      <NewsletterEmbed mobile theme={theme} />
       <DailyDSAEmbed mobile theme={theme} />
     </main>
   );
diff --git a/app/visualizer/queue/types/singleEnded/page.jsx b/app/visualizer/queue/types/singleEnded/page.jsx
index a7e992f..0ea6f75 100755
--- a/app/visualizer/queue/types/singleEnded/page.jsx
+++ b/app/visualizer/queue/types/singleEnded/page.jsx
@@ -70,7 +70,7 @@ export default function Page() {
             </h1>
             <ArticleActions />
           </div>
-          <div className="bg-black border border-none dark:bg-gray-600 w-100 h-[2px] rounded-xl my-10"></div>
+          <div className="bg-black border border-none dark:bg-gray-600 w-full h-[2px] rounded-xl my-10"></div>
           <Content />
         </section>
 
diff --git a/app/visualizer/searching/binarysearch/content.jsx b/app/visualizer/searching/binarysearch/content.jsx
index edd8938..bb1df1e 100755
--- a/app/visualizer/searching/binarysearch/content.jsx
+++ b/app/visualizer/searching/binarysearch/content.jsx
@@ -1,6 +1,7 @@
 "use client";
 import ComplexityGraph from "@/app/components/ui/graph";
 import DailyDSAEmbed from "@/app/components/ui/DailyDSAEmbed";
+import NewsletterEmbed from "@/app/components/ui/NewsletterEmbed";
 import { useEffect, useState } from "react";
 
 const content = () => {
@@ -60,9 +61,12 @@ const content = () => {
   ];
 
   return (
-    <main className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-5 md:gap-4">
-      <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">
+    <main className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-12 md:gap-4">
+      <div className="md:col-span-3">
+        <NewsletterEmbed mobile={false} theme={theme} />
+        <DailyDSAEmbed mobile={false} theme={theme} />
+      </div>
+      <article className="md:col-span-9 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">
           <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
@@ -184,8 +188,7 @@ const content = () => {
           </div>
         </section>
       </article>
-
-      {/* Mobile iframe at bottom */}
+      <NewsletterEmbed mobile theme={theme} />
       <DailyDSAEmbed mobile theme={theme} />
     </main>
   );
diff --git a/app/visualizer/searching/binarysearch/page.jsx b/app/visualizer/searching/binarysearch/page.jsx
index 912bca5..138e359 100755
--- a/app/visualizer/searching/binarysearch/page.jsx
+++ b/app/visualizer/searching/binarysearch/page.jsx
@@ -82,7 +82,7 @@ export default function Page() {
             </h1>
             <ArticleActions />
           </div>
-          <div className="bg-black border border-none dark:bg-gray-600 w-100 h-[2px] rounded-xl my-10"></div>
+          <div className="bg-black border border-none dark:bg-gray-600 w-full h-[2px] rounded-xl my-10"></div>
           <Content />
         </section>
 
diff --git a/app/visualizer/searching/linearsearch/content.jsx b/app/visualizer/searching/linearsearch/content.jsx
index fdbc0cd..3bb674e 100755
--- a/app/visualizer/searching/linearsearch/content.jsx
+++ b/app/visualizer/searching/linearsearch/content.jsx
@@ -1,6 +1,7 @@
 "use client";
 import ComplexityGraph from "@/app/components/ui/graph";
 import DailyDSAEmbed from "@/app/components/ui/DailyDSAEmbed";
+import NewsletterEmbed from "@/app/components/ui/NewsletterEmbed";
 import { useEffect, useState } from "react";
 
 const content = () => {
@@ -60,9 +61,12 @@ const content = () => {
   ];
 
   return (
-    <main className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-5 md:gap-4">
-      <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">
+    <main className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-12 md:gap-4">
+      <div className="md:col-span-3">
+        <NewsletterEmbed mobile={false} theme={theme} />
+        <DailyDSAEmbed mobile={false} theme={theme} />
+      </div>
+      <article className="md:col-span-9 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">
           <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
@@ -174,8 +178,7 @@ const content = () => {
           </div>
         </section>
       </article>
-
-      {/* Mobile iframe at bottom */}
+      <NewsletterEmbed mobile theme={theme} />
       <DailyDSAEmbed mobile theme={theme} />
     </main>
   );
diff --git a/app/visualizer/searching/linearsearch/page.jsx b/app/visualizer/searching/linearsearch/page.jsx
index 392024b..0ee920b 100755
--- a/app/visualizer/searching/linearsearch/page.jsx
+++ b/app/visualizer/searching/linearsearch/page.jsx
@@ -82,7 +82,7 @@ export default function Page() {
             </h1>
             <ArticleActions />
           </div>
-          <div className="bg-black border border-none dark:bg-gray-600 w-100 h-[2px] rounded-xl my-10"></div>
+          <div className="bg-black border border-none dark:bg-gray-600 w-full h-[2px] rounded-xl my-10"></div>
           <Content />
         </section>
 
diff --git a/app/visualizer/sorting/bubblesort/content.jsx b/app/visualizer/sorting/bubblesort/content.jsx
index d32bdc5..89411c7 100755
--- a/app/visualizer/sorting/bubblesort/content.jsx
+++ b/app/visualizer/sorting/bubblesort/content.jsx
@@ -2,6 +2,7 @@
 import ComplexityGraph from "@/app/components/ui/graph";
 import { useEffect, useState } from "react";
 import DailyDSAEmbed from "@/app/components/ui/DailyDSAEmbed";
+import NewsletterEmbed from "@/app/components/ui/NewsletterEmbed";
 
 const content = () => {
   const [theme, setTheme] = useState("light");
@@ -78,9 +79,12 @@ const content = () => {
   ];
 
   return (
-    <main className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-5 md:gap-4">
-      <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">
+    <main className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-12 md:gap-4">
+      <div className="md:col-span-3">
+        <NewsletterEmbed mobile={false} theme={theme} />
+        <DailyDSAEmbed mobile={false} theme={theme} />
+      </div>
+      <article className="md:col-span-9 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">
           <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
@@ -223,8 +227,7 @@ const content = () => {
           </div>
         </section>
       </article>
-
-      {/* Mobile iframe at bottom */}
+      <NewsletterEmbed mobile theme={theme} />
       <DailyDSAEmbed mobile theme={theme} />
     </main>
   );
diff --git a/app/visualizer/sorting/bubblesort/page.jsx b/app/visualizer/sorting/bubblesort/page.jsx
index f5198f3..3fd185b 100755
--- a/app/visualizer/sorting/bubblesort/page.jsx
+++ b/app/visualizer/sorting/bubblesort/page.jsx
@@ -78,7 +78,7 @@ export default function Page() {
             </h1>
             <ArticleActions />
           </div>
-          <div className="bg-black border border-none dark:bg-gray-600 w-100 h-[2px] rounded-xl my-10"></div>
+          <div className="bg-black border border-none dark:bg-gray-600 w-full h-[2px] rounded-xl my-10"></div>
           <Content />
         </section>
 
diff --git a/app/visualizer/sorting/insertionsort/content.jsx b/app/visualizer/sorting/insertionsort/content.jsx
index 2cb3d69..e0e1b37 100755
--- a/app/visualizer/sorting/insertionsort/content.jsx
+++ b/app/visualizer/sorting/insertionsort/content.jsx
@@ -2,6 +2,7 @@
 import ComplexityGraph from "@/app/components/ui/graph";
 import { useEffect, useState } from "react";
 import DailyDSAEmbed from "@/app/components/ui/DailyDSAEmbed";
+import NewsletterEmbed from "@/app/components/ui/NewsletterEmbed";
 
 const content = () => {
   const [theme, setTheme] = useState('light');
@@ -91,9 +92,12 @@ const content = () => {
   ];
 
   return (
-    <main className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-5 md:gap-4">
-      <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">
+    <main className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-12 md:gap-4">
+      <div className="md:col-span-3">
+        <NewsletterEmbed mobile={false} theme={theme} />
+        <DailyDSAEmbed mobile={false} theme={theme} />
+      </div>
+      <article className="md:col-span-9 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">
           <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
@@ -241,8 +245,7 @@ const content = () => {
           </div>
         </section>
       </article>
-
-      {/* Mobile iframe at bottom */}
+      <NewsletterEmbed mobile theme={theme} />
       <DailyDSAEmbed mobile theme={theme} />
     </main>
   );
diff --git a/app/visualizer/sorting/insertionsort/page.jsx b/app/visualizer/sorting/insertionsort/page.jsx
index c805310..6f5e624 100755
--- a/app/visualizer/sorting/insertionsort/page.jsx
+++ b/app/visualizer/sorting/insertionsort/page.jsx
@@ -78,7 +78,7 @@ export default function Page() {
             </h1>
             <ArticleActions />
           </div>
-          <div className="bg-black border border-none dark:bg-gray-600 w-100 h-[2px] rounded-xl my-10"></div>
+          <div className="bg-black border border-none dark:bg-gray-600 w-full h-[2px] rounded-xl my-10"></div>
           <Content />
         </section>
 
diff --git a/app/visualizer/sorting/mergesort/content.jsx b/app/visualizer/sorting/mergesort/content.jsx
index 93104b1..ec604f2 100755
--- a/app/visualizer/sorting/mergesort/content.jsx
+++ b/app/visualizer/sorting/mergesort/content.jsx
@@ -2,6 +2,7 @@
 import ComplexityGraph from "@/app/components/ui/graph";
 import { useEffect, useState } from "react";
 import DailyDSAEmbed from "@/app/components/ui/DailyDSAEmbed";
+import NewsletterEmbed from "@/app/components/ui/NewsletterEmbed";
 
 const content = () => {
   const [theme, setTheme] = useState('light');
@@ -84,9 +85,12 @@ const content = () => {
   ];
 
   return (
-    <main className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-5 md:gap-4">
-      <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">
+    <main className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-12 md:gap-4">
+      <div className="md:col-span-3">
+        <NewsletterEmbed mobile={false} theme={theme} />
+        <DailyDSAEmbed mobile={false} theme={theme} />
+      </div>
+      <article className="md:col-span-9 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">
           <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
@@ -230,8 +234,7 @@ const content = () => {
           </div>
         </section>
       </article>
-
-      {/* Mobile iframe at bottom */}
+      <NewsletterEmbed mobile theme={theme} />
       <DailyDSAEmbed mobile theme={theme} />
     </main>
   );
diff --git a/app/visualizer/sorting/mergesort/page.jsx b/app/visualizer/sorting/mergesort/page.jsx
index 41116fa..b579580 100755
--- a/app/visualizer/sorting/mergesort/page.jsx
+++ b/app/visualizer/sorting/mergesort/page.jsx
@@ -76,7 +76,7 @@ export default function Page() {
             </h1>
             <ArticleActions />
           </div>
-          <div className="bg-black border border-none dark:bg-gray-600 w-100 h-[2px] rounded-xl my-10"></div>
+          <div className="bg-black border border-none dark:bg-gray-600 w-full h-[2px] rounded-xl my-10"></div>
           <Content />
         </section>
 
diff --git a/app/visualizer/sorting/quicksort/content.jsx b/app/visualizer/sorting/quicksort/content.jsx
index b1c5cd4..e867595 100755
--- a/app/visualizer/sorting/quicksort/content.jsx
+++ b/app/visualizer/sorting/quicksort/content.jsx
@@ -2,6 +2,7 @@
 import ComplexityGraph from "@/app/components/ui/graph";
 import { useEffect, useState } from "react";
 import DailyDSAEmbed from "@/app/components/ui/DailyDSAEmbed";
+import NewsletterEmbed from "@/app/components/ui/NewsletterEmbed";
 
 const content = () => {
   const [theme, setTheme] = useState('light');
@@ -125,9 +126,12 @@ const content = () => {
   ];
 
   return (
-    <main className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-5 md:gap-4">
-      <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">
+    <main className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-12 md:gap-4">
+      <div className="md:col-span-3">
+        <NewsletterEmbed mobile={false} theme={theme} />
+        <DailyDSAEmbed mobile={false} theme={theme} />
+      </div>
+      <article className="md:col-span-9 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">
           <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
@@ -325,8 +329,7 @@ const content = () => {
           </div>
         </section>
       </article>
-
-      {/* Mobile iframe at bottom */}
+      <NewsletterEmbed mobile theme={theme} />
       <DailyDSAEmbed mobile theme={theme} />
     </main>
   );
diff --git a/app/visualizer/sorting/quicksort/page.jsx b/app/visualizer/sorting/quicksort/page.jsx
index 4fcb0ae..be18adf 100755
--- a/app/visualizer/sorting/quicksort/page.jsx
+++ b/app/visualizer/sorting/quicksort/page.jsx
@@ -77,7 +77,7 @@ export default function Page() {
             </h1>
             <ArticleActions />
           </div>
-          <div className="bg-black border border-none dark:bg-gray-600 w-100 h-[2px] rounded-xl my-10"></div>
+          <div className="bg-black border border-none dark:bg-gray-600 w-full h-[2px] rounded-xl my-10"></div>
           <Content />
         </section>
 
diff --git a/app/visualizer/sorting/selectionsort/content.jsx b/app/visualizer/sorting/selectionsort/content.jsx
index ead90e2..cafc98c 100755
--- a/app/visualizer/sorting/selectionsort/content.jsx
+++ b/app/visualizer/sorting/selectionsort/content.jsx
@@ -2,6 +2,7 @@
 import ComplexityGraph from "@/app/components/ui/graph";
 import { useEffect, useState } from "react";
 import DailyDSAEmbed from "@/app/components/ui/DailyDSAEmbed";
+import NewsletterEmbed from "@/app/components/ui/NewsletterEmbed";
 
 const content = () => {
   const [theme, setTheme] = useState('light');
@@ -94,9 +95,12 @@ const content = () => {
   ];
 
   return (
-    <main className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-5 md:gap-4">
-      <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">
+    <main className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-12 md:gap-4">
+      <div className="md:col-span-3">
+        <NewsletterEmbed mobile={false} theme={theme} />
+        <DailyDSAEmbed mobile={false} theme={theme} />
+      </div>
+      <article className="md:col-span-9 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">
           <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
@@ -278,8 +282,7 @@ const content = () => {
           </div>
         </section>
       </article>
-
-      {/* Mobile iframe at bottom */}
+      <NewsletterEmbed mobile theme={theme} />
       <DailyDSAEmbed mobile theme={theme} />
     </main>
   );
diff --git a/app/visualizer/sorting/selectionsort/page.jsx b/app/visualizer/sorting/selectionsort/page.jsx
index 91959a1..ce3f74c 100755
--- a/app/visualizer/sorting/selectionsort/page.jsx
+++ b/app/visualizer/sorting/selectionsort/page.jsx
@@ -76,7 +76,7 @@ export default function Page() {
             <ArticleActions />
           </div>
 
-          <div className="bg-black border border-none dark:bg-gray-600 w-100 h-[2px] rounded-xl my-10"></div>
+          <div className="bg-black border border-none dark:bg-gray-600 w-full h-[2px] rounded-xl my-10"></div>
           <Content />
         </section>
 
diff --git a/app/visualizer/stack/implementation/usingArray/content.jsx b/app/visualizer/stack/implementation/usingArray/content.jsx
index 2880efe..08527ab 100755
--- a/app/visualizer/stack/implementation/usingArray/content.jsx
+++ b/app/visualizer/stack/implementation/usingArray/content.jsx
@@ -3,6 +3,7 @@ import React from "react";
 import { motion } from "framer-motion";
 import { useEffect, useState } from "react";
 import DailyDSAEmbed from "@/app/components/ui/DailyDSAEmbed";
+import NewsletterEmbed from "@/app/components/ui/NewsletterEmbed";
 
 const content = () => {
   const [theme, setTheme] = useState("light");
@@ -62,11 +63,12 @@ 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">
+    <main className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-12 md:gap-4">
+      <div className="md:col-span-3">
+        <NewsletterEmbed mobile={false} theme={theme} />
         <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">
+      <article className="md:col-span-9 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 className="p-6 border-b border-gray-100 dark:border-gray-700">
           <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
@@ -211,8 +213,7 @@ const content = () => {
           </div>
         </section>
       </article>
-
-      {/* Mobile iframe at bottom */}
+      <NewsletterEmbed mobile theme={theme} />
       <DailyDSAEmbed mobile theme={theme} />
     </main>
   );
diff --git a/app/visualizer/stack/implementation/usingArray/page.jsx b/app/visualizer/stack/implementation/usingArray/page.jsx
index e583246..9fd916c 100755
--- a/app/visualizer/stack/implementation/usingArray/page.jsx
+++ b/app/visualizer/stack/implementation/usingArray/page.jsx
@@ -72,7 +72,7 @@ export default function Page() {
             </h1>
             <ArticleActions />
           </div>
-          <div className="bg-black border border-none dark:bg-gray-600 w-100 h-[2px] rounded-xl my-10"></div>
+          <div className="bg-black border border-none dark:bg-gray-600 w-full h-[2px] rounded-xl my-10"></div>
           <Content />
         </section>
 
diff --git a/app/visualizer/stack/implementation/usingLinkedList/content.jsx b/app/visualizer/stack/implementation/usingLinkedList/content.jsx
index a8d6d40..0bb15cb 100755
--- a/app/visualizer/stack/implementation/usingLinkedList/content.jsx
+++ b/app/visualizer/stack/implementation/usingLinkedList/content.jsx
@@ -1,4 +1,7 @@
 "use client";
+
+import DailyDSAEmbed from "@/app/components/ui/DailyDSAEmbed";
+import NewsletterEmbed from "@/app/components/ui/NewsletterEmbed";
 import React from "react";
 import { useEffect, useState } from "react";
 
@@ -27,22 +30,25 @@ const content = () => {
   ];
 
   const opeartions = [
-    { points : "Initialize Stack",
-      subpoints : [
+    {
+      points: "Initialize Stack",
+      subpoints: [
         "Create a head pointer initialized to null.",
         "Optional: Maintain a size counter initialized to 0.",
       ],
-     },
-    { points : "push()",
-      subpoints : [
+    },
+    {
+      points: "push()",
+      subpoints: [
         "Create a new node with the given data.",
         "Set new node's next pointer to current head.",
         "Update head to point to the new node.",
         "Increment size counter (if maintained).",
       ],
-     },
-    { points : "pop()",
-      subpoints : [
+    },
+    {
+      points: "pop()",
+      subpoints: [
         "Check if stack is empty (head is null).",
         `If empty, return "Stack Underflow".`,
         "Store current head node in a temporary variabl.",
@@ -50,227 +56,271 @@ const content = () => {
         "Decrement size counter (if maintained).",
         "Return data from the temporary node.",
       ],
-     },
+    },
   ];
 
   const helper = [
-    { points : "peek()",
-      subpoints : [
+    {
+      points: "peek()",
+      subpoints: [
         "Check if stack is empty (head is null).",
         "If empty, return null.",
         "Return data from head node without removal.",
       ],
-     },
-    { points : "isEmpty()",
-      subpoints : [
-        "Return true if head is null.",
-        "Return false otherwise.",
-      ],
-     },
-    { points : "size()",
-      subpoints : [
+    },
+    {
+      points: "isEmpty()",
+      subpoints: ["Return true if head is null.", "Return false otherwise."],
+    },
+    {
+      points: "size()",
+      subpoints: [
         "If size counter is maintained, return its value.",
         "Otherwise, traverse the list and count nodes.",
       ],
-     },
+    },
   ];
 
-    return (
-    <main className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-5 md:gap-4">
-            <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">
-      <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
-        <span className="w-1 h-6 bg-blue-500 mr-3 rounded-full"></span>
-        What is Stack Implementation Using Linked List?
-      </h1>
-      <div className="prose dark:prose-invert max-w-none">
-        <p className="text-gray-700 dark:text-gray-300 leading-relaxed">
-          {paragraph[0]}
-        </p>
+  return (
+    <main className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-12 md:gap-4">
+      <div className="md:col-span-3">
+        <NewsletterEmbed mobile={false} theme={theme} />
+        <DailyDSAEmbed mobile={false} theme={theme} />
       </div>
-    </section>
+      <article className="md:col-span-9 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">
+          <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-blue-500 mr-3 rounded-full"></span>
+            What is Stack Implementation Using Linked List?
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <p className="text-gray-700 dark:text-gray-300 leading-relaxed">
+              {paragraph[0]}
+            </p>
+          </div>
+        </section>
 
-    {/* Algorithmic Steps */}
-    <section className="p-6 border-b border-gray-100 dark:border-gray-700">
+        {/* Algorithmic Steps */}
+        <section className="p-6 border-b border-gray-100 dark:border-gray-700">
           <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
             <span className="w-1 h-6 bg-blue-500 mr-3 rounded-full"></span>
             Algorithmic Steps
           </h1>
 
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-        {/* Stack Basic Operations */}
-        <div className="rounded-lg p-4 bg-white dark:bg-neutral-950 shadow-md">
-          <h2 className="text-lg sm:text-xl mb-3 font-bold text-center">
-            Stack Basic Operations
-          </h2>
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+            {/* Stack Basic Operations */}
+            <div className="rounded-lg p-4 bg-white dark:bg-neutral-950 shadow-md">
+              <h2 className="text-lg sm:text-xl mb-3 font-bold text-center">
+                Stack Basic Operations
+              </h2>
 
-          <div className="space-y-4">
-            <div className="p-4 rounded-lg bg-gray-50 dark:bg-neutral-900">
-              <ul className="space-y-3">
-                {opeartions.map((item, index) => (
-                  <li key={index}>
-                    <h3 className="font-semibold mb-2 text-gray-900 dark:text-white">
-                      {item.points}
-                    </h3>
-                    {item.subpoints && (
-                      <ol className="space-y-2 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-                        {item.subpoints.map((subitem, subindex) => (
-                          <li key={subindex} className="text-gray-700 dark:text-gray-300 pl-2">
-                            {subitem}
-                          </li>
-                        ))}
-                      </ol>
-                    )}
-                  </li>
-                ))}
-              </ul>
+              <div className="space-y-4">
+                <div className="p-4 rounded-lg bg-gray-50 dark:bg-neutral-900">
+                  <ul className="space-y-3">
+                    {opeartions.map((item, index) => (
+                      <li key={index}>
+                        <h3 className="font-semibold mb-2 text-gray-900 dark:text-white">
+                          {item.points}
+                        </h3>
+                        {item.subpoints && (
+                          <ol className="space-y-2 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+                            {item.subpoints.map((subitem, subindex) => (
+                              <li
+                                key={subindex}
+                                className="text-gray-700 dark:text-gray-300 pl-2"
+                              >
+                                {subitem}
+                              </li>
+                            ))}
+                          </ol>
+                        )}
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              </div>
             </div>
-          </div>
-        </div>
 
-        {/* Stack Helper Operations */}
-        <div className="rounded-lg p-4 bg-white dark:bg-neutral-950 shadow-md">
-          <h2 className="text-lg sm:text-xl mb-3 font-bold text-center">
-            Stack Helper Operations
-          </h2>
+            {/* Stack Helper Operations */}
+            <div className="rounded-lg p-4 bg-white dark:bg-neutral-950 shadow-md">
+              <h2 className="text-lg sm:text-xl mb-3 font-bold text-center">
+                Stack Helper Operations
+              </h2>
 
-          <div className="space-y-4">
-            <div className="p-4 rounded-lg bg-gray-50 dark:bg-neutral-900">
-              <ul className="space-y-3">
-                {helper.map((item, index) => (
-                  <li key={index}>
-                    <h3 className="font-semibold mb-2 text-gray-900 dark:text-white">
-                      {item.points}
-                    </h3>
-                    {item.subpoints && (
-                      <ol className="space-y-2 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-                        {item.subpoints.map((subitem, subindex) => (
-                          <li key={subindex} className="text-gray-700 dark:text-gray-300 pl-2">
-                            {subitem}
-                          </li>
-                        ))}
-                      </ol>
-                    )}
-                  </li>
-                ))}
-              </ul>
+              <div className="space-y-4">
+                <div className="p-4 rounded-lg bg-gray-50 dark:bg-neutral-900">
+                  <ul className="space-y-3">
+                    {helper.map((item, index) => (
+                      <li key={index}>
+                        <h3 className="font-semibold mb-2 text-gray-900 dark:text-white">
+                          {item.points}
+                        </h3>
+                        {item.subpoints && (
+                          <ol className="space-y-2 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+                            {item.subpoints.map((subitem, subindex) => (
+                              <li
+                                key={subindex}
+                                className="text-gray-700 dark:text-gray-300 pl-2"
+                              >
+                                {subitem}
+                              </li>
+                            ))}
+                          </ol>
+                        )}
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              </div>
             </div>
           </div>
-        </div>
-      </div>
-    </section>
+        </section>
 
-    {/* Time Complexity */}
-    <section className="p-6 border-b border-gray-100 dark:border-gray-700">
-      <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
-        <span className="w-1 h-6 bg-blue-500 mr-3 rounded-full"></span>
-        Time Complexity
-      </h1>
-      <div className="prose dark:prose-invert max-w-none overflow-x-auto">
-        <table className="min-w-full border-collapse border border-gray-400">
-          <thead>
-            <tr className="bg-gray-100 dark:bg-blue-900">
-              <th className="border border-blue-400 p-3 font-semibold">Operation</th>
-              <th className="border border-blue-400 p-3 font-semibold">Complexity</th>
-              <th className="border border-blue-400 p-3 font-semibold hidden sm:table-cell">
-                Reason
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            {[
-              ["push()", "O(1)", "Only head pointer modification"],
-              ["pop()", "O(1)", "Only head pointer modification"],
-              ["peek()", "O(1)", "Single node access"],
-              ["isEmpty()", "O(1)", "Head pointer check"],
-              ["size()", "O(1) or O(n)", "Depends on counter implementation"],
-            ].map(([op, comp, reason], index) => (
-              <tr
-                key={op}
-                className={index % 2 === 0 ? "bg-white dark:bg-neutral-950" : "bg-blue-50 dark:bg-neutral-900"}
-              >
-                <td className="border border-blue-400 p-3">{op}</td>
-                <td className="border border-blue-400 p-3 font-mono">
-                  {comp}
-                </td>
-                <td className="border border-blue-400 p-3 hidden sm:table-cell">
-                  {reason}
-                </td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
-    </section>
+        {/* Time Complexity */}
+        <section className="p-6 border-b border-gray-100 dark:border-gray-700">
+          <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-blue-500 mr-3 rounded-full"></span>
+            Time Complexity
+          </h1>
+          <div className="prose dark:prose-invert max-w-none overflow-x-auto">
+            <table className="min-w-full border-collapse border border-gray-400">
+              <thead>
+                <tr className="bg-gray-100 dark:bg-blue-900">
+                  <th className="border border-blue-400 p-3 font-semibold">
+                    Operation
+                  </th>
+                  <th className="border border-blue-400 p-3 font-semibold">
+                    Complexity
+                  </th>
+                  <th className="border border-blue-400 p-3 font-semibold hidden sm:table-cell">
+                    Reason
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                {[
+                  ["push()", "O(1)", "Only head pointer modification"],
+                  ["pop()", "O(1)", "Only head pointer modification"],
+                  ["peek()", "O(1)", "Single node access"],
+                  ["isEmpty()", "O(1)", "Head pointer check"],
+                  [
+                    "size()",
+                    "O(1) or O(n)",
+                    "Depends on counter implementation",
+                  ],
+                ].map(([op, comp, reason], index) => (
+                  <tr
+                    key={op}
+                    className={
+                      index % 2 === 0
+                        ? "bg-white dark:bg-neutral-950"
+                        : "bg-blue-50 dark:bg-neutral-900"
+                    }
+                  >
+                    <td className="border border-blue-400 p-3">{op}</td>
+                    <td className="border border-blue-400 p-3 font-mono">
+                      {comp}
+                    </td>
+                    <td className="border border-blue-400 p-3 hidden sm:table-cell">
+                      {reason}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </section>
 
-    {/* Key Characteristics */}
-    <section className="p-6 border-b border-gray-100 dark:border-gray-700">
-      <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
-        <span className="w-1 h-6 bg-blue-500 mr-3 rounded-full"></span>
-        Key Characteristics
-      </h1>
-      <div className="prose dark:prose-invert max-w-none">
-        <ul className="space-y-3 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-          {[
-            "Dynamic Size: No fixed capacity (grows as needed)",
-            "Memory Efficiency: Uses only needed memory",
-            "No Wasted Space: Unlike array implementation",
-            "Extra Memory: Requires space for pointers",
-            "Flexibility: Can grow until memory exhausted",
-          ].map((item) => (
-            <li key={item} className="text-gray-700 dark:text-gray-300 pl-2">
-              {item}
-            </li>
-          ))}
-        </ul>
-      </div>
-    </section>
+        {/* Key Characteristics */}
+        <section className="p-6 border-b border-gray-100 dark:border-gray-700">
+          <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-blue-500 mr-3 rounded-full"></span>
+            Key Characteristics
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <ul className="space-y-3 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {[
+                "Dynamic Size: No fixed capacity (grows as needed)",
+                "Memory Efficiency: Uses only needed memory",
+                "No Wasted Space: Unlike array implementation",
+                "Extra Memory: Requires space for pointers",
+                "Flexibility: Can grow until memory exhausted",
+              ].map((item) => (
+                <li
+                  key={item}
+                  className="text-gray-700 dark:text-gray-300 pl-2"
+                >
+                  {item}
+                </li>
+              ))}
+            </ul>
+          </div>
+        </section>
 
-    {/* Comparison Section */}
-    <section className="p-6">
-      <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
-        <span className="w-1 h-6 bg-blue-500 mr-3 rounded-full"></span>
-        Linked List vs Array Implementation
-      </h1>
-      <div className="prose dark:prose-invert max-w-none overflow-x-auto">
-        <table className="min-w-full border-collapse border border-gray-400">
-          <thead>
-            <tr className="bg-gray-100 dark:bg-blue-900">
-              <th className="border border-blue-400 p-3 font-semibold">Feature</th>
-              <th className="border border-blue-400 p-3 font-semibold">Linked List</th>
-              <th className="border border-blue-400 p-3 font-semibold">Array</th>
-            </tr>
-          </thead>
-          <tbody>
-            {[
-              ["Memory Usage", "Extra for pointers", "Fixed size, may be wasted"],
-              ["Dynamic Size", "Yes", "No (unless resized)"],
-              ["Memory Allocation", "Dynamic", "Static (usually)"],
-              ["Access Time", "O(1) for top", "O(1) for all"],
-              ["Implementation Complexity", "Slightly more complex", "Simpler"],
-            ].map(([feature, ll, arr], index) => (
-              <tr
-                key={feature}
-                className={index % 2 === 0 ? "bg-white dark:bg-neutral-950" : "bg-gray-50 dark:bg-neutral-900"}
-              >
-                <td className="border border-blue-400 p-3">{feature}</td>
-                <td className="border border-blue-400 p-3 font-mono">
-                  {ll}
-                </td>
-                <td className="border border-blue-400 p-3 font-mono">
-                  {arr}
-                </td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
-    </section>
-  </article>
-</main>
-    );
-  };
-  
-  export default content;
\ No newline at end of file
+        {/* Comparison Section */}
+        <section className="p-6">
+          <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-blue-500 mr-3 rounded-full"></span>
+            Linked List vs Array Implementation
+          </h1>
+          <div className="prose dark:prose-invert max-w-none overflow-x-auto">
+            <table className="min-w-full border-collapse border border-gray-400">
+              <thead>
+                <tr className="bg-gray-100 dark:bg-blue-900">
+                  <th className="border border-blue-400 p-3 font-semibold">
+                    Feature
+                  </th>
+                  <th className="border border-blue-400 p-3 font-semibold">
+                    Linked List
+                  </th>
+                  <th className="border border-blue-400 p-3 font-semibold">
+                    Array
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                {[
+                  [
+                    "Memory Usage",
+                    "Extra for pointers",
+                    "Fixed size, may be wasted",
+                  ],
+                  ["Dynamic Size", "Yes", "No (unless resized)"],
+                  ["Memory Allocation", "Dynamic", "Static (usually)"],
+                  ["Access Time", "O(1) for top", "O(1) for all"],
+                  [
+                    "Implementation Complexity",
+                    "Slightly more complex",
+                    "Simpler",
+                  ],
+                ].map(([feature, ll, arr], index) => (
+                  <tr
+                    key={feature}
+                    className={
+                      index % 2 === 0
+                        ? "bg-white dark:bg-neutral-950"
+                        : "bg-gray-50 dark:bg-neutral-900"
+                    }
+                  >
+                    <td className="border border-blue-400 p-3">{feature}</td>
+                    <td className="border border-blue-400 p-3 font-mono">
+                      {ll}
+                    </td>
+                    <td className="border border-blue-400 p-3 font-mono">
+                      {arr}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </section>
+      </article>
+
+      <div className="hidden md:block" aria-hidden="true" />
+    </main>
+  );
+};
+
+export default content;
diff --git a/app/visualizer/stack/implementation/usingLinkedList/page.jsx b/app/visualizer/stack/implementation/usingLinkedList/page.jsx
index e37954a..ca39b21 100755
--- a/app/visualizer/stack/implementation/usingLinkedList/page.jsx
+++ b/app/visualizer/stack/implementation/usingLinkedList/page.jsx
@@ -72,7 +72,7 @@ export default function Page() {
             </h1>
             <ArticleActions />
           </div>
-          <div className="bg-black border border-none dark:bg-gray-600 w-100 h-[2px] rounded-xl my-10"></div>
+          <div className="bg-black border border-none dark:bg-gray-600 w-full h-[2px] rounded-xl my-10"></div>
           <Content />
         </section>
 
diff --git a/app/visualizer/stack/isempty/content.jsx b/app/visualizer/stack/isempty/content.jsx
index 1873c40..a84b7c1 100755
--- a/app/visualizer/stack/isempty/content.jsx
+++ b/app/visualizer/stack/isempty/content.jsx
@@ -2,6 +2,7 @@
 import ComplexityGraph from "@/app/components/ui/graph";
 import { useEffect, useState } from "react";
 import DailyDSAEmbed from "@/app/components/ui/DailyDSAEmbed";
+import NewsletterEmbed from "@/app/components/ui/NewsletterEmbed";
 
 const content = () => {
   const [theme, setTheme] = useState('light');
@@ -56,11 +57,12 @@ 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">
+    <main className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-12 md:gap-4">
+      <div className="md:col-span-3">
+        <NewsletterEmbed mobile={false} theme={theme} />
         <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">
+      <article className="md:col-span-9 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? */}
           <section className="p-6 border-b border-gray-100 dark:border-gray-700">
             <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
@@ -198,8 +200,7 @@ const content = () => {
             </div>
           </section>
         </article>
-
-        {/* Mobile iframe at bottom */}
+      <NewsletterEmbed mobile theme={theme} />
       <DailyDSAEmbed mobile theme={theme} />
       </main>
     );
diff --git a/app/visualizer/stack/isempty/page.jsx b/app/visualizer/stack/isempty/page.jsx
index 7868874..e569deb 100755
--- a/app/visualizer/stack/isempty/page.jsx
+++ b/app/visualizer/stack/isempty/page.jsx
@@ -72,7 +72,7 @@ export default function Page() {
             </h1>
             <ArticleActions />
           </div>
-          <div className="bg-black border border-none dark:bg-gray-600 w-100 h-[2px] rounded-xl my-10"></div>
+          <div className="bg-black border border-none dark:bg-gray-600 w-full h-[2px] rounded-xl my-10"></div>
           <Content />
         </section>
 
diff --git a/app/visualizer/stack/isfull/content.jsx b/app/visualizer/stack/isfull/content.jsx
index c920894..7c3c2d7 100755
--- a/app/visualizer/stack/isfull/content.jsx
+++ b/app/visualizer/stack/isfull/content.jsx
@@ -2,6 +2,7 @@
 import ComplexityGraph from "@/app/components/ui/graph";
 import { useEffect, useState } from "react";
 import DailyDSAEmbed from "@/app/components/ui/DailyDSAEmbed";
+import NewsletterEmbed from "@/app/components/ui/NewsletterEmbed";
 
 const content = () => {
   const [theme, setTheme] = useState("light");
@@ -57,11 +58,12 @@ 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">
+    <main className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-12 md:gap-4">
+      <div className="md:col-span-3">
+        <NewsletterEmbed mobile={false} theme={theme} />
         <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">
+      <article className="md:col-span-9 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? */}
         <section className="p-6 border-b border-gray-100 dark:border-gray-700">
           <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
@@ -212,8 +214,7 @@ const content = () => {
           </div>
         </section>
       </article>
-
-        {/* Mobile iframe at bottom */}
+      <NewsletterEmbed mobile theme={theme} />
       <DailyDSAEmbed mobile theme={theme} />
     </main>
   );
diff --git a/app/visualizer/stack/isfull/page.jsx b/app/visualizer/stack/isfull/page.jsx
index f58d8ce..416ce68 100755
--- a/app/visualizer/stack/isfull/page.jsx
+++ b/app/visualizer/stack/isfull/page.jsx
@@ -72,7 +72,7 @@ export default function Page() {
             </h1>
             <ArticleActions />
           </div>
-          <div className="bg-black border border-none dark:bg-gray-600 w-100 h-[2px] rounded-xl my-10"></div>
+          <div className="bg-black border border-none dark:bg-gray-600 w-full h-[2px] rounded-xl my-10"></div>
           <Content />
         </section>
 
diff --git a/app/visualizer/stack/peek/content.jsx b/app/visualizer/stack/peek/content.jsx
index f090b94..74637d7 100755
--- a/app/visualizer/stack/peek/content.jsx
+++ b/app/visualizer/stack/peek/content.jsx
@@ -2,6 +2,7 @@
 import ComplexityGraph from "@/app/components/ui/graph";
 import { useEffect, useState } from "react";
 import DailyDSAEmbed from "@/app/components/ui/DailyDSAEmbed";
+import NewsletterEmbed from "@/app/components/ui/NewsletterEmbed";
 
 const content = () => {
   const [theme, setTheme] = useState("light");
@@ -41,11 +42,12 @@ 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">
+<main className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-12 md:gap-4">
+      <div className="md:col-span-3">
+        <NewsletterEmbed mobile={false} theme={theme} />
         <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">
+      <article className="md:col-span-9 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 */}
         <section className="p-6">
           <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
@@ -101,8 +103,7 @@ const content = () => {
           </div>
         </section>
       </article>
-
-      {/* Mobile iframe at bottom */}
+      <NewsletterEmbed mobile theme={theme} />
       <DailyDSAEmbed mobile theme={theme} />
     </main>
   );
diff --git a/app/visualizer/stack/peek/page.jsx b/app/visualizer/stack/peek/page.jsx
index 33bb26c..51361f5 100755
--- a/app/visualizer/stack/peek/page.jsx
+++ b/app/visualizer/stack/peek/page.jsx
@@ -73,7 +73,7 @@ export default function Page() {
             </h1>
             <ArticleActions />
           </div>
-          <div className="bg-black border border-none dark:bg-gray-600 w-100 h-[2px] rounded-xl my-10"></div>
+          <div className="bg-black border border-none dark:bg-gray-600 w-full h-[2px] rounded-xl my-10"></div>
           <Content />
         </section>
 
diff --git a/app/visualizer/stack/polish/postfix/content.jsx b/app/visualizer/stack/polish/postfix/content.jsx
index b24d182..d2dbf10 100755
--- a/app/visualizer/stack/polish/postfix/content.jsx
+++ b/app/visualizer/stack/polish/postfix/content.jsx
@@ -1,6 +1,7 @@
 "use client";
 import { useEffect, useState } from "react";
 import DailyDSAEmbed from "@/app/components/ui/DailyDSAEmbed";
+import NewsletterEmbed from "@/app/components/ui/NewsletterEmbed";
 
 const content = () => {
   const [theme, setTheme] = useState("light");
@@ -49,11 +50,12 @@ 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">
+    <main className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-12 md:gap-4">
+      <div className="md:col-span-3">
+        <NewsletterEmbed mobile={false} theme={theme} />
         <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">
+      <article className="md:col-span-9 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? */}
         <section className="p-6 border-b border-gray-100 dark:border-gray-700">
           <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
@@ -176,8 +178,7 @@ const content = () => {
           </div>
         </section>
       </article>
-
-        {/* Mobile iframe at bottom */}
+      <NewsletterEmbed mobile theme={theme} />
       <DailyDSAEmbed mobile theme={theme} />
     </main>
   );
diff --git a/app/visualizer/stack/polish/postfix/page.jsx b/app/visualizer/stack/polish/postfix/page.jsx
index fc5b856..3c500c8 100755
--- a/app/visualizer/stack/polish/postfix/page.jsx
+++ b/app/visualizer/stack/polish/postfix/page.jsx
@@ -74,7 +74,7 @@ export default function Page() {
             </h1>
             <ArticleActions />
           </div>
-          <div className="bg-black border border-none dark:bg-gray-600 w-100 h-[2px] rounded-xl my-10"></div>
+          <div className="bg-black border border-none dark:bg-gray-600 w-full h-[2px] rounded-xl my-10"></div>
           <Content />
         </section>
 
diff --git a/app/visualizer/stack/polish/prefix/content.jsx b/app/visualizer/stack/polish/prefix/content.jsx
index 27197c7..80bd95a 100755
--- a/app/visualizer/stack/polish/prefix/content.jsx
+++ b/app/visualizer/stack/polish/prefix/content.jsx
@@ -1,6 +1,7 @@
 "use client";
 import { useEffect, useState } from "react";
 import DailyDSAEmbed from "@/app/components/ui/DailyDSAEmbed";
+import NewsletterEmbed from "@/app/components/ui/NewsletterEmbed";
 
 const content = () => {
   const [theme, setTheme] = useState("light");
@@ -43,11 +44,12 @@ 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">
+    <main className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-12 md:gap-4">
+      <div className="md:col-span-3">
+        <NewsletterEmbed mobile={false} theme={theme} />
         <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">
+      <article className="md:col-span-9 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? */}
         <section className="p-6 border-b border-gray-100 dark:border-gray-700">
           <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
@@ -171,8 +173,7 @@ const content = () => {
           </div>
         </section>
       </article>
-
-      {/* Mobile iframe at bottom */}
+      <NewsletterEmbed mobile theme={theme} />
       <DailyDSAEmbed mobile theme={theme} />
     </main>
   );
diff --git a/app/visualizer/stack/polish/prefix/page.jsx b/app/visualizer/stack/polish/prefix/page.jsx
index 9b1d4d6..672b83b 100755
--- a/app/visualizer/stack/polish/prefix/page.jsx
+++ b/app/visualizer/stack/polish/prefix/page.jsx
@@ -74,7 +74,7 @@ export default function Page() {
             </h1>
             <ArticleActions />
           </div>
-          <div className="bg-black border border-none dark:bg-gray-600 w-100 h-[2px] rounded-xl my-10"></div>
+          <div className="bg-black border border-none dark:bg-gray-600 w-full h-[2px] rounded-xl my-10"></div>
           <Content />
         </section>
 
diff --git a/app/visualizer/stack/push-pop/content.jsx b/app/visualizer/stack/push-pop/content.jsx
index 3b2aee1..f85ec2e 100755
--- a/app/visualizer/stack/push-pop/content.jsx
+++ b/app/visualizer/stack/push-pop/content.jsx
@@ -2,6 +2,7 @@
 import ComplexityGraph from "@/app/components/ui/graph";
 import { useEffect, useState } from "react";
 import DailyDSAEmbed from "@/app/components/ui/DailyDSAEmbed";
+import NewsletterEmbed from "@/app/components/ui/NewsletterEmbed";
 
 const content = () => {
   const [theme, setTheme] = useState("light");
@@ -83,11 +84,12 @@ 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">
+    <main className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-12 md:gap-4">
+      <div className="md:col-span-3">
+        <NewsletterEmbed mobile={false} theme={theme} />
         <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">
+      <article className="md:col-span-9 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 */}
         <section className="p-6 border-b border-gray-100 dark:border-gray-700">
           <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
@@ -240,8 +242,7 @@ const content = () => {
           </div>
         </section>
       </article>
-
-      {/* Mobile iframe at bottom */}
+      <NewsletterEmbed mobile theme={theme} />
       <DailyDSAEmbed mobile theme={theme} />
     </main>
   );
diff --git a/app/visualizer/stack/push-pop/page.jsx b/app/visualizer/stack/push-pop/page.jsx
index 0d9c69b..54d9220 100755
--- a/app/visualizer/stack/push-pop/page.jsx
+++ b/app/visualizer/stack/push-pop/page.jsx
@@ -77,7 +77,7 @@ export default function Page() {
             </h1>
             <ArticleActions />
           </div>
-          <div className="bg-black border border-none dark:bg-gray-600 w-100 h-[2px] rounded-xl my-10"></div>
+          <div className="bg-black border border-none dark:bg-gray-600 w-full h-[2px] rounded-xl my-10"></div>
           <Content />
         </section>
 
diff --git a/app/visualizer/trees/binaryTree/types/animation.jsx b/app/visualizer/trees/binaryTree/types/animation.jsx
index a0b8fc8..8b1d272 100755
--- a/app/visualizer/trees/binaryTree/types/animation.jsx
+++ b/app/visualizer/trees/binaryTree/types/animation.jsx
@@ -20,7 +20,7 @@ const InfixToPostfixVisualizer = () => {
           <h1 className="text-4xl md:text-4xl mt-6 ml-10 font-bold text-left text-gray-900 dark:text-white mb-0">
             <span className="text-black dark:text-white">Types of Binary Trees</span>
           </h1>
-          <div className='bg-black border border-none dark:bg-gray-600 w-100 h-[2px] rounded-xl mt-2 mb-5'></div>
+          <div className='bg-black border border-none dark:bg-gray-600 w-full h-[2px] rounded-xl mt-2 mb-5'></div>
           <Content />
         <p className="text-lg text-center text-gray-600 dark:text-gray-400 mb-8"></p>
         <CodeBlock />
diff --git a/app/visualizer/trees/binaryTree/types/content.jsx b/app/visualizer/trees/binaryTree/types/content.jsx
index c5a5139..5d2f568 100755
--- a/app/visualizer/trees/binaryTree/types/content.jsx
+++ b/app/visualizer/trees/binaryTree/types/content.jsx
@@ -1,5 +1,8 @@
+"use client";
+import NewsletterEmbed from "@/app/components/ui/NewsletterEmbed";
+
 /*  content.jsx  */
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { gsap } from 'gsap';
 
 /* ------------- tiny helper to draw a tree ------------- */
@@ -54,6 +57,26 @@ function drawTree(
 }
 
 export default function content() {
+
+  const [theme, setTheme] = useState("light");
+
+  useEffect(() => {
+    const updateTheme = () => {
+      const savedTheme = localStorage.getItem("theme") || "light";
+      setTheme(savedTheme);
+    };
+
+    updateTheme();
+
+    window.addEventListener("storage", updateTheme);
+    window.addEventListener("themeChange", updateTheme);
+
+    return () => {
+      window.removeEventListener("storage", updateTheme);
+      window.removeEventListener("themeChange", updateTheme);
+    };
+  }, []);
+
   /* refs for the three svgs */
   const fullSvg    = useRef(null);
   const degenSvg   = useRef(null);
@@ -146,8 +169,11 @@ export default function content() {
   ];
 
   return (
-    <main className="max-w-4xl mx-auto">
-      <article className="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden mb-8">
+    <main className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-12 md:gap-4">
+      <div className="md:col-span-3">
+        <NewsletterEmbed mobile={false} theme={theme} />
+      </div>
+      <article className="md:col-span-9 bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden mb-8">
         {/* Quick tags */}
         <section className="p-6 border-b border-gray-100 dark:border-gray-700">
           <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
@@ -293,6 +319,7 @@ export default function content() {
           </div>
         </section>
       </article>
+      <NewsletterEmbed mobile theme={theme} />
     </main>
   );
 }
\ No newline at end of file