diff --git a/app/visualizer/stack/isempty/page.jsx b/app/visualizer/stack/isempty/page.jsx
index 659816f..7868874 100644
--- a/app/visualizer/stack/isempty/page.jsx
+++ b/app/visualizer/stack/isempty/page.jsx
@@ -37,7 +37,7 @@ export const metadata = {
         url: "/og/stack/isEmpty.png",
         width: 1200,
         height: 630,
-        alt: "Stack Peek Visualization",
+        alt: "Stack isEmpty Visualization",
       },
     ],
   },
diff --git a/app/visualizer/stack/isfull/animation.jsx b/app/visualizer/stack/isfull/animation.jsx
index b67481a..8b85d3e 100644
--- a/app/visualizer/stack/isfull/animation.jsx
+++ b/app/visualizer/stack/isfull/animation.jsx
@@ -1,202 +1,161 @@
-'use client';
-import React, { useState, useEffect } from 'react';
-import Footer from '@/app/components/footer';
-import Content from '@/app/visualizer/stack/isfull/content';
-import CodeBlock from '@/app/visualizer/stack/isfull/codeBlock';
-import ExploreOther from '@/app/components/ui/exploreOther';
-import PushPop from '@/app/components/ui/PushPop';
-import GoBackButton from "@/app/components/ui/goback";
-import Quiz from '@/app/visualizer/stack/isfull/quiz';
-import BackToTop from '@/app/components/ui/backtotop';
+"use client";
+import React, { useState, useEffect } from "react";
+import PushPop from "@/app/components/ui/PushPop";
 
 const StackVisualizer = () => {
-    const [stack, setStack] = useState([]);
-    const [operation, setOperation] = useState(null);
-    const [message, setMessage] = useState('Stack is empty');
-    const [isAnimating, setIsAnimating] = useState(false);
-    const [stackLimit] = useState(5); // Set stack capacity
-    const [isFull, setIsFull] = useState(false);
-
-    // Check if stack is full
-    const checkIfFull = () => {
-        setIsAnimating(true);
-        setOperation('Checking if stack is full...');
-        
-        setTimeout(() => {
-            const fullStatus = stack.length >= stackLimit;
-            setIsFull(fullStatus);
-            setOperation(null);
-            setMessage(fullStatus ? 'Stack is FULL!' : 'Stack is NOT full');
-            setIsAnimating(false);
-        }, 1000);
-    };
-
-    // Reset stack
-    const reset = () => {
-        setStack([]);
-        setMessage('Stack is empty');
-        setOperation(null);
-        setIsFull(false);
-    };
-
-    // Effect to update isFull status when stack changes
-    useEffect(() => {
-        setIsFull(stack.length >= stackLimit);
-    }, [stack, stackLimit]);
-
-    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 IsFull</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">
-            Visualize the LIFO (Last In, First Out) principle
-          </p>
-
-          <div className="max-w-md mx-auto">
-            {/* Use the PushPop component */}
-            <PushPop
-              stack={stack}
-              setStack={setStack}
-              isAnimating={isAnimating}
-              setIsAnimating={setIsAnimating}
-              setMessage={setMessage}
-              setOperation={setOperation}
-              stackLimit={stackLimit}
-            />
-
-            {/* Is Full Check Button */}
-            <button
-              onClick={checkIfFull}
-              disabled={isAnimating}
-              className="w-full mb-4 bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded disabled:opacity-50"
+  const [stack, setStack] = useState([]);
+  const [operation, setOperation] = useState(null);
+  const [message, setMessage] = useState("Stack is empty");
+  const [isAnimating, setIsAnimating] = useState(false);
+  const [stackLimit] = useState(5); // Set stack capacity
+  const [isFull, setIsFull] = useState(false);
+
+  // Check if stack is full
+  const checkIfFull = () => {
+    setIsAnimating(true);
+    setOperation("Checking if stack is full...");
+
+    setTimeout(() => {
+      const fullStatus = stack.length >= stackLimit;
+      setIsFull(fullStatus);
+      setOperation(null);
+      setMessage(fullStatus ? "Stack is FULL!" : "Stack is NOT full");
+      setIsAnimating(false);
+    }, 1000);
+  };
+
+  // Reset stack
+  const reset = () => {
+    setStack([]);
+    setMessage("Stack is empty");
+    setOperation(null);
+    setIsFull(false);
+  };
+
+  // Effect to update isFull status when stack changes
+  useEffect(() => {
+    setIsFull(stack.length >= stackLimit);
+  }, [stack, stackLimit]);
+
+  return (
+    <main className="container mx-auto px-6 pb-6">
+      <p className="text-lg text-center text-gray-600 dark:text-gray-400 mb-8">
+        Visualize the LIFO (Last In, First Out) principle
+      </p>
+
+      <div className="max-w-md mx-auto">
+        {/* Use the PushPop component */}
+        <PushPop
+          stack={stack}
+          setStack={setStack}
+          isAnimating={isAnimating}
+          setIsAnimating={setIsAnimating}
+          setMessage={setMessage}
+          setOperation={setOperation}
+          stackLimit={stackLimit}
+        />
+
+        {/* Is Full Check Button */}
+        <button
+          onClick={checkIfFull}
+          disabled={isAnimating}
+          className="w-full mb-4 duration-300 bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded disabled:opacity-50"
+        >
+          Check If Full
+        </button>
+
+        {/* Stack Visualization */}
+        <div className="bg-white dark:bg-neutral-950 p-6 rounded-lg shadow-md border border-gray-200 dark:border-gray-700">
+          <h2 className="text-xl font-semibold mb-4">Stack Visualization</h2>
+
+          {/* Operation Status */}
+          {operation && (
+            <div className="mb-4 p-3 rounded-lg bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200">
+              {operation}
+            </div>
+          )}
+
+          {/* Message Display */}
+          {message && (
+            <div
+              className={`mb-4 p-3 rounded-lg ${
+                message.includes("pushed")
+                  ? "bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200"
+                  : message.includes("popped")
+                  ? "bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200"
+                  : message.includes("Peek")
+                  ? "bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200"
+                  : message.includes("FULL")
+                  ? "bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200"
+                  : "bg-gray-100 dark:bg-neutral-900 text-gray-800 dark:text-gray-200"
+              }`}
             >
-              Check If Full
-            </button>
-
-            {/* Stack Visualization */}
-            <div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md border border-gray-200 dark:border-gray-700">
-              <h2 className="text-xl font-semibold mb-4">
-                Stack Visualization
-              </h2>
-
-              {/* Operation Status */}
-              {operation && (
-                <div className="mb-4 p-3 rounded-lg bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200">
-                  {operation}
-                </div>
-              )}
+              {message}
+            </div>
+          )}
 
-              {/* Message Display */}
-              {message && (
-                <div
-                  className={`mb-4 p-3 rounded-lg ${
-                    message.includes("pushed")
-                      ? "bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200"
-                      : message.includes("popped")
-                      ? "bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200"
-                      : message.includes("Peek")
-                      ? "bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200"
-                      : message.includes("FULL")
-                      ? "bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200"
-                      : "bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200"
-                  }`}
-                >
-                  {message}
-                </div>
-              )}
+          {/* Stack capacity indicator */}
+          <div className="mb-4 text-center text-sm">
+            Capacity: {stack.length}/{stackLimit}
+          </div>
 
-              {/* Stack capacity indicator */}
-              <div className="mb-4 text-center text-sm">
-                Capacity: {stack.length}/{stackLimit}
-              </div>
+          {/* Vertical Stack */}
+          <div className="flex flex-col items-center min-h-[300px]">
+            {/* Top indicator */}
+            <div className="mb-2 text-sm text-gray-600 dark:text-gray-400">
+              {stack.length > 0 ? "↑ Top" : ""}
+            </div>
 
-              {/* Vertical Stack */}
-              <div className="flex flex-col items-center min-h-[300px]">
-                {/* Top indicator */}
-                <div className="mb-2 text-sm text-gray-600 dark:text-gray-400">
-                  {stack.length > 0 ? "↑ Top" : ""}
+            {/* Stack elements with full state animation */}
+            <div className="w-32 relative">
+              {stack.length === 0 ? (
+                <div className="text-center py-8 text-gray-500">
+                  Stack is empty
                 </div>
-
-                {/* Stack elements with full state animation */}
-                <div className="w-32 relative">
-                  {stack.length === 0 ? (
-                    <div className="text-center py-8 text-gray-500">
-                      Stack is empty
-                    </div>
-                  ) : (
-                    <div className="space-y-1">
-                      {stack.map((item, index) => (
-                        <div
-                          key={index}
-                          className={`p-3 border-2 rounded text-center font-medium transition-all duration-300 ${
-                            index === 0
-                              ? "bg-blue-100 dark:bg-blue-900 border-blue-300 dark:border-blue-700"
-                              : "bg-white dark:bg-gray-700 border-gray-200 dark:border-gray-600"
-                          } ${
-                            isAnimating &&
-                            index === 0 &&
-                            operation?.includes("Peek")
-                              ? "animate-pulse"
-                              : isAnimating && index === 0
-                              ? "animate-bounce"
-                              : ""
-                          } ${
-                            isFull && isAnimating && operation?.includes("full")
-                              ? "border-red-500 dark:border-red-500 animate-pulse"
-                              : ""
-                          }`}
-                        >
-                          {item}
-                          {index === 0 && (
-                            <div className="text-xs mt-1 text-gray-500 dark:text-gray-400">
-                              (Top)
-                            </div>
-                          )}
+              ) : (
+                <div className="space-y-1">
+                  {stack.map((item, index) => (
+                    <div
+                      key={index}
+                      className={`p-3 border-2 rounded text-center font-medium transition-all duration-300 ${
+                        index === 0
+                          ? "bg-blue-100 dark:bg-blue-900 border-blue-300 dark:border-blue-700"
+                          : "bg-white dark:bg-gray-700 border-gray-200 dark:border-gray-600"
+                      } ${
+                        isAnimating &&
+                        index === 0 &&
+                        operation?.includes("Peek")
+                          ? "animate-pulse"
+                          : isAnimating && index === 0
+                          ? "animate-bounce"
+                          : ""
+                      } ${
+                        isFull && isAnimating && operation?.includes("full")
+                          ? "border-red-500 dark:border-red-500 animate-pulse"
+                          : ""
+                      }`}
+                    >
+                      {item}
+                      {index === 0 && (
+                        <div className="text-xs mt-1 text-gray-500 dark:text-gray-400">
+                          (Top)
                         </div>
-                      ))}
+                      )}
                     </div>
-                  )}
+                  ))}
                 </div>
+              )}
+            </div>
 
-                {/* Bottom indicator */}
-                <div className="mt-2 text-sm text-gray-600 dark:text-gray-400">
-                  {stack.length > 0 ? "↓ Bottom" : ""}
-                </div>
-              </div>
+            {/* Bottom indicator */}
+            <div className="mt-2 text-sm text-gray-600 dark:text-gray-400">
+              {stack.length > 0 ? "↓ Bottom" : ""}
             </div>
           </div>
-
-          {/* quiz block here */}
-          <p className="text-lg text-center text-gray-600 dark:text-gray-400 mt-8 mb-8">
-            Test Your Knowledge before moving forward!
-          </p>
-          <Quiz />
-
-          <CodeBlock />
-          <ExploreOther
-            title="Explore other operations"
-            links={[
-              { text: "Peek", url: "/visualizer/stack/peek" },
-              { text: "Is Empty", url: "/visualizer/stack/isempty" },
-              { text: "Push Pop", url: "/visualizer/stack/push-pop" },
-            ]}
-          />
-        </main>
-        <div className="bg-gray-700 z-10 h-[1px]"></div>
-        <BackToTop/>
-        <Footer />
+        </div>
       </div>
-    );
+    </main>
+  );
 };
 
-export default StackVisualizer;
\ No newline at end of file
+export default StackVisualizer;
diff --git a/app/visualizer/stack/isfull/codeBlock.jsx b/app/visualizer/stack/isfull/codeBlock.jsx
index 9d32db8..72c4dc5 100644
--- a/app/visualizer/stack/isfull/codeBlock.jsx
+++ b/app/visualizer/stack/isfull/codeBlock.jsx
@@ -390,10 +390,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/isfull/content.jsx b/app/visualizer/stack/isfull/content.jsx
index 9cfeeae..b32ebaa 100644
--- a/app/visualizer/stack/isfull/content.jsx
+++ b/app/visualizer/stack/isfull/content.jsx
@@ -1,169 +1,246 @@
-import { parseAlpha } from "@tsparticles/engine";
-import { use } from "react";
+"use client";
+import ComplexityGraph from "@/app/components/ui/graph";
+import { useEffect, useState } from "react";
+
+const content = () => {
+  const [theme, setTheme] = useState("light");
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    const updateTheme = () => {
+      const savedTheme = localStorage.getItem("theme") || "light";
+      setTheme(savedTheme);
+    };
+
+    updateTheme();
+    setMounted(true);
+
+    window.addEventListener("storage", updateTheme);
+    window.addEventListener("themeChange", updateTheme);
+
+    return () => {
+      window.removeEventListener("storage", updateTheme);
+      window.removeEventListener("themeChange", updateTheme);
+    };
+  }, []);
 
-const Content = () => {
   const paragraphs = [
     `The Is Full operation checks whether a stack has reached its maximum capacity. This is particularly relevant for fixed-size stack implementations (arrays) rather than dynamic implementations (linked lists).`,
     `The Is Full operation is crucial when working with fixed-size stacks to prevent overflow errors. While not needed for dynamically-sized stacks, it's an essential safety check in many system-level implementations.`,
   ];
 
   const working = [
-    { points : "Returns true if the stack cannot accept more elements." },
-    { points : "Returns false if the stack can accept more elements." },
-    { points : "For dynamic stacks (no fixed size), this operation typically always returns false." },
-    { points : "Often used with Push operations to prevent stack overflow." },
+    { points: "Returns true if the stack cannot accept more elements." },
+    { points: "Returns false if the stack can accept more elements." },
+    {
+      points:
+        "For dynamic stacks (no fixed size), this operation typically always returns false.",
+    },
+    { points: "Often used with Push operations to prevent stack overflow." },
   ];
 
   const complexity = [
-    { points : "Fixed-size Stack:",
-      subpoints : [
-        "Time Complexity: O(1)",
-        "Space Complexity: O(1)",
-      ],
-     },
-    { points : "Dynamic Stack:",
-      subpoints : [
-        "Time Complexity: O(1)",
-        "Space Complexity: O(1)",
-      ],
-     },
+    {
+      points: "Fixed-size Stack:",
+      subpoints: ["Time Complexity: O(1)", "Space Complexity: O(1)"],
+    },
+    {
+      points: "Dynamic Stack:",
+      subpoints: ["Time Complexity: O(1)", "Space Complexity: O(1)"],
+    },
   ];
 
   const useCase = [
-    { points : "Preventing stack overflow in memory-constrained systems." },
-    { points : "Implementing bounded buffers or fixed-size caches." },
-    { points : "Memory management in embedded systems." },
-    { points : "Validating stack capacity before push operations" },
+    { points: "Preventing stack overflow in memory-constrained systems." },
+    { points: "Implementing bounded buffers or fixed-size caches." },
+    { points: "Memory management in embedded systems." },
+    { points: "Validating stack capacity before push operations" },
   ];
 
   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">
-    {/* 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">
-        <span className="w-1 h-6 bg-blue-500 mr-3 rounded-full"></span>
-        What is the "Is Full" Operation?
-      </h1>
-      <div className="prose dark:prose-invert max-w-none">
-        <p className="text-gray-700 dark:text-gray-300 leading-relaxed">
-          {paragraphs[0]}
-        </p>
-      </div>
-    </section>
-
-    {/* How It Works */}
-    <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>
-        How It Works
-      </h1>
-      <div className="prose dark:prose-invert max-w-none">
-        <ul className="space-y-2 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-          {working.map((item, index) => (
-            <li key={index} className="text-gray-700 dark:text-gray-300 pl-2">
-              {item.points}
-            </li>
-          ))}
-        </ul>
-      </div>
-    </section>
-
-    {/* Time and Space 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 and Space Complexity
-      </h1>
-      <div className="prose dark:prose-invert max-w-none">
-        <p className="text-gray-700 dark:text-gray-300 mb-4 leading-relaxed">
-          Here's the time and space complexity analysis for stack operations:
-        </p>
-        <ul className="space-y-3 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-          {complexity.map((item, index) => (
-            <li key={index} className="text-gray-700 dark:text-gray-300 pl-2">
-              <span className="font-mono bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded text-sm">
-                {item.points.split(':')[0]}:
-              </span>
-              <span className="ml-2">{item.points.split(':')[1]}</span>
-              {item.subpoints && (
-                <ul className="mt-2 space-y-2 list-disc pl-5 marker:text-gray-400 dark:marker:text-gray-500">
-                  {item.subpoints.map((subitem, subindex) => (
-                    <li key={subindex} className="text-gray-600 dark:text-gray-400">
-                      {subitem}
-                    </li>
-                  ))}
-                </ul>
-              )}
-            </li>
-          ))}
-        </ul>
+    <main className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-5 md:gap-4">
+      <div className="col-span-1">
+        <div className="hidden md:block">
+          {mounted && (
+            <iframe
+              key={theme}
+              src={
+                theme === "dark"
+                  ? "https://hw.glich.co/resources/embed/daily/dsa?theme=dark"
+                  : "https://hw.glich.co/resources/embed/daily/dsa?theme=light"
+              }
+              width="100%"
+              height="400"
+              title="Daily DSA Challenge"
+            ></iframe>
+          )}
+        </div>
+        <div className="flex justify-center">
+          <span className="text-xs hidden md:block">
+            Daily DSA Challenge by{" "}
+            <a
+              href="https://hw.glich.co/resources/daily"
+              target="_blank"
+              className="underline hover:text-blue-500 duration-300"
+            >
+              Hello World
+            </a>
+          </span>
+        </div>
       </div>
-    </section>
-
-    {/* Practical Example */}
-    <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>
-        Practical Example
-      </h1>
-      <div className="prose dark:prose-invert max-w-none">
-        <p className="text-gray-700 dark:text-gray-300 mb-4 leading-relaxed">
-          Consider a stack with maximum capacity of 3 elements:
-        </p>
-        <div className="space-y-4 mt-4">
-          <div className="flex items-center">
-            <div className="w-32 font-mono">Stack: [ ]</div>
-            <div className="ml-4 font-medium">
-              isFull() → <span className="text-red-500 dark:text-red-400">false</span>
+      <article className="col-span-4 max-w-4xl bg-white dark:bg-neutral-950 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden mb-8">
+        {/* What is the "Is Full" Operation? */}
+        <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 the "Is Full" Operation?
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <p className="text-gray-700 dark:text-gray-300 leading-relaxed">
+              {paragraphs[0]}
+            </p>
+          </div>
+        </section>
+
+        {/* How It Works */}
+        <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>
+            How It Works
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <ul className="space-y-2 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {working.map((item, index) => (
+                <li
+                  key={index}
+                  className="text-gray-700 dark:text-gray-300 pl-2"
+                >
+                  {item.points}
+                </li>
+              ))}
+            </ul>
+          </div>
+        </section>
+
+        {/* Time and Space 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 and Space Complexity
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <p className="text-gray-700 dark:text-gray-300 mb-4 leading-relaxed">
+              Here's the time and space complexity analysis for stack
+              operations:
+            </p>
+            <ul className="space-y-3 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {complexity.map((item, index) => (
+                <li
+                  key={index}
+                  className="text-gray-700 dark:text-gray-300 pl-2"
+                >
+                  <span className="font-mono bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded text-sm">
+                    {item.points.split(":")[0]}:
+                  </span>
+                  <span className="ml-2">{item.points.split(":")[1]}</span>
+                  {item.subpoints && (
+                    <ul className="mt-2 space-y-2 list-disc pl-5 marker:text-gray-400 dark:marker:text-gray-500">
+                      {item.subpoints.map((subitem, subindex) => (
+                        <li
+                          key={subindex}
+                          className="text-gray-600 dark:text-gray-400"
+                        >
+                          {subitem}
+                        </li>
+                      ))}
+                    </ul>
+                  )}
+                </li>
+              ))}
+            </ul>
+
+            <div className="mt-8">
+              <ComplexityGraph
+                bestCase={(n) => 1}
+                averageCase={(n) => 1}
+                worstCase={(n) => 1}
+                maxN={25}
+              />
             </div>
           </div>
-          <div className="flex items-center">
-            <div className="w-32 font-mono">Stack: [5, 3]</div>
-            <div className="ml-4 font-medium">
-              isFull() → <span className="text-red-500 dark:text-red-400">false</span>
+        </section>
+
+        {/* Practical Example */}
+        <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>
+            Practical Example
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <p className="text-gray-700 dark:text-gray-300 mb-4 leading-relaxed">
+              Consider a stack with maximum capacity of 3 elements:
+            </p>
+            <div className="space-y-4 mt-4">
+              <div className="flex items-center">
+                <div className="w-32 font-mono">Stack: [ ]</div>
+                <div className="ml-4 font-medium">
+                  isFull() →{" "}
+                  <span className="text-red-500 dark:text-red-400">false</span>
+                </div>
+              </div>
+              <div className="flex items-center">
+                <div className="w-32 font-mono">Stack: [5, 3]</div>
+                <div className="ml-4 font-medium">
+                  isFull() →{" "}
+                  <span className="text-red-500 dark:text-red-400">false</span>
+                </div>
+              </div>
+              <div className="flex items-center">
+                <div className="w-32 font-mono">Stack: [7, 3, 5]</div>
+                <div className="ml-4 font-medium">
+                  isFull() →{" "}
+                  <span className="text-green-600 dark:text-green-400">
+                    true
+                  </span>
+                </div>
+              </div>
             </div>
           </div>
-          <div className="flex items-center">
-            <div className="w-32 font-mono">Stack: [7, 3, 5]</div>
-            <div className="ml-4 font-medium">
-              isFull() → <span className="text-green-600 dark:text-green-400">true</span>
+        </section>
+
+        {/* Common Use Cases */}
+        <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>
+            Common Use Cases
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <ul className="space-y-2 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {useCase.map((item, index) => (
+                <li
+                  key={index}
+                  className="text-gray-700 dark:text-gray-300 pl-2"
+                >
+                  {item.points}
+                </li>
+              ))}
+            </ul>
+          </div>
+        </section>
+
+        {/* Additional Info */}
+        <section className="p-6">
+          <div className="prose dark:prose-invert max-w-none">
+            <div className="px-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
+              <p className="text-gray-700 dark:text-gray-300 leading-relaxed">
+                {paragraphs[1]}
+              </p>
             </div>
           </div>
-        </div>
-      </div>
-    </section>
-
-    {/* Common Use Cases */}
-    <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>
-        Common Use Cases
-      </h1>
-      <div className="prose dark:prose-invert max-w-none">
-        <ul className="space-y-2 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-          {useCase.map((item, index) => (
-            <li key={index} className="text-gray-700 dark:text-gray-300 pl-2">
-              {item.points}
-            </li>
-          ))}
-        </ul>
-      </div>
-    </section>
-
-    {/* Additional Info */}
-    <section className="p-6">
-      <div className="prose dark:prose-invert max-w-none">
-        <div className="p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
-          <p className="text-gray-700 dark:text-gray-300 leading-relaxed">
-            {paragraphs[1]}
-          </p>
-        </div>
-      </div>
-    </section>
-  </article>
-</main>
+        </section>
+      </article>
+    </main>
   );
 };
 
-export default Content;
+export default content;
diff --git a/app/visualizer/stack/isfull/page.jsx b/app/visualizer/stack/isfull/page.jsx
index 0993c10..f58d8ce 100644
--- a/app/visualizer/stack/isfull/page.jsx
+++ b/app/visualizer/stack/isfull/page.jsx
@@ -1,31 +1,119 @@
 import Animation from "@/app/visualizer/stack/isfull/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/isfull/content";
+import Quiz from "@/app/visualizer/stack/isfull/quiz";
+import Code from "@/app/visualizer/stack/isfull/codeBlock";
+import ModuleCard from "@/app/components/ui/ModuleCard";
+import { MODULE_MAPS } from "@/lib/modulesMap";
+import ExploreOther from '@/app/components/ui/exploreOther';
+import Footer from "@/app/components/footer";
+import BackToTopButton from "@/app/components/ui/backtotop";
 
 export const metadata = {
-  title: 'Stack Is Full Visualizer | Check Full Condition in Stack with Code in JS, C, Python, Java',
-  description: 'Understand how to check if a Stack is full using interactive animations and code examples in JavaScript, C, Python, and Java. A simple guide for beginners and DSA interview preparation.',
+  title:
+    "Stack Is Full Visualizer | Check Full Condition in Stack with Code in JS, C, Python, Java",
+  description:
+    "Understand how to check if a Stack is full using interactive animations and code examples in JavaScript, C, Python, and Java. A simple guide for beginners and DSA interview preparation.",
   keywords: [
-    'Stack Is Full',
-    'Is Full Operation Stack',
-    'Stack Full Condition',
-    'Stack Capacity Check',
-    'DSA Stack Animation',
-    'Learn Stack Operations',
-    'Stack in JavaScript',
-    'Stack in C',
-    'Stack in Python',
-    'Stack in Java',
-    'Stack Code Examples',
-    'Stack Overflow Condition',
+    "Stack Is Full",
+    "Is Full Operation Stack",
+    "Stack Full Condition",
+    "Stack Capacity Check",
+    "DSA Stack Animation",
+    "Learn Stack Operations",
+    "Stack in JavaScript",
+    "Stack in C",
+    "Stack in Python",
+    "Stack in Java",
+    "Stack Code Examples",
+    "Stack Overflow Condition",
   ],
   robots: "index, follow",
+  openGraph: {
+    images: [
+      {
+        url: "/og/stack/isFull.png",
+        width: 1200,
+        height: 630,
+        alt: "Stack isFull Visualization",
+      },
+    ],
+  },
 };
 
 export default function Page() {
-  return(
+  const paths = [
+    { name: "Home", href: "/" },
+    { name: "Visualizer", href: "/visualizer" },
+    { name: "Stack : IsFull", 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">
+              IsFull Operation
+            </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>
+          <Animation />
+        </section>
+
+        <section className="px-6">
+          <p className="text-lg text-center text-gray-600 dark:text-gray-400 mb-2">
+            Test Your Knowledge before moving forward!
+          </p>
+          <Quiz />
+        </section>
+
+        <section className="px-6">
+          <Code />
+        </section>
+
+        <section className="px-6 md:px-12 my-12">
+          <ModuleCard
+            moduleId={MODULE_MAPS.isFull}
+            title="Stack isFull"
+            description="Mark Stack : isFull as done and view it on your dashboard"
+            initialDone={false}
+          />
+        </section>
+
+        <section>
+          <ExploreOther
+            title="Explore other operations"
+            links={[
+              { text: "Peek", url: "/visualizer/stack/peek" },
+              { text: "Is Empty", url: "/visualizer/stack/isempty" },
+              { text: "Push Pop", url: "/visualizer/stack/push-pop" },
+            ]}
+          />
+        </section>
+      </div>
+
+      <BackToTopButton />
+      <Footer />
     </>
   );
-};
\ No newline at end of file
+}
diff --git a/app/visualizer/stack/isfull/quiz.jsx b/app/visualizer/stack/isfull/quiz.jsx
index 0e8d7fe..92133b5 100644
--- a/app/visualizer/stack/isfull/quiz.jsx
+++ b/app/visualizer/stack/isfull/quiz.jsx
@@ -1,3 +1,4 @@
+"use client";
 import React, { useState } from 'react';
 import { FaCheck, FaTimes, FaArrowRight, FaArrowLeft, FaInfoCircle, FaRedo, FaTrophy, FaStar, FaAward } from 'react-icons/fa';
 import { motion, AnimatePresence } from 'framer-motion';
@@ -129,30 +130,24 @@ const StackQuiz = () => {
   const calculateWeakAreas = () => {
     const weakAreas = [];
     if (answers[0] !== questions[0].correctAnswer) {
-      weakAreas.push("understanding the basic principle of Selection Sort");
+      weakAreas.push("understanding the purpose of 'isFull'");
     }
     if (answers[1] !== questions[1].correctAnswer) {
-      weakAreas.push("time complexity analysis");
+      weakAreas.push("knowing which stack implementations use 'isFull'");
     }
     if (answers[2] !== questions[2].correctAnswer) {
-      weakAreas.push("counting swaps in Selection Sort");
+      weakAreas.push("behavior of isFull in dynamic stacks");
     }
     if (answers[3] !== questions[3].correctAnswer) {
-      weakAreas.push("comparison with other simple sorts");
+      weakAreas.push("practical scenarios of stack capacity checks");
     }
     if (answers[4] !== questions[4].correctAnswer) {
-      weakAreas.push("space complexity");
+      weakAreas.push("importance of preventing overflow before push");
     }
-    if (answers[5] !== questions[5].correctAnswer) {
-      weakAreas.push("stability characteristics");
-    }
-    if (answers[6] !== questions[6].correctAnswer) {
-      weakAreas.push("practical applications");
-    }
-    
-    return weakAreas.length > 0 
-      ? `Focus on improving: ${weakAreas.join(', ')}. Review the corresponding sections above.`
-      : "Perfect! You've mastered all Selection Sort concepts!";
+
+    return weakAreas.length > 0
+      ? `Focus on improving: ${weakAreas.join(", ")}. Review the corresponding sections above.`
+      : "Perfect! You've mastered all 'isFull' stack concepts!";
   };
 
   const startQuiz = () => {
@@ -169,7 +164,7 @@ const StackQuiz = () => {
   };
 
   return (
-    <section className="max-w-2xl mx-auto shadow-lg rounded-xl bg-white dark:bg-gray-800 mt-8 mb-8 p-6 border border-gray-200 dark:border-gray-700">
+    <section className="max-w-4xl mx-auto shadow-lg rounded-xl bg-white dark:bg-neutral-950 mt-8 mb-8 p-6 border border-gray-200 dark:border-gray-700">
       {showIntro ? (
         <motion.div
           initial={{ opacity: 0, y: 20 }}
@@ -177,14 +172,14 @@ const StackQuiz = () => {
           className="text-center"
         >
           <div className="flex justify-center mb-6">
-            <div className="bg-blue-100 dark:bg-blue-900/30 p-4 rounded-full">
+            <div className="bg-blue-100 dark:bg-neutral-900 p-4 rounded-full">
               <FaAward className="text-4xl text-blue-500 dark:text-blue-500" />
             </div>
           </div>
           <h2 className="text-2xl font-bold mb-4 text-black dark:text-gray-100">
             Stack Quiz Challenge
           </h2>
-          <div className="bg-white dark:bg-gray-700 p-4 rounded-lg mb-6 text-left shadow-inner">
+          <div className="bg-white dark:bg-neutral-900 p-4 rounded-lg mb-6 text-left shadow-inner">
             <h3 className="font-bold mb-2 flex items-center text-blue-600 dark:text-blue-400">
               <FaInfoCircle className="mr-2" /> How it works:
             </h3>
diff --git a/lib/modulesMap.js b/lib/modulesMap.js
index 07494ef..f2eb3a7 100644
--- a/lib/modulesMap.js
+++ b/lib/modulesMap.js
@@ -9,4 +9,5 @@ export const MODULE_MAPS = {
     pushPop : "48138388-914b-4f84-8468-683175ce1a1e",
     peek : "fd95f8af-fb22-413f-9080-ebb558b53e70",
     isEmpty : "05ecbddd-e3d4-4fa1-aa45-71accac97d79",
+    isFull : "54301ec9-0586-48f0-a6db-18a41adeb856",
 }
\ No newline at end of file
diff --git a/public/og/stack/isFull.png b/public/og/stack/isFull.png
new file mode 100644
index 0000000..f0c8368
Binary files /dev/null and b/public/og/stack/isFull.png differ