diff --git a/app/visualizer/stack/implementation/usingArray/animation.jsx b/app/visualizer/stack/implementation/usingArray/animation.jsx
deleted file mode 100755
index 7a923f8..0000000
--- a/app/visualizer/stack/implementation/usingArray/animation.jsx
+++ /dev/null
@@ -1,39 +0,0 @@
-"use client";
-import Footer from "@/app/components/footer";
-import ExploreOther from "@/app/components/ui/exploreOther";
-import Content from "@/app/visualizer/stack/implementation/usingArray/content";
-import CodeBlock from "@/app/visualizer/stack/implementation/usingArray/codeBlock";
-import GoBackButton from "@/app/components/ui/goback";
-import BackToTop from "@/app/components/ui/backtotop";
-
-const InfixToPostfixVisualizer = () => {
-  return (
-    <div className="min-h-screen max-h-auto bg-gray-100 dark:bg-zinc-950 text-gray-800 dark:text-gray-200">
-        <main className="container mx-auto px-6 pt-16 pb-4">
-
-          { /* go back block here */}
-          <div className="mt-10 sm:mt-10">
-            <GoBackButton />
-          </div>
-
-          { /* main logic here */}
-          <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">Stack Implementation</span>
-          </h1>
-          <div className='bg-black border border-none dark:bg-gray-600 w-100 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 />
-        <ExploreOther
-          title="Explore other implementation"
-          links={[{ text: "Using Linked List", url: "./usingLinkedList" }]}
-        />
-      </main>
-      <div className="bg-gray-700 z-10 h-[1px]"></div>
-      <BackToTop />
-      <Footer />
-    </div>
-  );
-};
-
-export default InfixToPostfixVisualizer;
diff --git a/app/visualizer/stack/implementation/usingArray/codeBlock.jsx b/app/visualizer/stack/implementation/usingArray/codeBlock.jsx
index 24e7cbc..27f1e5d 100755
--- a/app/visualizer/stack/implementation/usingArray/codeBlock.jsx
+++ b/app/visualizer/stack/implementation/usingArray/codeBlock.jsx
@@ -420,10 +420,10 @@ int main() {
         initial={{ opacity: 0, y: 20 }}
         animate={{ opacity: 1, y: 0 }}
         transition={{ duration: 0.3 }}
-        className="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden border border-gray-200 dark:border-gray-700 transition-colors duration-300"
+        className="bg-white dark:bg-neutral-950 rounded-xl shadow-lg overflow-hidden border border-gray-200 dark:border-gray-700 transition-colors duration-300"
       >
         {/* Header */}
-        <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center p-4 bg-gray-50 dark:bg-gray-700/50 border-b border-gray-200 dark:border-gray-700">
+        <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center p-4 bg-gray-50 dark:bg-neutral-950 border-b border-gray-200 dark:border-gray-700">
           <div className="flex items-center mb-2 sm:mb-0">
             <FaCode className="text-blue-500 mr-2 text-lg" />
             <h3 className="text-lg font-semibold text-gray-800 dark:text-white">
diff --git a/app/visualizer/stack/implementation/usingArray/content.jsx b/app/visualizer/stack/implementation/usingArray/content.jsx
index 3f288e4..1dde175 100755
--- a/app/visualizer/stack/implementation/usingArray/content.jsx
+++ b/app/visualizer/stack/implementation/usingArray/content.jsx
@@ -1,4 +1,30 @@
+"use client";
+import React from "react";
+import { motion } from "framer-motion";
+import { useEffect, useState } from "react";
+
 const content = () => {
+  const [theme, setTheme] = useState("light");
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    const updateTheme = () => {
+      const savedTheme = localStorage.getItem("theme") || "light";
+      setTheme(savedTheme);
+    };
+
+    updateTheme();
+    setMounted(true);
+
+    window.addEventListener("storage", updateTheme);
+    window.addEventListener("themeChange", updateTheme);
+
+    return () => {
+      window.removeEventListener("storage", updateTheme);
+      window.removeEventListener("themeChange", updateTheme);
+    };
+  }, []);
+
   const push = [
     { points: "Check if stack is full" },
     { points: 'If full, return "Stack Overflow"' },
@@ -15,267 +41,233 @@ const content = () => {
   ];
 
   const peek = [
-    { points : "Check if stack is empty" },
-    { points : "If empty, return null" },
-    { points : "Return array[top] without removal" },
+    { points: "Check if stack is empty" },
+    { points: "If empty, return null" },
+    { points: "Return array[top] without removal" },
   ];
 
   const isEmpty = [
-    { points : "Return true if top pointer is -1" },
-    { points : "Return false otherwise" },
+    { points: "Return true if top pointer is -1" },
+    { points: "Return false otherwise" },
   ];
 
   const initialize = [
-    { points : "Create an empty array to store elements" },
-    { points : "Initialize top pointer/index to -1" },
-    { points : "Optional: Set maximum size limit" },
+    { points: "Create an empty array to store elements" },
+    { points: "Initialize top pointer/index to -1" },
+    { points: "Optional: Set maximum size limit" },
   ];
 
   const isFull = [
-    { points : "Return true if top equals (max_size - 1)" },
-    { points : "Return false otherwise" },
+    { points: "Return true if top equals (max_size - 1)" },
+    { points: "Return false otherwise" },
   ];
 
   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">
-    {/* 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 Array?
-      </h1>
-      <div className="prose dark:prose-invert max-w-none">
-        <p className="text-gray-700 dark:text-gray-300 leading-relaxed">
-          A stack is a linear data structure that follows the{" "}LIFO (Last In First Out){" "}
-          principle. Arrays provide a simple way to implement stack operations
-          with constant time complexity.
-        </p>
-      </div>
-    </section>
-
-    {/* Core Operations */}
-    <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>
-        Core Stack Operations
-      </h1>
-      <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-3">
-        {["push(item)", "pop()", "peek()", "isEmpty()", "isFull()"].map(
-          (op) => (
-            <div
-              key={op}
-              className="bg-gray-100 dark:bg-gray-700 p-3 rounded-lg text-center shadow-sm"
+    <main className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-5 md:gap-4">
+            <div className="col-span-1">
+        <div className="hidden md:block">
+          {mounted && (
+            <iframe
+              key={theme}
+              src={
+                theme === "dark"
+                  ? "https://hw.glich.co/resources/embed/daily/dsa?theme=dark"
+                  : "https://hw.glich.co/resources/embed/daily/dsa?theme=light"
+              }
+              width="100%"
+              height="400"
+              title="Daily DSA Challenge"
+            ></iframe>
+          )}
+        </div>
+        <div className="flex justify-center">
+          <span className="text-xs hidden md:block">
+            Daily DSA Challenge by{" "}
+            <a
+              href="https://hw.glich.co/resources/daily"
+              target="_blank"
+              className="underline hover:text-blue-500 duration-300"
             >
-              
-                {op}
-            </div>
-          )
-        )}
+              Hello World
+            </a>
+          </span>
+        </div>
       </div>
-    </section>
-
-    {/* 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="border-2 border-black dark:border-gray-400 rounded-lg p-4 bg-white dark:bg-gray-800 shadow-md">
-          <h2 className="text-lg sm:text-xl mb-3 font-bold text-center">
-            Stack Basic Operations
-          </h2>
-
-          <div className="space-y-4">
-            {/* Initialize Stack */}
-            <div className="p-4 rounded-lg bg-gray-50 dark:bg-gray-700">
-              <h3 className="font-semibold mb-2">
-                Initialize Stack
-              </h3>
-              <ol className="space-y-2 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-                {initialize.map((item, index) => (
-                  <li key={index} className="text-gray-700 dark:text-gray-300 pl-2">
-                    {item.points}
-                  </li>
-                ))}
-              </ol>
-            </div>
-
-            {/* Push Operation */}
-            <div className="p-4 rounded-lg bg-gray-50 dark:bg-gray-700">
-              <h3 className="font-semibold mb-2 ">
-                push()
-              </h3>
-              <ol className="space-y-2 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-                {push.map((item, index) => (
-                  <li key={index} className="text-gray-700 dark:text-gray-300 pl-2">
-                    {item.points}
-                  </li>
-                ))}
-              </ol>
-            </div>
-
-            {/* Pop Operation */}
-            <div className="p-4 rounded-lg bg-gray-50 dark:bg-gray-700">
-              <h3 className="font-semibold mb-2 ">
-                pop()
-              </h3>
-              <ol className="space-y-2 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-                {pop.map((item, index) => (
-                  <li key={index} className="text-gray-700 dark:text-gray-300 pl-2">
-                    {item.points}
-                  </li>
-                ))}
-              </ol>
-            </div>
+      <article className="col-span-4 max-w-4xl bg-white dark:bg-neutral-950 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden mb-8">
+        {/* -------  HEADER  ------- */}
+        <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 Array?
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <p className="text-gray-700 dark:text-gray-300 leading-relaxed">
+              A stack is a linear data structure that follows the LIFO (Last In First Out) principle. Arrays provide a simple way to implement stack operations with constant time complexity.
+            </p>
           </div>
-        </div>
+        </section>
 
-        {/* Stack Helper Operations */}
-        <div className="border-2 border-black dark:border-gray-400 rounded-lg p-4 bg-white dark:bg-gray-800 shadow-md">
-          <h2 className="text-lg sm:text-xl mb-3 font-bold text-center">
-            Stack Helper Operations
-          </h2>
+        {/* -------  ALGORITHMIC STEPS – LIFT CARDS  ------- */}
+        <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="space-y-4">
-            {/* Peek Operation */}
-            <div className="p-4 rounded-lg bg-gray-50 dark:bg-gray-700">
-              <h3 className="font-semibold mb-2">
-                peek()
-              </h3>
-              <ol className="space-y-2 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-                {peek.map((item, index) => (
-                  <li key={index} className="text-gray-700 dark:text-gray-300 pl-2">
-                    {item.points}
-                  </li>
-                ))}
-              </ol>
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+            {/* 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">
+                {[{t:"Initialize Stack", s:initialize}, {t:"push()", s:push}, {t:"pop()", s:pop}].map(
+                  ({t, s}, idx) => (
+                    <motion.div
+                      key={t}
+                      initial={{ y: 40, opacity: 0 }}
+                      whileInView={{ y: 0, opacity: 1 }}
+                      viewport={{ once: true, amount: 0.3 }}
+                      transition={{ type: "spring", stiffness: 120, delay: idx * 0.1 }}
+                      whileHover={{ y: -4, boxShadow: "0 10px 20px -5px rgba(0,0,0,0.1)" }}
+                      className="p-4 rounded-lg bg-gray-50 dark:bg-neutral-900
+                                 border border-transparent hover:border-blue-300
+                                 dark:hover:border-blue-500 transition"
+                    >
+                      <span className="inline-block mb-2 px-2 py-0.5 rounded-full text-xs font-semibold bg-indigo-100 dark:bg-blue-900 text-blue-700 dark:text-indigo-200">
+                        Step {idx + 1}
+                      </span>
+                      <h3 className="font-semibold mb-2">{t}</h3>
+                      <ol className="space-y-2 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+                        {s.map((p, i) => (
+                          <li key={i} className="text-gray-700 dark:text-gray-300 pl-2">
+                            {p.points}
+                          </li>
+                        ))}
+                      </ol>
+                    </motion.div>
+                  )
+                )}
+              </div>
             </div>
 
-            {/* isEmpty Operation */}
-            <div className="p-4 rounded-lg bg-gray-50 dark:bg-gray-700">
-              <h3 className="font-semibold mb-2">
-                isEmpty()
-              </h3>
-              <ol className="space-y-2 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-                {isEmpty.map((item, index) => (
-                  <li key={index} className="text-gray-700 dark:text-gray-300 pl-2">
-                    {item.points}
-                  </li>
-                ))}
-              </ol>
+            {/* 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">
+                {[{t:"peek()", s:peek}, {t:"isEmpty()", s:isEmpty}, {t:"isFull()", s:isFull}].map(
+                  ({t, s}, idx) => (
+                    <motion.div
+                      key={t}
+                      initial={{ y: 40, opacity: 0 }}
+                      whileInView={{ y: 0, opacity: 1 }}
+                      viewport={{ once: true, amount: 0.3 }}
+                      transition={{ type: "spring", stiffness: 120, delay: idx * 0.1 }}
+                      whileHover={{ y: -4, boxShadow: "0 10px 20px -5px rgba(0,0,0,0.1)" }}
+                      className="p-4 rounded-lg bg-gray-50 dark:bg-neutral-900
+                                 border border-transparent hover:border-blue-300
+                                 dark:hover:border-blue-600 transition"
+                    >
+                      <span className="inline-block mb-2 px-2 py-0.5 rounded-full text-xs font-semibold bg-indigo-100 dark:bg-blue-900 text-blue-700 dark:text-indigo-200">
+                        Step {idx + 1}
+                      </span>
+                      <h3 className="font-semibold mb-2">{t}</h3>
+                      <ol className="space-y-2 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+                        {s.map((p, i) => (
+                          <li key={i} className="text-gray-700 dark:text-gray-300 pl-2">
+                            {p.points}
+                          </li>
+                        ))}
+                      </ol>
+                    </motion.div>
+                  )
+                )}
+              </div>
             </div>
+          </div>
+        </section>
 
-            {/* isFull Operation */}
-            <div className="p-4 rounded-lg bg-gray-50 dark:bg-gray-700">
-              <h3 className="font-semibold mb-2">
-                isFull()
-              </h3>
-              <ol className="space-y-2 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-                {isFull.map((item, index) => (
-                  <li key={index} className="text-gray-700 dark:text-gray-300 pl-2">
-                    {item.points}
-                  </li>
+        <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-blue-400">
+              <thead>
+                <tr className="bg-blue-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)", "Single array access"],
+                  ["pop()", "O(1)", "Single array access"],
+                  ["peek()", "O(1)", "Single array access"],
+                  ["isEmpty()", "O(1)", "Pointer comparison"],
+                ].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>
                 ))}
-              </ol>
-            </div>
+              </tbody>
+            </table>
           </div>
-        </div>
-      </div>
-    </section>
+        </section>
 
-    {/* Visual Representation */}
-    <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>
-        Visual Representation
-      </h1>
-      <div className="flex flex-col items-center">
-        <div className="w-full sm:w-64">
-          <div className="w-20 h-8 border border-gray-400 mx-auto flex items-center justify-center">
-            42
+        <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>
+            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">
+              {[
+                "LIFO Principle: Last element added is first removed",
+                "Dynamic Size: Can grow until memory limits",
+                "Efficiency: All operations work in constant time",
+                "Versatility: Foundation for many algorithms",
+              ].map((item) => (
+                <li key={item} className="text-gray-700 dark:text-gray-300 pl-2">
+                  {item}
+                </li>
+              ))}
+            </ul>
           </div>
-          <div className="w-20 h-8 border border-gray-400 mx-auto flex items-center justify-center">
-            17
-          </div>
-          <div className="w-20 h-8 border border-gray-400 mx-auto flex items-center justify-center bg-blue-100 dark:bg-blue-900">
-            8 <span className="text-xs ml-1">(top)</span>
-          </div>
-        </div>
-        <div className="text-sm mt-3 text-center text-gray-700 dark:text-gray-300">
-          Stack after operations: push(42), push(17), push(8)
-        </div>
-      </div>
-    </section>
+        </section>
+      </article>
 
-    {/* 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-gray-700">
-              <th className="border border-gray-400 p-3 font-semibold">Operation</th>
-              <th className="border border-gray-400 p-3 font-semibold">Complexity</th>
-              <th className="border border-gray-400 p-3 font-semibold hidden sm:table-cell">
-                Reason
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            {[
-              ["push()", "O(1)", "Single array access"],
-              ["pop()", "O(1)", "Single array access"],
-              ["peek()", "O(1)", "Single array access"],
-              ["isEmpty()", "O(1)", "Pointer comparison"],
-            ].map(([op, comp, reason], index) => (
-              <tr
-                key={op}
-                className={index % 2 === 0 ? "bg-white dark:bg-gray-800" : "bg-gray-50 dark:bg-gray-700"}
-              >
-                <td className="border border-gray-400 p-3">{op}</td>
-                <td className="border border-gray-400 p-3 font-mono">
-                  {comp}
-                </td>
-                <td className="border border-gray-400 p-3 hidden sm:table-cell">
-                  {reason}
-                </td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
-    </section>
-
-    {/* Key Characteristics */}
-    <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>
-        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">
-          {[
-            "LIFO Principle: Last element added is first removed",
-            "Dynamic Size: Can grow until memory limits",
-            "Efficiency: All operations work in constant time",
-            "Versatility: Foundation for many algorithms",
-          ].map((item) => (
-            <li key={item} className="text-gray-700 dark:text-gray-300 pl-2">
-              {item}
-            </li>
-          ))}
-        </ul>
+      {/* Mobile iframe at bottom */}
+      <div className="block md:hidden w-full">
+        {mounted && (
+          <iframe
+            key={theme}
+            src={
+              theme === "dark"
+                ? "https://hw.glich.co/resources/embed/daily/dsa?theme=dark"
+                : "https://hw.glich.co/resources/embed/daily/dsa?theme=light"
+            }
+            width="100%"
+            height="320"
+            title="Daily DSA Challenge"
+          ></iframe>
+        )}
+        <div className="flex justify-center pb-8">
+          <span className="text-xs">
+            Daily DSA Challenge by{" "}
+            <a
+              href="https://hw.glich.co/resources/daily"
+              target="_blank"
+              className="underline hover:text-blue-500 duration-300"
+            >
+              Hello World
+            </a>
+          </span>
+        </div>
       </div>
-    </section>
-  </article>
-</main>
+    </main>
   );
 };
 
diff --git a/app/visualizer/stack/implementation/usingArray/page.jsx b/app/visualizer/stack/implementation/usingArray/page.jsx
index 8a35df7..e583246 100755
--- a/app/visualizer/stack/implementation/usingArray/page.jsx
+++ b/app/visualizer/stack/implementation/usingArray/page.jsx
@@ -1,32 +1,104 @@
-import Animation from "@/app/visualizer/stack/implementation/usingArray/animation";
 import Navbar from "@/app/components/navbarinner";
+import Breadcrumbs from "@/app/components/ui/Breadcrumbs";
+import ArticleActions from "@/app/components/ui/ArticleActions";
+import Content from "@/app/visualizer/stack/implementation/usingArray/content";
+import Code from "@/app/visualizer/stack/implementation/usingArray/codeBlock";
+import ModuleCard from "@/app/components/ui/ModuleCard";
+import { MODULE_MAPS } from "@/lib/modulesMap";
+import Footer from "@/app/components/footer";
+import ExploreOther from "@/app/components/ui/exploreOther";
+import BackToTopButton from "@/app/components/ui/backtotop";
 
 export const metadata = {
-  title: 'Stack Implementation using Array | Learn Stack in DSA with JS, C, Python, Java Code',
-  description: 'Understand how to implement a Stack using an Array with visual explanations, animations, and complete code examples in JavaScript, C, Python, and Java. Perfect for DSA beginners and interview prep.',
+  title:
+    "Stack Implementation using Array | Learn Stack in DSA with JS, C, Python, Java Code",
+  description:
+    "Understand how to implement a Stack using an Array with visual explanations, animations, and complete code examples in JavaScript, C, Python, and Java. Perfect for DSA beginners and interview prep.",
   keywords: [
-    'Stack using Array',
-    'Stack Implementation',
-    'Stack Implementation in JavaScript',
-    'Stack Implementation in C',
-    'Stack Implementation in Python',
-    'Stack Implementation in Java',
-    'DSA Stack',
-    'Array Stack',
-    'Data Structures Stack',
-    'Stack Push Pop Array',
-    'Learn Stack DSA',
-    'Visualize Stack Implementation',
-    'Stack Code Examples',
+    "Stack using Array",
+    "Stack Implementation",
+    "Stack Implementation in JavaScript",
+    "Stack Implementation in C",
+    "Stack Implementation in Python",
+    "Stack Implementation in Java",
+    "DSA Stack",
+    "Array Stack",
+    "Data Structures Stack",
+    "Stack Push Pop Array",
+    "Learn Stack DSA",
+    "Visualize Stack Implementation",
+    "Stack Code Examples",
   ],
-  robots: 'index, follow',
+  robots: "index, follow",
+  openGraph: {
+    images: [
+      {
+        url: "/og/stack/stackArray.png",
+        width: 1200,
+        height: 630,
+        alt: "Stack Implementation using Array",
+      },
+    ],
+  },
 };
 
-export default function Page(){
-  return(
+export default function Page() {
+  const paths = [
+    { name: "Home", href: "/" },
+    { name: "Visualizer", href: "/visualizer" },
+    { name: "Stack : Implementation Using Array", href: "" },
+  ];
+
+  return (
     <>
-      <Navbar/>
-      <Animation/>
+      <div>
+        <Navbar />
+      </div>
+
+      <div className="py-20 bg-gray-100 dark:bg-neutral-900 text-gray-800 dark:text-gray-200">
+        <section className="px-6 md:px-12">
+          <div className="mt-10 sm:mt-10 mb-4">
+            <Breadcrumbs paths={paths} />
+          </div>
+
+          <div className="flex items-center flex-col">
+            <div className="flex">
+              <p className="uppercase tracking-wide bg-green-500 dark:text-black px-4 py-1 mb-2 rounded-full">
+                Stack
+              </p>
+            </div>
+            <h1 className="text-4xl md:text-4xl font-bold text-center text-gray-900 dark:text-white mb-0">
+              Implementation Using Array
+            </h1>
+            <ArticleActions />
+          </div>
+          <div className="bg-black border border-none dark:bg-gray-600 w-100 h-[2px] rounded-xl my-10"></div>
+          <Content />
+        </section>
+
+        <section className="px-6">
+          <Code />
+        </section>
+
+        <section className="px-6 md:px-12 my-12">
+          <ModuleCard
+            moduleId={MODULE_MAPS.stackArray}
+            title="Stack Implementation using Array"
+            description="Mark Stack using Array as done and view it on your dashboard"
+            initialDone={false}
+          />
+        </section>
+
+        <section>
+          <ExploreOther
+            title="Explore other implementation"
+            links={[{ text: "Using Linked List", url: "./usingLinkedList" }]}
+          />
+        </section>
+      </div>
+
+      <BackToTopButton />
+      <Footer />
     </>
   );
-};
\ No newline at end of file
+}
diff --git a/lib/modulesMap.js b/lib/modulesMap.js
index b591d82..e630b2f 100755
--- a/lib/modulesMap.js
+++ b/lib/modulesMap.js
@@ -12,4 +12,6 @@ export const MODULE_MAPS = {
     isFull : "54301ec9-0586-48f0-a6db-18a41adeb856",
     postfix : "ca3daf8d-23f8-4ade-adfd-4bd0a88d3da2",
     prefix : "a2971df4-5e48-4320-bc91-3de3242cac48",
+    stackArray : "4e0dd1e0-a8c7-4066-845c-b5917383d5c2",
+    stackLinkedList : "",
 }
\ No newline at end of file
diff --git a/public/DSAVisualizer.png b/public/DSAVisualizer.png
deleted file mode 100755
index 193aa20..0000000
Binary files a/public/DSAVisualizer.png and /dev/null differ
diff --git a/public/modules/prefix.png b/public/modules/prefix.png
new file mode 100755
index 0000000..ac491fc
Binary files /dev/null and b/public/modules/prefix.png differ
diff --git a/public/modules/stackArray.png b/public/modules/stackArray.png
new file mode 100755
index 0000000..da5e3c3
Binary files /dev/null and b/public/modules/stackArray.png differ
diff --git a/public/og.png b/public/og.png
index 03a13f1..193aa20 100755
Binary files a/public/og.png and b/public/og.png differ
diff --git a/public/og/stack/stackArray.png b/public/og/stack/stackArray.png
new file mode 100755
index 0000000..da5e3c3
Binary files /dev/null and b/public/og/stack/stackArray.png differ