diff --git a/app/api/auth/route.js b/app/api/auth/route.js
index 5f1bb5a..8858035 100755
--- a/app/api/auth/route.js
+++ b/app/api/auth/route.js
@@ -9,7 +9,7 @@ export async function POST(req) {
   try {
     // Parse JSON body safely
     const body = await req.json()
-    const { email, password, captchaToken, action } = body || {}
+    const { email, password, captchaToken, action, name } = body || {}
 
     // Validate required fields
     if (!email || !password) {
@@ -34,8 +34,11 @@ export async function POST(req) {
     }
 
     if (action === 'signup') {
-      // Create Supabase user
-      const { user, error } = await supabase.auth.admin.createUser({ email, password })
+      // Create Supabase user with metadata
+      const { user, error } = await supabase.auth.signUp(
+        { email, password },
+        { data: { display_name: name } }
+      )
       if (error) {
         return new Response(JSON.stringify({ success: false, message: error.message }), { status: 400 })
       }
diff --git a/app/login/page.jsx b/app/login/page.jsx
index 684a89a..fa65f82 100755
--- a/app/login/page.jsx
+++ b/app/login/page.jsx
@@ -1,85 +1,111 @@
-'use client'
-import { useState, useEffect } from 'react'
-import { supabase } from '../../lib/supabase'
-import { useRouter } from 'next/navigation'
-import { FiMail, FiLock, FiUser, FiLogIn, FiUserPlus, FiSun, FiMoon } from 'react-icons/fi'
-import { motion } from 'framer-motion'
-import Link from 'next/link'
-import dynamic from 'next/dynamic'
+"use client";
+import { useState, useEffect } from "react";
+import { supabase } from "../../lib/supabase";
+import { useRouter } from "next/navigation";
+import {
+  FiMail,
+  FiLock,
+  FiUser,
+  FiLogIn,
+  FiUserPlus,
+  FiSun,
+  FiMoon,
+} from "react-icons/fi";
+import { motion } from "framer-motion";
+import Link from "next/link";
+import dynamic from "next/dynamic";
 
 const Turnstile = dynamic(
-  () => import('@marsidev/react-turnstile').then((mod) => mod.Turnstile),
+  () => import("@marsidev/react-turnstile").then((mod) => mod.Turnstile),
   { ssr: false }
-)
+);
 
 export default function LoginPage() {
-  const [email, setEmail] = useState('')
-  const [password, setPassword] = useState('')
-  const [isLogin, setIsLogin] = useState(true)
-  const [loading, setLoading] = useState(false)
-  const [error, setError] = useState('')
-  const [theme, setTheme] = useState('light')
-  const [captchaToken, setCaptchaToken] = useState(null)
-  const router = useRouter()
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [name, setName] = useState("");
+  const [isLogin, setIsLogin] = useState(true);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+  const [theme, setTheme] = useState("light");
+  const [captchaToken, setCaptchaToken] = useState(null);
+  const router = useRouter();
 
   useEffect(() => {
-    const savedTheme = localStorage.getItem('theme') || 'light'
-    setTheme(savedTheme)
-    document.documentElement.classList.toggle('dark', savedTheme === 'dark')
-  }, [])
+    const savedTheme = localStorage.getItem("theme") || "light";
+    setTheme(savedTheme);
+    document.documentElement.classList.toggle("dark", savedTheme === "dark");
+  }, []);
 
   const toggleTheme = () => {
-    const newTheme = theme === 'light' ? 'dark' : 'light'
-    setTheme(newTheme)
-    localStorage.setItem('theme', newTheme)
-    document.documentElement.classList.toggle('dark', newTheme === 'dark')
-  }
+    const newTheme = theme === "light" ? "dark" : "light";
+    setTheme(newTheme);
+    localStorage.setItem("theme", newTheme);
+    document.documentElement.classList.toggle("dark", newTheme === "dark");
+  };
 
   const handleAuth = async () => {
-    setLoading(true)
-    setError('')
+    setLoading(true);
+    setError("");
 
     try {
-      if (!captchaToken) throw new Error('Please complete captcha')
+      if (!captchaToken) throw new Error("Please complete captcha");
 
       if (isLogin) {
         // Verify captcha first via API route
-        const verifyRes = await fetch('/api/auth', {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ email, password, captchaToken, action: 'login' }),
-        })
-        const verifyData = await verifyRes.json()
-        if (!verifyData.success) throw new Error(verifyData.message || 'Captcha verification failed')
+        const verifyRes = await fetch("/api/auth", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            email,
+            password,
+            captchaToken,
+            action: "login",
+          }),
+        });
+        const verifyData = await verifyRes.json();
+        if (!verifyData.success)
+          throw new Error(verifyData.message || "Captcha verification failed");
 
         // After captcha verified, login using frontend anon key
-        const { error } = await supabase.auth.signInWithPassword({ email, password })
-        if (error) throw error
+        const { error } = await supabase.auth.signInWithPassword({
+          email,
+          password,
+        });
+        if (error) throw error;
 
-        router.push('/dashboard')
+        router.push("/dashboard");
       } else {
         // Signup flow remains the same
-        const res = await fetch('/api/auth', {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ email, password, captchaToken, action: 'signup' }),
-        })
-        const data = await res.json()
-        if (!data.success) throw new Error(data.message || 'Signup failed')
-        alert(data.message)
-        setIsLogin(true)
+        const res = await fetch("/api/auth", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            email,
+            password,
+            captchaToken,
+            action: "signup",
+            name,
+          }),
+        });
+        const data = await res.json();
+        if (!data.success) throw new Error(data.message || "Signup failed");
+        alert(data.message);
+        setIsLogin(true);
       }
     } catch (err) {
-      setError(err.message || 'Something went wrong')
+      setError(err.message || "Something went wrong");
     } finally {
-      setLoading(false)
+      setLoading(false);
     }
-  }
+  };
 
   const handleGoogleSignIn = async () => {
-    const { error } = await supabase.auth.signInWithOAuth({ provider: 'google' })
-    if (error) console.error('Google sign-in error:', error.message)
-  }
+    const { error } = await supabase.auth.signInWithOAuth({
+      provider: "google",
+    });
+    if (error) console.error("Google sign-in error:", error.message);
+  };
 
   return (
     <div className="min-h-screen flex items-center justify-center p-4 bg-white dark:bg-neutral-900">
@@ -91,19 +117,54 @@ export default function LoginPage() {
         {/* Header */}
         <div className="bg-blue-500 p-6 text-white flex justify-between items-center">
           <div>
-            <h1 className="text-2xl font-bold">{isLogin ? 'Welcome Back' : 'Create Account'}</h1>
+            <h1 className="text-2xl font-bold">
+              {isLogin ? "Welcome Back" : "Create Account"}
+            </h1>
             <p className="text-blue-100 dark:text-blue-200">
-              {isLogin ? 'Sign in to access your dashboard' : 'Join us to get started'}
+              {isLogin
+                ? "Sign in to access your dashboard"
+                : "Join us to get started"}
             </p>
           </div>
-          <button onClick={toggleTheme} className="p-2 rounded-full hover:bg-blue-700" aria-label="Toggle theme">
-            {theme === 'light' ? <FiMoon className="w-5 h-5" /> : <FiSun className="w-5 h-5" />}
+          <button
+            onClick={toggleTheme}
+            className="p-2 rounded-full hover:bg-blue-700"
+            aria-label="Toggle theme"
+          >
+            {theme === "light" ? (
+              <FiMoon className="w-5 h-5" />
+            ) : (
+              <FiSun className="w-5 h-5" />
+            )}
           </button>
         </div>
 
+        <div className="flex justify-center items-center p-6">
+          {/* Google OAuth */}
+          <button
+            onClick={handleGoogleSignIn}
+            className="w-full flex items-center justify-center py-3 px-4 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-neutral-950 text-gray-700 dark:text-gray-200 font-medium hover:bg-gray-50 dark:hover:bg-neutral-900 duration-300 transition-all"
+          >
+            <img src="./google.webp" width={24}></img>
+            <span className="mx-2">Continue with Google</span>
+          </button>
+        </div>
+
+        <div className="relative flex items-center px-6">
+          <div className="flex-grow border-t border-gray-300 dark:border-gray-600"></div>
+          <span className="flex-shrink mx-4 text-gray-500 dark:text-gray-400">
+            or
+          </span>
+          <div className="flex-grow border-t border-gray-300 dark:border-gray-600"></div>
+        </div>
+
         <div className="p-6 space-y-4">
           {error && (
-            <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} className="bg-red-100 dark:bg-red-900/30 border-l-4 border-red-500 text-red-700 dark:text-red-300 p-3 rounded">
+            <motion.div
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              className="bg-red-100 dark:bg-red-900/30 border-l-4 border-red-500 text-red-700 dark:text-red-300 p-3 rounded"
+            >
               {error}
             </motion.div>
           )}
@@ -145,6 +206,8 @@ export default function LoginPage() {
                   type="text"
                   className="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-neutral-950 dark:text-gray-200"
                   placeholder="Full name"
+                  value={name}
+                  onChange={(e) => setName(e.target.value)}
                 />
               </div>
             )}
@@ -162,19 +225,19 @@ export default function LoginPage() {
               disabled={loading}
               className={`w-full flex items-center justify-center py-3 px-4 rounded-lg text-white font-medium transition-all ${
                 loading
-                  ? 'bg-gray-400 dark:bg-gray-600 cursor-not-allowed'
-                  : 'bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-800 shadow-md hover:shadow-lg'
+                  ? "bg-gray-400 dark:bg-gray-600 cursor-not-allowed"
+                  : "bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-800 shadow-md hover:shadow-lg"
               }`}
             >
               {loading ? (
-                'Processing...'
+                "Processing..."
               ) : isLogin ? (
                 <>
-                  <FiLogIn className="mr-2" /> Sign In
+                  <FiLogIn className="mr-2" /> Continue
                 </>
               ) : (
                 <>
-                  <FiUserPlus className="mr-2" /> Sign Up
+                  <FiUserPlus className="mr-2" /> Continue
                 </>
               )}
             </button>
@@ -184,48 +247,45 @@ export default function LoginPage() {
           <div className="text-center text-sm text-gray-600 dark:text-gray-400">
             {isLogin ? (
               <p>
-                Don't have an account?{' '}
-                <button onClick={() => setIsLogin(false)} className="text-blue-600 dark:text-blue-400 hover:underline">
+                Don't have an account?{" "}
+                <button
+                  onClick={() => setIsLogin(false)}
+                  className="text-blue-600 dark:text-blue-400 hover:underline"
+                >
                   Sign up
                 </button>
               </p>
             ) : (
               <p>
-                Already have an account?{' '}
-                <button onClick={() => setIsLogin(true)} className="text-blue-600 dark:text-blue-400 hover:underline">
+                Already have an account?{" "}
+                <button
+                  onClick={() => setIsLogin(true)}
+                  className="text-blue-600 dark:text-blue-400 hover:underline"
+                >
                   Sign in
                 </button>
               </p>
             )}
           </div>
 
-          {/* Google OAuth */}
-          <div className="relative flex items-center py-4">
-            <div className="flex-grow border-t border-gray-300 dark:border-gray-600"></div>
-            <span className="flex-shrink mx-4 text-gray-500 dark:text-gray-400">or</span>
-            <div className="flex-grow border-t border-gray-300 dark:border-gray-600"></div>
-          </div>
-
-          <button
-            onClick={handleGoogleSignIn}
-            className="w-full flex items-center justify-center py-3 px-4 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-neutral-950 text-gray-700 dark:text-gray-200 font-medium hover:bg-gray-50 dark:hover:bg-neutral-900 duration-300 transition-all"
-          >
-              <img src="./google.webp" width={24}></img>
-              <span className='mx-2'>Continue with Google</span>
-          </button>
-
           <div className="text-center text-xs text-gray-500 dark:text-gray-400 mt-6">
-            By continuing, you agree to our{' '}
-            <Link href="/terms" className="text-blue-500 dark:text-blue-400 hover:underline">
+            By continuing, you agree to our{" "}
+            <Link
+              href="/terms"
+              className="text-blue-500 dark:text-blue-400 hover:underline"
+            >
               Terms of Service
-            </Link>{' '}
-            and{' '}
-            <Link href="/privacy" className="text-blue-500 dark:text-blue-400 hover:underline">
+            </Link>{" "}
+            and{" "}
+            <Link
+              href="/privacy"
+              className="text-blue-500 dark:text-blue-400 hover:underline"
+            >
               Privacy Policy
             </Link>
           </div>
         </div>
       </motion.div>
     </div>
-  )
-}
\ No newline at end of file
+  );
+}
diff --git a/app/visualizer/stack/implementation/usingLinkedList/animation.jsx b/app/visualizer/stack/implementation/usingLinkedList/animation.jsx
deleted file mode 100755
index 714945f..0000000
--- a/app/visualizer/stack/implementation/usingLinkedList/animation.jsx
+++ /dev/null
@@ -1,41 +0,0 @@
-'use client';
-import Footer from '@/app/components/footer';
-import ExploreOther from '@/app/components/ui/exploreOther';
-import Content from'@/app/visualizer/stack/implementation/usingLinkedList/content';
-import CodeBlock from'@/app/visualizer/stack/implementation/usingLinkedList/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 Array", url: "./usingArray" },
-          ]}
-        />
-      </main>
-      <div className="bg-gray-700 z-10 h-[1px]"></div>
-      <BackToTop/>
-      <Footer />
-    </div>
-  );
-};
-
-export default InfixToPostfixVisualizer;
\ No newline at end of file
diff --git a/app/visualizer/stack/implementation/usingLinkedList/codeBlock.jsx b/app/visualizer/stack/implementation/usingLinkedList/codeBlock.jsx
index ceb35eb..2f095c2 100755
--- a/app/visualizer/stack/implementation/usingLinkedList/codeBlock.jsx
+++ b/app/visualizer/stack/implementation/usingLinkedList/codeBlock.jsx
@@ -452,10 +452,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/usingLinkedList/content.jsx b/app/visualizer/stack/implementation/usingLinkedList/content.jsx
index 4d5120d..1e3aa28 100755
--- a/app/visualizer/stack/implementation/usingLinkedList/content.jsx
+++ b/app/visualizer/stack/implementation/usingLinkedList/content.jsx
@@ -1,4 +1,29 @@
-const Content = () => {
+"use client";
+import React from "react";
+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 paragraph = [
     `A stack implemented using a linked list follows the LIFO (Last In First Out) principle. Unlike array implementation, linked list stacks dynamically allocate memory for each element and don't have size limitations (until memory is exhausted).`,
   ];
@@ -53,8 +78,37 @@ 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-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>
+      <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">
@@ -68,42 +122,22 @@ const Content = () => {
       </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()", "size()"].map((op) => (
-          <div
-            key={op}
-            className="bg-gray-100 dark:bg-gray-700 p-3 rounded-lg text-center shadow-sm"
-          >
-            <span className="text-sm sm:text-base font-mono">
-              {op}
-            </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>
+          <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-gray-400 dark:border-gray-500 rounded-lg p-4 bg-white dark:bg-gray-800 shadow-md">
+        <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-gray-700">
+            <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}>
@@ -127,13 +161,13 @@ const Content = () => {
         </div>
 
         {/* Stack Helper Operations */}
-        <div className="border-2 border-gray-400 dark:border-gray-500 rounded-lg p-4 bg-white dark:bg-gray-800 shadow-md">
+        <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-gray-700">
+            <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}>
@@ -158,45 +192,6 @@ const Content = () => {
       </div>
     </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-80">
-          <div className="flex flex-col items-center">
-            <div className="flex items-center justify-center">
-              <div className="w-16 h-8 border border-gray-400 flex items-center justify-center">
-                Head
-              </div>
-              <div className="w-8 h-1 bg-gray-400"></div>
-              <div className="w-20 h-12 border border-gray-400 rounded flex flex-col items-center justify-center">
-                <div>8</div>
-                <div className="text-xs">(top)</div>
-              </div>
-            </div>
-            <div className="w-8 h-4 bg-gray-400 transform rotate-90"></div>
-            <div className="w-20 h-12 border border-gray-400 rounded flex items-center justify-center">
-              17
-            </div>
-            <div className="w-8 h-4 bg-gray-400 transform rotate-90"></div>
-            <div className="w-20 h-12 border border-gray-400 rounded flex items-center justify-center">
-              42
-            </div>
-            <div className="w-8 h-4 bg-gray-400 transform rotate-90"></div>
-            <div className="w-20 h-12 border border-gray-400 rounded flex items-center justify-center">
-              null
-            </div>
-          </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>
-
     {/* 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">
@@ -206,10 +201,10 @@ const Content = () => {
       <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">
+            <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>
@@ -224,13 +219,13 @@ const Content = () => {
             ].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"}
+                className={index % 2 === 0 ? "bg-white dark:bg-neutral-950" : "bg-blue-50 dark:bg-neutral-900"}
               >
-                <td className="border border-gray-400 p-3">{op}</td>
-                <td className="border border-gray-400 p-3 font-mono">
+                <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-gray-400 p-3 hidden sm:table-cell">
+                <td className="border border-blue-400 p-3 hidden sm:table-cell">
                   {reason}
                 </td>
               </tr>
@@ -272,10 +267,10 @@ const Content = () => {
       <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">Feature</th>
-              <th className="border border-gray-400 p-3 font-semibold">Linked List</th>
-              <th className="border border-gray-400 p-3 font-semibold">Array</th>
+            <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>
@@ -288,13 +283,13 @@ const Content = () => {
             ].map(([feature, ll, arr], index) => (
               <tr
                 key={feature}
-                className={index % 2 === 0 ? "bg-white dark:bg-gray-800" : "bg-gray-50 dark:bg-gray-700"}
+                className={index % 2 === 0 ? "bg-white dark:bg-neutral-950" : "bg-gray-50 dark:bg-neutral-900"}
               >
-                <td className="border border-gray-400 p-3">{feature}</td>
-                <td className="border border-gray-400 p-3 font-mono">
+                <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-gray-400 p-3 font-mono">
+                <td className="border border-blue-400 p-3 font-mono">
                   {arr}
                 </td>
               </tr>
@@ -308,4 +303,4 @@ const Content = () => {
     );
   };
   
-  export default Content;
\ No newline at end of file
+  export default content;
\ No newline at end of file
diff --git a/app/visualizer/stack/implementation/usingLinkedList/page.jsx b/app/visualizer/stack/implementation/usingLinkedList/page.jsx
index dff7373..e37954a 100755
--- a/app/visualizer/stack/implementation/usingLinkedList/page.jsx
+++ b/app/visualizer/stack/implementation/usingLinkedList/page.jsx
@@ -1,32 +1,106 @@
-import Animation from "@/app/visualizer/stack/implementation/usingLinkedList/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/usingLinkedList/content";
+import Code from "@/app/visualizer/stack/implementation/usingLinkedList/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 Linked List | Learn Stack in DSA with JS, C, Python, Java Code',
-    description: 'Explore how to implement a Stack using a Linked List with step-by-step visual explanations, animations, and complete code in JavaScript, C, Python, and Java. Ideal for DSA learners and coding interview prep.',
-    keywords: [
-      'Stack using Linked List',
-      'Stack Implementation',
-      'Stack Implementation in JavaScript',
-      'Stack Implementation in C',
-      'Stack Implementation in Python',
-      'Stack Implementation in Java',
-      'Linked List Stack',
-      'DSA Stack',
-      'Data Structures Stack',
-      'Stack Push Pop Linked List',
-      'Learn Stack DSA',
-      'Visualize Stack Implementation',
-      'Stack Code Examples',
+  title:
+    "Stack Implementation using Linked List | Learn Stack in DSA with JS, C, Python, Java Code",
+  description:
+    "Explore how to implement a Stack using a Linked List with step-by-step visual explanations, animations, and complete code in JavaScript, C, Python, and Java. Ideal for DSA learners and coding interview prep.",
+  keywords: [
+    "Stack using Linked List",
+    "Stack Implementation",
+    "Stack Implementation in JavaScript",
+    "Stack Implementation in C",
+    "Stack Implementation in Python",
+    "Stack Implementation in Java",
+    "Linked List Stack",
+    "DSA Stack",
+    "Data Structures Stack",
+    "Stack Push Pop Linked List",
+    "Learn Stack DSA",
+    "Visualize Stack Implementation",
+    "Stack Code Examples",
+  ],
+  robots: "index, follow",
+  openGraph: {
+    images: [
+      {
+        url: "/og/stack/stackLinkedList.png",
+        width: 1200,
+        height: 630,
+        alt: "Stack Implementation using Linked List",
+      },
     ],
-    robots: 'index, follow',
-  };
+  },
+};
 
-export default function Page(){
-  return(
+export default function Page() {
+  const paths = [
+    { name: "Home", href: "/" },
+    { name: "Visualizer", href: "/visualizer" },
+    { name: "Stack : Implementation Using Linked List", 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 Linked List
+            </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.stackLinkedList}
+            title="Stack Implementation using Linked List"
+            description="Mark Stack using Linked List as done and view it on your dashboard"
+            initialDone={false}
+          />
+        </section>
+
+        <section>
+          <ExploreOther
+          title="Explore other implementation"
+          links={[
+            { text: "Using Array", url: "./usingArray" },
+          ]}
+        />
+        </section>
+      </div>
+
+      <BackToTopButton />
+      <Footer />
     </>
   );
-};
\ No newline at end of file
+}
diff --git a/lib/modulesMap.js b/lib/modulesMap.js
index e630b2f..0430848 100755
--- a/lib/modulesMap.js
+++ b/lib/modulesMap.js
@@ -13,5 +13,5 @@ export const MODULE_MAPS = {
     postfix : "ca3daf8d-23f8-4ade-adfd-4bd0a88d3da2",
     prefix : "a2971df4-5e48-4320-bc91-3de3242cac48",
     stackArray : "4e0dd1e0-a8c7-4066-845c-b5917383d5c2",
-    stackLinkedList : "",
+    stackLinkedList : "69ecfabf-97d3-433e-972e-54ea4c91374f",
 }
\ No newline at end of file
diff --git a/public/modules/stackLinkedList.png b/public/modules/stackLinkedList.png
new file mode 100755
index 0000000..2cf7450
Binary files /dev/null and b/public/modules/stackLinkedList.png differ
diff --git a/public/og/stack/stackLinkedList.png b/public/og/stack/stackLinkedList.png
new file mode 100755
index 0000000..c5e2fe0
Binary files /dev/null and b/public/og/stack/stackLinkedList.png differ