diff --git a/app/components/navbar.jsx b/app/components/navbar.jsx
index 746d369..802420d 100755
--- a/app/components/navbar.jsx
+++ b/app/components/navbar.jsx
@@ -260,7 +260,7 @@ const handleLogout = async () => {
   return (
     <nav
       className={`fixed w-[calc(100%-2rem)] mx-4 mt-4 bg-white/80 dark:bg-black/80 backdrop-blur-lg rounded-2xl border border-gray-200 dark:border-gray-700 text-black dark:text-white z-50 transition-all duration-300 ${
-        isScrolled ? "shadow-xl" : "shadow-md"
+        isScrolled ? "shadow-xl" : "shadow-xl"
       }`}
     >
       <div className="max-w-6xl mx-auto flex justify-between items-center px-6 py-3">
diff --git a/app/visualizer/queue/operations/isempty/content.jsx b/app/visualizer/queue/operations/isempty/content.jsx
index 2f1eba2..550f888 100755
--- a/app/visualizer/queue/operations/isempty/content.jsx
+++ b/app/visualizer/queue/operations/isempty/content.jsx
@@ -2,24 +2,24 @@
 import { useEffect, useState } from "react";
 
 const content = () => {
-  const [theme, setTheme] = useState('light');
+  const [theme, setTheme] = useState("light");
   const [mounted, setMounted] = useState(false);
 
   useEffect(() => {
     const updateTheme = () => {
-      const savedTheme = localStorage.getItem('theme') || 'light';
+      const savedTheme = localStorage.getItem("theme") || "light";
       setTheme(savedTheme);
     };
 
     updateTheme();
     setMounted(true);
 
-    window.addEventListener('storage', updateTheme);
-    window.addEventListener('themeChange', updateTheme);
+    window.addEventListener("storage", updateTheme);
+    window.addEventListener("themeChange", updateTheme);
 
     return () => {
-      window.removeEventListener('storage', updateTheme);
-      window.removeEventListener('themeChange', updateTheme);
+      window.removeEventListener("storage", updateTheme);
+      window.removeEventListener("themeChange", updateTheme);
     };
   }, []);
 
@@ -29,54 +29,49 @@ const content = () => {
   ];
 
   const example = [
-    { points : "Empty Queue: []",
-      subpoints : [
-        "isEmpty() → returns true",
-      ],
-     },
-    { points : "Non-empty Queue: [10, 20, 30]",
-      subpoints : [
-        "isEmpty() → returns false",
-      ],
-     },
+    { points: "Empty Queue: []", subpoints: ["isEmpty() → returns true"] },
+    {
+      points: "Non-empty Queue: [10, 20, 30]",
+      subpoints: ["isEmpty() → returns false"],
+    },
   ];
 
   const implementation = [
-    { points : "Array-based Implementation:",
-      subpoints : [
+    {
+      points: "Array-based Implementation:",
+      subpoints: [
         "Check if front pointer == rear pointer",
         "Or maintain a separate size counter",
       ],
-     },
-    { points : "Linked List Implementation:",
-      subpoints : [
-        "Check if head pointer == null",
-      ],
-     },
+    },
+    {
+      points: "Linked List Implementation:",
+      subpoints: ["Check if head pointer == null"],
+    },
   ];
 
   const steps = [
-    { points : "Examine the front of the queue" },
-    { points : "If front is null (or front == rear in array implementation)" },
-    { points : "Return true (queue is empty)" },
-    { points : "Else return false (queue has elements)" },
+    { points: "Examine the front of the queue" },
+    { points: "If front is null (or front == rear in array implementation)" },
+    { points: "Return true (queue is empty)" },
+    { points: "Else return false (queue has elements)" },
   ];
 
   const complexity = [
-    { points : "It only requires a simple pointer comparison" },
-    { points : "No iteration through elements is needed" },
-    { points : "Performance doesn't depend on queue size" },
+    { points: "It only requires a simple pointer comparison" },
+    { points: "No iteration through elements is needed" },
+    { points: "Performance doesn't depend on queue size" },
   ];
 
   const usage = [
-    { points : "Before dequeue operations to prevent underflow" },
-    { points : "In queue processing loops" },
-    { points : "As a termination condition in algorithms" },
-    { points : "To initialize queue operations safely" },
+    { points: "Before dequeue operations to prevent underflow" },
+    { points: "In queue processing loops" },
+    { points: "As a termination condition in algorithms" },
+    { points: "To initialize queue operations safely" },
   ];
 
-    return (
-          <main className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-5 md:gap-4">
+  return (
+    <main className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-5 md:gap-4">
       <div className="col-span-1">
         <div className="hidden md:block">
           {mounted && (
@@ -107,153 +102,176 @@ const content = () => {
         </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">
-    {/* What is the isEmpty Operation? */}
-    <section className="p-6 border-b border-gray-100 dark:border-gray-700">
-      <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
-        <span className="w-1 h-6 bg-blue-500 mr-3 rounded-full"></span>
-        What is the isEmpty 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>
+        {/* What is the isEmpty Operation? */}
+        <section className="p-6 border-b border-gray-100 dark:border-gray-700">
+          <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-blue-500 mr-3 rounded-full"></span>
+            What is the isEmpty 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 Does It Work? */}
-    <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 Does It Work?
-      </h1>
-      <div className="prose dark:prose-invert max-w-none">
-        <p className="text-gray-700 dark:text-gray-300 mb-4 leading-relaxed">
-          The isEmpty operation simply checks the current state of the queue. Example scenarios:
-        </p>
-        
-        <ol className="space-y-3 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-          {example.map((item, index) => (
-            <li key={index} className="text-gray-700 dark:text-gray-300 pl-2">
-              {item.points}
-              {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>
-          ))}
-        </ol>
-        
-        <p className="text-gray-700 dark:text-gray-300 mt-4 leading-relaxed">
-          The operation doesn't modify the queue in any way - it only checks its state.
-        </p>
-      </div>
-    </section>
+        {/* How Does It Work? */}
+        <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 Does It Work?
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <p className="text-gray-700 dark:text-gray-300 mb-4 leading-relaxed">
+              The isEmpty operation simply checks the current state of the
+              queue. Example scenarios:
+            </p>
 
-    {/* Implementation Details */}
-    <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>
-        Implementation Details
-      </h1>
-      <div className="prose dark:prose-invert max-w-none">
-        <p className="text-gray-700 dark:text-gray-300 mb-4 leading-relaxed">
-          Different implementations check emptiness differently:
-        </p>
-        
-        <ol className="space-y-3 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-          {implementation.map((item, index) => (
-            <li key={index} className="text-gray-700 dark:text-gray-300 pl-2">
-              {item.points}
-              {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>
-          ))}
-        </ol>
-      </div>
-    </section>
+            <ol className="space-y-3 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {example.map((item, index) => (
+                <li
+                  key={index}
+                  className="text-gray-700 dark:text-gray-300 pl-2"
+                >
+                  {item.points}
+                  {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>
+              ))}
+            </ol>
 
-    {/* Algorithm 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>
-        Algorithm Steps
-      </h1>
-      <div className="prose dark:prose-invert max-w-none">
-        <ol className="space-y-2 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-          {steps.map((item, index) => (
-            <li key={index} className="text-gray-700 dark:text-gray-300 pl-2">
-              {item.points}
-            </li>
-          ))}
-        </ol>
-      </div>
-    </section>
+            <p className="text-gray-700 dark:text-gray-300 mt-4 leading-relaxed">
+              The operation doesn't modify the queue in any way - it only checks
+              its state.
+            </p>
+          </div>
+        </section>
 
-    {/* Time Complexity */}
-    <section className="p-6 border-b border-gray-100 dark:border-gray-700">
-      <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
-        <span className="w-1 h-6 bg-blue-500 mr-3 rounded-full"></span>
-        Time Complexity
-      </h1>
-      <div className="prose dark:prose-invert max-w-none">
-        <p className="text-gray-700 dark:text-gray-300 mb-4 leading-relaxed">
-          The isEmpty operation always runs in O(1) constant time because:
-        </p>
-        <ul className="space-y-2 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">
-              {item.points}
-            </li>
-          ))}
-        </ul>
-      </div>
-    </section>
+        {/* Implementation Details */}
+        <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>
+            Implementation Details
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <p className="text-gray-700 dark:text-gray-300 mb-4 leading-relaxed">
+              Different implementations check emptiness differently:
+            </p>
 
-    {/* Practical Usage */}
-    <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 Usage
-      </h1>
-      <div className="prose dark:prose-invert max-w-none">
-        <p className="text-gray-700 dark:text-gray-300 mb-4 leading-relaxed">
-          isEmpty is commonly used:
-        </p>
-        <ul className="space-y-2 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-          {usage.map((item, index) => (
-            <li key={index} className="text-gray-700 dark:text-gray-300 pl-2">
-              {item.points}
-            </li>
-          ))}
-        </ul>
-      </div>
-    </section>
+            <ol className="space-y-3 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {implementation.map((item, index) => (
+                <li
+                  key={index}
+                  className="text-gray-700 dark:text-gray-300 pl-2"
+                >
+                  {item.points}
+                  {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>
+              ))}
+            </ol>
+          </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>
-    </section>
-  </article>
+        {/* Algorithm 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>
+            Algorithm Steps
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <ol className="space-y-2 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {steps.map((item, index) => (
+                <li
+                  key={index}
+                  className="text-gray-700 dark:text-gray-300 pl-2"
+                >
+                  {item.points}
+                </li>
+              ))}
+            </ol>
+          </div>
+        </section>
+
+        {/* Time Complexity */}
+        <section className="p-6 border-b border-gray-100 dark:border-gray-700">
+          <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-blue-500 mr-3 rounded-full"></span>
+            Time Complexity
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <p className="text-gray-700 dark:text-gray-300 mb-4 leading-relaxed">
+              The isEmpty operation always runs in O(1) constant time because:
+            </p>
+            <ul className="space-y-2 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"
+                >
+                  {item.points}
+                </li>
+              ))}
+            </ul>
+          </div>
+        </section>
 
-  {/* Mobile iframe at bottom */}
+        {/* Practical Usage */}
+        <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 Usage
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <p className="text-gray-700 dark:text-gray-300 mb-4 leading-relaxed">
+              isEmpty is commonly used:
+            </p>
+            <ul className="space-y-2 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {usage.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>
+        </section>
+      </article>
+
+      {/* Mobile iframe at bottom */}
       <div className="block md:hidden w-full">
         {mounted && (
           <iframe
@@ -281,8 +299,8 @@ const content = () => {
           </span>
         </div>
       </div>
-</main>
-    );
-  };
-  
-  export default content;
\ No newline at end of file
+    </main>
+  );
+};
+
+export default content;
diff --git a/app/visualizer/queue/operations/isempty/page.jsx b/app/visualizer/queue/operations/isempty/page.jsx
index 2688eb7..eda3c6d 100755
--- a/app/visualizer/queue/operations/isempty/page.jsx
+++ b/app/visualizer/queue/operations/isempty/page.jsx
@@ -36,7 +36,7 @@ export const metadata = {
         url: "/og/queue/isEmpty.png",
         width: 1200,
         height: 630,
-        alt: "Peek Front Algorithm Visualization",
+        alt: "isEmpty Algorithm Visualization",
       },
     ],
   },
diff --git a/app/visualizer/queue/operations/isfull/animation.jsx b/app/visualizer/queue/operations/isfull/animation.jsx
index ddf4c78..e7aa23c 100755
--- a/app/visualizer/queue/operations/isfull/animation.jsx
+++ b/app/visualizer/queue/operations/isfull/animation.jsx
@@ -1,297 +1,253 @@
-'use client';
-import React, { useState, useEffect } from 'react';
-import Footer from '@/app/components/footer';
-import CodeBlock from "@/app/visualizer/queue/operations/isfull/codeBlock";
-import Content from "@/app/visualizer/queue/operations/isfull/content";
-import ExploreOther from '@/app/components/ui/exploreOther';
-import Quiz from '@/app/visualizer/queue/operations/isfull/quiz';
-import BackToTop from '@/app/components/ui/backtotop';
-import GoBackButton from "@/app/components/ui/goback";
+"use client";
+import { useState, useEffect } from "react";
 
 const QueueVisualizer = () => {
-  const MAX_SIZE = 5; // Set maximum queue size
   const [queue, setQueue] = useState([]);
-  const [inputValue, setInputValue] = useState('');
+  const [inputValue, setInputValue] = useState("");
+  const [maxSize, setMaxSize] = useState(5);          // capacity
   const [operation, setOperation] = useState(null);
-  const [message, setMessage] = useState('Queue is empty');
+  const [message, setMessage] = useState("Queue is empty");
   const [isAnimating, setIsAnimating] = useState(false);
-  const [isEmptyStatus, setIsEmptyStatus] = useState(true);
-  const [isFullStatus, setIsFullStatus] = useState(false);
-  const [highlightFull, setHighlightFull] = useState(false);
 
-  // Check if queue is full whenever it changes
-  useEffect(() => {
-    const full = queue.length >= MAX_SIZE;
-    setIsFullStatus(full);
-    if (full) {
-      setMessage(`Queue is full (max ${MAX_SIZE} items)`);
-    }
-  }, [queue]);
+  const isFull = queue.length >= maxSize;
 
-  // Enqueue operation
-  const enqueue = () => {
-    if (isFullStatus) {
-      // Animation for full queue
-      setHighlightFull(true);
-      setTimeout(() => setHighlightFull(false), 1000);
-      setMessage(`Cannot enqueue - queue is full!`);
-      return;
-    }
+  /* ---------- helpers ---------- */
+  const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
+  const showOp = async (txt, ms = 800) => {
+    setOperation(txt);
+    await sleep(ms);
+    setOperation(null);
+  };
 
+  /* ---------- enqueue ---------- */
+  const enqueue = async () => {
     if (!inputValue.trim()) {
-      setMessage('Please enter a value');
+      setMessage("Please enter a value");
+      return;
+    }
+    if (isFull) {
+      setMessage("Queue is full!");
       return;
     }
-
     setIsAnimating(true);
-    setOperation(`Enqueuing "${inputValue}"...`);
-    setIsEmptyStatus(false);
-
-    setTimeout(() => {
-      setQueue((prev) => [...prev, inputValue]);
-      setOperation(null);
-      setMessage(`"${inputValue}" added to queue`);
-      setInputValue('');
-      setIsAnimating(false);
-    }, 800);
+    await showOp(`Enqueuing “${inputValue}” …`);
+    setQueue((q) => [...q, inputValue]);
+    setMessage(`“${inputValue}” added to rear`);
+    setInputValue("");
+    setIsAnimating(false);
   };
 
-  // Dequeue operation
-  const dequeue = () => {
+  /* ---------- dequeue ---------- */
+  const dequeue = async () => {
     if (queue.length === 0) {
-      setMessage('Queue is empty!');
-      setIsEmptyStatus(true);
+      setMessage("Queue is empty!");
       return;
     }
-
-    setIsAnimating(true);
-    const dequeuedValue = queue[0];
-    setOperation(`Dequeuing "${dequeuedValue}"...`);
-
-    setTimeout(() => {
-      setQueue((prev) => prev.slice(1));
-      setOperation(null);
-      setMessage(`"${dequeuedValue}" removed from queue`);
-      setIsAnimating(false);
-      setIsEmptyStatus(queue.length === 1);
-    }, 800);
-  };
-
-  // IsEmpty operation
-  const checkEmpty = () => {
     setIsAnimating(true);
-    setOperation('Checking if queue is empty...');
-
-    setTimeout(() => {
-      const empty = queue.length === 0;
-      setIsEmptyStatus(empty);
-      setOperation(null);
-      setMessage(empty ? 'Queue is empty!' : 'Queue is not empty');
-      setIsAnimating(false);
-    }, 800);
+    const front = queue[0];
+    await showOp(`Dequeuing “${front}” …`);
+    setQueue((q) => q.slice(1));
+    setMessage(`“${front}” removed from front`);
+    setIsAnimating(false);
   };
 
-  // IsFull operation
-  const checkFull = () => {
+  /* ---------- isFull ---------- */
+  const checkFull = async () => {
     setIsAnimating(true);
-    setOperation('Checking if queue is full...');
-    setHighlightFull(true);
-
-    setTimeout(() => {
-      setOperation(null);
-      setMessage(isFullStatus ? `Queue is full (max ${MAX_SIZE} items)` : 'Queue is not full');
-      setIsAnimating(false);
-      setTimeout(() => setHighlightFull(false), 500);
-    }, 800);
+    await showOp("Checking if queue is full …");
+    setMessage(isFull ? "Queue is FULL" : "Queue is NOT full");
+    setIsAnimating(false);
   };
 
-  // Reset queue
+  /* ---------- reset ---------- */
   const reset = () => {
     setQueue([]);
-    setInputValue('');
+    setInputValue("");
     setOperation(null);
-    setMessage('Queue cleared');
-    setIsEmptyStatus(true);
-    setIsFullStatus(false);
+    setMessage("Queue cleared");
   };
 
+  /* ---------- UI ---------- */
   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">Queue - 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"></p>
+    <main className="container mx-auto px-6 pb-4">
+      <p className="text-lg text-center text-gray-600 dark:text-gray-400 mb-8">
+        Visualise isFull operation in real-time
+      </p>
+
+      <div className="max-w-4xl mx-auto">
+        {/* ----- Controls card ----- */}
+        <div className="bg-white dark:bg-neutral-950 p-6 rounded-xl shadow-lg border border-gray-200 dark:border-gray-700 mb-8">
+          {/* Value input + Enqueue */}
+          <div className="flex flex-col sm:flex-row gap-4 mb-4">
+            <input
+              type="text"
+              value={inputValue}
+              onChange={(e) => setInputValue(e.target.value)}
+              placeholder="Enter value"
+              className="flex-1 p-3 border dark:border-gray-700 rounded-lg dark:bg-neutral-900 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
+              disabled={isAnimating}
+              onKeyDown={(e) => e.key === "Enter" && enqueue()}
+            />
+          </div>
 
-        <div className="max-w-2xl mx-auto">
-          {/* Controls */}
-          <div className="bg-white dark:bg-gray-800 p-4 sm:p-6 rounded-lg shadow-md mb-8 border border-gray-200 dark:border-gray-700">
-            <div className="flex flex-col sm:flex-row gap-2 mb-4">
+          {/* Max-size input */}
+          <div className="flex flex-col sm:flex-row gap-4 mb-4">
+            <label className="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300">
+              Queue size (capacity):
               <input
-                type="text"
-                value={inputValue}
-                onChange={(e) => setInputValue(e.target.value)}
-                placeholder="Enter value"
-                className="flex-1 p-2 border rounded dark:bg-gray-700 focus:ring-2 focus:ring-green-500"
-                disabled={isAnimating || isFullStatus}
-              />
-              <button
-                onClick={enqueue}
-                disabled={isAnimating || isFullStatus}
-                className={`bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded disabled:opacity-50 w-full sm:w-auto ${
-                  isFullStatus ? 'cursor-not-allowed' : ''
-                }`}
-              >
-                Enqueue
-              </button>
-            </div>
-            <div className="grid grid-cols-1 sm:grid-cols-3 gap-2">
-              <button
-                onClick={dequeue}
-                disabled={isAnimating || queue.length === 0}
-                className="bg-none border border-black dark:border-white text-black dark:text-white disabled:border-blue-600 dark:disabled:border-blue-600 disabled:bg-transparent disabled:text-blue-600 dark:disabled:text-blue-600 px-4 py-2 rounded disabled:opacity-50"
-              >
-                Dequeue
-              </button>
-              <button
-                onClick={checkFull}
-                disabled={isAnimating}
-                className="bg-none border dark:border-white border-black text-black dark:text-white px-4 py-2 rounded disabled:opacity-50"
-              >
-                IsFull
-              </button>
-              <button
-                onClick={reset}
-                className="bg-none border border-black dark:border-white text-black dark:text-white px-4 py-2 rounded disabled:opacity-50"
+                type="number"
+                min="1"
+                max="20"
+                value={maxSize}
+                onChange={(e) => {
+                  const val = Number(e.target.value);
+                  if (val > 0) setMaxSize(val);
+                }}
+                className="w-20 p-2 border dark:border-gray-700 rounded dark:bg-neutral-900"
                 disabled={isAnimating}
-              >
-                Reset
-              </button>
-            </div>
-            <div className="mt-2 text-sm text-gray-600 dark:text-gray-400">
-              Max size: {MAX_SIZE} items
-            </div>
+              />
+            </label>
+          </div>
+
+          {/* Action buttons */}
+          <div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
+            <button
+              onClick={enqueue}
+              disabled={isAnimating || isFull}
+              className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-3 rounded-lg disabled:opacity-50 transition-all"
+            >
+              Enqueue
+            </button>
+            <button
+              onClick={dequeue}
+              disabled={isAnimating || queue.length === 0}
+              className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg disabled:opacity-50 transition-all"
+            >
+              Dequeue
+            </button>
+            <button
+              onClick={checkFull}
+              disabled={isAnimating}
+              className="bg-green-500 text-black px-4 py-2 rounded-lg disabled:opacity-50 transition-all"
+            >
+              IsFull
+            </button>
+            <button
+              onClick={reset}
+              disabled={isAnimating}
+              className="bg-red-500 text-white px-4 py-2 rounded-lg disabled:opacity-50 transition-all"
+            >
+              Reset
+            </button>
           </div>
 
-          {/* Queue Visualization */}
-          <div className="bg-white dark:bg-gray-800 p-4 sm:p-6 rounded-lg shadow-md border border-gray-200 dark:border-gray-700">
-            {/* Operation Status */}
+          {/* Status banners */}
+          <div className="flex flex-col gap-3 mt-4 items-center">
             {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 className="p-3 rounded-lg bg-blue-100 dark:bg-blue-900/50 text-blue-800 dark:text-blue-200 border border-blue-200 dark:border-blue-800 flex items-center gap-2 justify-center">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  className="h-5 w-5 animate-spin"
+                  viewBox="0 0 20 20"
+                  fill="currentColor"
+                >
+                  <path
+                    fillRule="evenodd"
+                    d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z"
+                    clipRule="evenodd"
+                  />
+                </svg>
+                <span>{operation}</span>
               </div>
             )}
+            {message && (
+              <div
+                className={`p-3 rounded-lg ${
+                  message.includes("added")
+                    ? "bg-green-100 dark:bg-green-900/50 text-green-800 dark:text-green-200 border border-green-200 dark:border-green-800"
+                    : message.includes("removed") || message.includes("Front element")
+                    ? "bg-yellow-100 dark:bg-yellow-900/50 text-yellow-800 dark:text-yellow-200 border border-yellow-200 dark:border-yellow-800"
+                    : "bg-gray-100 dark:bg-neutral-900 text-gray-800 dark:text-gray-200 border border-gray-200 dark:border-gray-600"
+                } flex items-center gap-2 justify-center`}
+              >
+                <span>{message}</span>
+              </div>
+            )}
+          </div>
+        </div>
 
-            {/* Message Display */}
-            <div
-              className={`mb-6 p-3 rounded-lg ${
-                message.includes('added')
-                  ? 'bg-green-100 dark:bg-green-900'
-                  : message.includes('removed')
-                  ? 'bg-red-100 dark:bg-red-900'
-                  : message.includes('full')
-                  ? 'bg-blue-100 dark:bg-blue-900'
-                  : isEmptyStatus
-                  ? 'bg-purple-100 dark:bg-purple-900'
-                  : 'bg-gray-100 dark:bg-gray-700'
-              }`}
-            >
-              {message}
-            </div>
-
-            {/* Horizontal Queue - Left (Front) to Right (Rear) */}
-            <div className="flex flex-col">
-              <div className="flex justify-between mb-2">
-                <span className="text-sm text-green-600 dark:text-green-400 font-medium">
-                  Front
-                </span>
-                <span className="text-sm text-orange-600 dark:text-orange-400 font-medium">
-                  Rear
-                </span>
+        {/* ----- Visualisation card (hidden when empty) ----- */}
+        {queue.length > 0 && (
+          <div className="bg-white dark:bg-neutral-950 p-6 rounded-xl shadow-lg border border-gray-200 dark:border-gray-700">
+            <h2 className="text-2xl font-semibold mb-6 text-center">Queue Visualisation</h2>
+
+            <div className="flex items-center gap-3 w-full justify-center">
+              {/* Front pointer */}
+              <div className="text-blue-600 dark:text-blue-400 font-medium flex flex-col items-center">
+                <span>Front</span>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  className="h-5 w-5"
+                  viewBox="0 0 20 20"
+                  fill="currentColor"
+                >
+                  <path
+                    fillRule="evenodd"
+                    d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+                    clipRule="evenodd"
+                  />
+                </svg>
               </div>
 
-              {/* Queue elements */}
-              <div className="min-h-[120px]">
-                {queue.length === 0 ? (
+              {/* Elements */}
+              <div className="flex items-center gap-4">
+                {queue.map((item, index) => (
                   <div
-                    className={`text-center py-8 border-2 rounded-lg ${
-                      isEmptyStatus
-                        ? 'border-gray-300 bg-gray-50 dark:border-gray-700 dark:bg-gray-900/30'
-                        : 'border-dashed border-gray-300 dark:border-gray-600'
+                    key={index}
+                    className={`transition-all duration-300 ${
+                      index === 0 && operation?.includes("Dequeuing")
+                        ? "animate-pulse scale-110"
+                        : index === queue.length - 1 && operation?.includes("Enqueuing")
+                        ? "animate-bounce"
+                        : ""
                     }`}
                   >
-                    <span
-                      className={`${isEmptyStatus ? 'text-gray-600 dark:text-gray-400' : 'text-gray-500'}`}
+                    <div
+                      className={`w-24 h-24 rounded-lg shadow-md flex items-center justify-center text-lg font-medium border-2 ${
+                        index === 0
+                          ? "border-blue-300 dark:border-blue-700"
+                          : index === queue.length - 1
+                          ? "border-green-300 dark:border-green-700"
+                          : "border-gray-200 dark:border-gray-600"
+                      } bg-white dark:bg-neutral-900`}
                     >
-                      {isEmptyStatus ? 'Queue is empty!' : 'Queue is empty'}
-                    </span>
+                      {item}
+                    </div>
                   </div>
-                ) : (
-                  <div className="flex gap-2 overflow-x-auto pb-4">
-                    {Array.from({ length: MAX_SIZE }).map((_, index) => {
-                      const item = queue[index];
-                      return (
-                        <div key={index} className="flex flex-col items-center transition-all duration-300">
-                          <div
-                            className={`w-16 sm:w-20 p-3 rounded-lg border-2 text-center font-medium ${
-                              index < queue.length
-                                ? index === 0
-                                  ? 'bg-green-500 text-white border-green-600'
-                                  : index === queue.length - 1
-                                  ? 'bg-orange-500 text-white border-orange-600'
-                                  : 'bg-gray-200 dark:bg-gray-700 border-gray-300 dark:border-gray-600'
-                                : highlightFull && index === queue.length
-                                ? 'bg-blue-500 text-white border-blue-600 animate-pulse'
-                                : 'bg-gray-100 dark:bg-gray-800 border-gray-200 dark:border-gray-700 text-gray-400'
-                            } ${
-                              highlightFull && index >= queue.length
-                                ? 'animate-pulse border-blue-500 bg-blue-100 dark:bg-blue-900/50'
-                                : ''
-                            }`}
-                          >
-                            {item || (
-                              <span className="text-gray-400 dark:text-gray-500 text-xs">
-                                {index === queue.length ? 'Next' : 'Empty'}
-                              </span>
-                            )}
-                          </div>
-                        </div>
-                      );
-                    })}
-                  </div>
-                )}
+                ))}
+              </div>
+
+              {/* Rear pointer */}
+              <div className="text-green-600 dark:text-green-400 font-medium flex flex-col items-center">
+                <span>Rear</span>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  className="h-5 w-5"
+                  viewBox="0 0 20 20"
+                  fill="currentColor"
+                >
+                  <path
+                    fillRule="evenodd"
+                    d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+                    clipRule="evenodd"
+                  />
+                </svg>
               </div>
             </div>
           </div>
-        </div>
-
-        <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 Front", url: "./peek-front" },
-            { text: "Enqueue & Dequeue", url: "./enqueue-dequeue" },
-            { text: "Is Empty", url: "./isempty" },
-          ]}
-        />
-      </main>
-      <div className="bg-gray-700 z-10 h-[1px]"></div>
-      <BackToTop />
-      <Footer />
-    </div>
+        )}
+      </div>
+    </main>
   );
 };
 
diff --git a/app/visualizer/queue/operations/isfull/codeBlock.jsx b/app/visualizer/queue/operations/isfull/codeBlock.jsx
index 8ba8ee3..e11b578 100755
--- a/app/visualizer/queue/operations/isfull/codeBlock.jsx
+++ b/app/visualizer/queue/operations/isfull/codeBlock.jsx
@@ -126,14 +126,14 @@ public:
            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">
-                 Queue Implementation (IsFull)
+                 Queue IsFull Operation
                </h3>
              </div>
    
diff --git a/app/visualizer/queue/operations/isfull/content.jsx b/app/visualizer/queue/operations/isfull/content.jsx
index 9f4f568..0a46afe 100755
--- a/app/visualizer/queue/operations/isfull/content.jsx
+++ b/app/visualizer/queue/operations/isfull/content.jsx
@@ -1,72 +1,117 @@
+"use client";
+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 paragraphs = [
     `The isFull operation checks whether a queue has reached its maximum capacity in fixed-size implementations. It returns true if no more elements can be added (queue is full) and false if space remains. This operation is crucial for preventing overflow in array-based queue implementations.`,
     `The isFull operation is critical for robust queue implementations in fixed-capacity scenarios, ensuring data integrity by preventing buffer overflow conditions in system programming and embedded applications.`,
   ];
 
   const example = [
-    { points : "Full Queue: [10, 20, 30]", 
-      subpoints : [
-        "isFull() → returns true",
-      ],
+    {
+      points: "Full Queue: [10, 20, 30]",
+      subpoints: ["isFull() → returns true"],
     },
-    { points : "Non-full Queue: [10, 20]", 
-      subpoints : [
-        "isFull() → returns false",
-      ],
+    {
+      points: "Non-full Queue: [10, 20]",
+      subpoints: ["isFull() → returns false"],
     },
   ];
 
   const implementation = [
-    { points : "Linear Array Implementation:",
-      subpoints : [
+    {
+      points: "Linear Array Implementation:",
+      subpoints: [
         "Check if rear == capacity - 1",
         "Simple but wastes space when front ≠ 0",
       ],
-     },
-    { points : "Circular Array Implementation:",
-      subpoints : [
+    },
+    {
+      points: "Circular Array Implementation:",
+      subpoints: [
         "Check if (rear + 1) % capacity == front",
         "More space-efficient",
       ],
-     },
-    { points : "Size Counter Approach:",
-      subpoints : [
-        "Maintain a size variable",
-        "Check if size == capacity",
-      ],
-     },
+    },
+    {
+      points: "Size Counter Approach:",
+      subpoints: ["Maintain a size variable", "Check if size == capacity"],
+    },
   ];
 
   const steps = [
-    { points : "Calculate next rear position: (rear + 1) % capacity" },
-    { points : "Compare with front position" },
-    { points : "If equal, return true (queue is full)" },
-    { points : "Else return false (space available)" },
+    { points: "Calculate next rear position: (rear + 1) % capacity" },
+    { points: "Compare with front position" },
+    { points: "If equal, return true (queue is full)" },
+    { points: "Else return false (space available)" },
   ];
 
   const complexity = [
-    { points : "It only requires simple pointer arithmetic and comparison" },
-    { points : "No iteration through elements is needed" },
-    { points : "Performance is independent of queue size" },
+    { points: "It only requires simple pointer arithmetic and comparison" },
+    { points: "No iteration through elements is needed" },
+    { points: "Performance is independent of queue size" },
   ];
 
   const usage = [
-    { points : "Bounded buffer problems" },
-    { points : "Producer-consumer scenarios" },
-    { points : "Memory-constrained systems" },
-    { points : "Before enqueue operations to prevent overflow" },
+    { points: "Bounded buffer problems" },
+    { points: "Producer-consumer scenarios" },
+    { points: "Memory-constrained systems" },
+    { points: "Before enqueue operations to prevent overflow" },
   ];
 
-  const cases = [
-    { points : "Dynamic Queues: Always return false (no capacity limit)" },
-    { points : "Empty Full Queue: Possible when capacity = 0" },
-    { points : "Edge Cases: When front = 0 and rear = capacity - 1" },
-  ];
-    
   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">
         {/* What is the isFull Operation? */}
         <section className="p-6 border-b border-gray-100 dark:border-gray-700">
           <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
@@ -230,30 +275,10 @@ const content = () => {
           </div>
         </section>
 
-        {/* Special 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>
-            Special 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">
-              {cases.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">
+            <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>
@@ -261,8 +286,37 @@ const content = () => {
           </div>
         </section>
       </article>
+
+      {/* Mobile iframe at bottom */}
+      <div className="block md:hidden w-full">
+        {mounted && (
+          <iframe
+            key={theme}
+            src={
+              theme === "dark"
+                ? "https://hw.glich.co/resources/embed/daily/dsa?theme=dark"
+                : "https://hw.glich.co/resources/embed/daily/dsa?theme=light"
+            }
+            width="100%"
+            height="320"
+            title="Daily DSA Challenge"
+          ></iframe>
+        )}
+        <div className="flex justify-center pb-8">
+          <span className="text-xs">
+            Daily DSA Challenge by{" "}
+            <a
+              href="https://hw.glich.co/resources/daily"
+              target="_blank"
+              className="underline hover:text-blue-500 duration-300"
+            >
+              Hello World
+            </a>
+          </span>
+        </div>
+      </div>
     </main>
   );
-  };
-  
-  export default content;
\ No newline at end of file
+};
+
+export default content;
diff --git a/app/visualizer/queue/operations/isfull/page.jsx b/app/visualizer/queue/operations/isfull/page.jsx
index 288383a..2b0d03d 100755
--- a/app/visualizer/queue/operations/isfull/page.jsx
+++ b/app/visualizer/queue/operations/isfull/page.jsx
@@ -1,31 +1,118 @@
 import Animation from "@/app/visualizer/queue/operations/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/queue/operations/isfull/content";
+import Quiz from '@/app/visualizer/queue/operations/isfull/quiz';
+import Code from "@/app/visualizer/queue/operations/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 BackToTop from '@/app/components/ui/backtotop';
 
 export const metadata = {
-    title: 'Queue Is Full Operation | Learn with JS, C, Python, Java Code',
-    description: 'Understand how to check if a Queue is full using interactive visualizations and detailed code examples in JavaScript, C, Python, and Java. Perfect for mastering DSA and technical interviews.',
-    keywords: [
-      'Queue Is Full',
-      'Is Full Operation Queue',
-      'Queue Full Condition',
-      'Queue Capacity Check',
-      'Queue Code in JavaScript',
-      'Queue Code in C',
-      'Queue Code in Python',
-      'Queue Code in Java',
-      'Queue DSA',
-      'Learn Queue Operations',
-      'Queue Data Structure',
-      'Visualize Queue',
+  title: "Queue Is Full Operation | Learn with JS, C, Python, Java Code",
+  description:
+    "Understand how to check if a Queue is full using interactive visualizations and detailed code examples in JavaScript, C, Python, and Java. Perfect for mastering DSA and technical interviews.",
+  keywords: [
+    "Queue Is Full",
+    "Is Full Operation Queue",
+    "Queue Full Condition",
+    "Queue Capacity Check",
+    "Queue Code in JavaScript",
+    "Queue Code in C",
+    "Queue Code in Python",
+    "Queue Code in Java",
+    "Queue DSA",
+    "Learn Queue Operations",
+    "Queue Data Structure",
+    "Visualize Queue",
+  ],
+  robots: "index, follow",
+  openGraph: {
+    images: [
+      {
+        url: "/og/queue/isFull.png",
+        width: 1200,
+        height: 630,
+        alt: "isFull Algorithm Visualization",
+      },
     ],
-    robots: 'index, follow',
-  };
-
-export default function page(){
-    return(
-      <>
-        <Navbar/>
-        <Animation/>
-      </>
-    );
-};
\ No newline at end of file
+  },
+};
+
+export default function page() {
+  const paths = [
+    { name: "Home", href: "/" },
+    { name: "Visualizer", href: "/visualizer" },
+    { name: "Queue : IsFull", href: "" },
+  ];
+
+  return (
+    <>
+      <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">
+                Queue
+              </p>
+            </div>
+            <h1 className="text-4xl md:text-4xl font-bold text-center text-gray-900 dark:text-white mb-0">
+              IsFull
+            </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">
+          <Animation />
+        </section>
+
+        <section className="px-6">
+          <p className="text-lg text-center text-gray-600 dark:text-gray-400 mb-8">
+            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.queueIsFull}
+                    title="Queue : IsFull"
+                    description="Mark queue : isFull as done and view it on your dashboard"
+                    initialDone={false}
+                  />
+                </section>
+
+                <section className="px-6">
+                  <ExploreOther
+          title="Explore Other Operations"
+          links={[
+            { text: "Peek Front", url: "./peek-front" },
+            { text: "Enqueue & Dequeue", url: "./enqueue-dequeue" },
+            { text: "Is Empty", url: "./isempty" },
+          ]}
+        />
+                </section>
+      </div>
+
+      <BackToTop />
+      <Footer />
+    </>
+  );
+}
diff --git a/app/visualizer/queue/operations/isfull/quiz.jsx b/app/visualizer/queue/operations/isfull/quiz.jsx
index c48a37d..867e46c 100755
--- a/app/visualizer/queue/operations/isfull/quiz.jsx
+++ b/app/visualizer/queue/operations/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';
@@ -5,62 +6,51 @@ import { motion, AnimatePresence } from 'framer-motion';
 const QueueQuiz = () => {
   const questions = [
     {
-      question: "What does the peek front operation do in a queue?",
+      question: "What does the isFull operation determine in a queue?",
       options: [
-        "Removes the front element",
-        "Adds an element to the front",
-        "Retrieves the front element without removing it",
-        "Priority-Based"
+        "Whether the queue contains any elements",
+        "Whether the queue has reached its maximum capacity",
+        "The position of the front element",
+        "The time complexity of other operations"
       ],
-      correctAnswer: 2,
-      explanation: "Peek retrieves the front element but doesn’t remove it."
+      correctAnswer: 1,
+      explanation: "isFull checks if the queue has reached its maximum capacity in fixed-size implementations."
     },
     {
-      question: "What is the main difference between peekFront() and dequeue()?",
+      question: "In which type of queue implementation is isFull most commonly needed?",
       options: [
-        "peekFront() removes the element, dequeue() does not",
-        "dequeue() accesses the rear",
-        "peekFront() leaves the queue unchanged",
-        "They are the same"
+        "Linked list-based queues",
+        "Dynamic arrays",
+        "Array-based queues with fixed capacity",
+        "All queue implementations"
       ],
       correctAnswer: 2,
-      explanation: "peekFront() retrieves without removal; dequeue() removes the front element."
-    },
-    {
-      question: "What will the queue look like after calling peekFront() on [A, B, C, D]",
-      options: ["[B, C, D]", "[A, B, C]", "[A, B, C, D]", "[D, C, B, A]"],
-      correctAnswer: 2,
-      explanation: "peekFront() does not modify the queue."
+      explanation: "isFull is crucial for array-based queues with fixed capacity to prevent overflow."
     },
     {
-      question: "What is the time complexity of the peek operation?",
-      options: [
-        "O(1)",
-        "O(log n)",
-        "O(n)",
-        "O(n²)"
-      ],
-      correctAnswer: 0,
-      explanation: "Direct access makes it constant time."
+      question: "What is the time complexity of the isFull operation?",
+      options: ["O(n)", "O(1)", "O(log n)", "O(n²)"],
+      correctAnswer: 1,
+      explanation: "isFull runs in O(1) constant time as it only requires simple pointer comparisons."
     },
     {
-      question: "In an array-based queue, how is peekFront() typically implemented?",
+      question: "In a circular array implementation, when is the queue considered full?",
       options: [
-        "Return array[0]",
-        "Return array[front]",
-        "Return array[rear]",
-        "Remove array[front]"
+        "When front == 0",
+        "When rear == capacity - 1",
+        "When (rear + 1) % capacity == front",
+        "When front == rear"
       ],
-      correctAnswer: 1,
-      explanation: "The front index gives the first element."
+      correctAnswer: 2,
+      explanation: "In circular arrays, the queue is full when the next position after rear equals front."
     },
     {
-      question: "Which operation retrieves the front element without removing it?",
-      options: ["Enqueue", "Dequeue", "Peek", "Search"],
-      correctAnswer: 2,
-      explanation: "Peek (or front) examines the front element without modification."
+      question: "What would isFull() return for a queue with capacity 3 containing [10, 20, 30]?",
+      options: ["true", "false", "null", "Error"],
+      correctAnswer: 0,
+      explanation: "The queue has reached its maximum capacity of 3 elements, so isFull returns true."
     }
-];
+  ];
 
   const [currentQuestion, setCurrentQuestion] = useState(0);
   const [selectedAnswer, setSelectedAnswer] = useState(null);
@@ -68,13 +58,10 @@ const QueueQuiz = () => {
   const [showResult, setShowResult] = useState(false);
   const [quizCompleted, setQuizCompleted] = useState(false);
   const [answers, setAnswers] = useState(Array(questions.length).fill(null));
-  const [showExplanation, setShowExplanation] = useState(false);
   const [showIntro, setShowIntro] = useState(true);
   const [showSuccessAnimation, setShowSuccessAnimation] = useState(false);
-  const [penaltyApplied, setPenaltyApplied] = useState(false);
 
   const handleAnswerSelect = (optionIndex) => {
-    if (selectedAnswer !== null) return;
     setSelectedAnswer(optionIndex);
     const newAnswers = [...answers];
     newAnswers[currentQuestion] = optionIndex;
@@ -84,18 +71,9 @@ const QueueQuiz = () => {
   const handleNextQuestion = () => {
     if (selectedAnswer === null) return;
     
-    if (showExplanation && !penaltyApplied) {
-      setScore(prevScore => Math.max(0, prevScore - 0.5));
-      setPenaltyApplied(true);
-    }
-
     if (selectedAnswer === questions[currentQuestion].correctAnswer) {
       setScore(score + 1);
     }
-    
-    setShowExplanation(false);
-    setPenaltyApplied(false);
-    
     if (currentQuestion < questions.length - 1) {
       setCurrentQuestion(currentQuestion + 1);
       setSelectedAnswer(null);
@@ -110,7 +88,6 @@ const QueueQuiz = () => {
   };
 
   const handlePreviousQuestion = () => {
-    setShowExplanation(false);
     setCurrentQuestion(currentQuestion - 1);
     setSelectedAnswer(answers[currentQuestion - 1]);
   };
@@ -122,38 +99,30 @@ const QueueQuiz = () => {
     setShowResult(false);
     setQuizCompleted(false);
     setAnswers(Array(questions.length).fill(null));
-    setShowExplanation(false);
     setShowIntro(true);
-    setPenaltyApplied(false);
   };
 
   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 operation");
     }
     if (answers[1] !== questions[1].correctAnswer) {
-      weakAreas.push("time complexity analysis");
+      weakAreas.push("identifying when isFull is needed");
     }
     if (answers[2] !== questions[2].correctAnswer) {
-      weakAreas.push("counting swaps in Selection Sort");
+      weakAreas.push("time complexity analysis");
     }
     if (answers[3] !== questions[3].correctAnswer) {
-      weakAreas.push("comparison with other simple sorts");
+      weakAreas.push("circular array implementation details");
     }
     if (answers[4] !== questions[4].correctAnswer) {
-      weakAreas.push("space complexity");
-    }
-    if (answers[5] !== questions[5].correctAnswer) {
-      weakAreas.push("stability characteristics");
-    }
-    if (answers[6] !== questions[6].correctAnswer) {
-      weakAreas.push("practical applications");
+      weakAreas.push("practical application of isFull");
     }
     
     return weakAreas.length > 0 
       ? `Focus on improving: ${weakAreas.join(', ')}. Review the corresponding sections above.`
-      : "Perfect! You've mastered all Selection Sort concepts!";
+      : "Perfect! You've mastered all Queue isFull operation concepts!";
   };
 
   const startQuiz = () => {
@@ -170,22 +139,22 @@ const QueueQuiz = () => {
   };
 
   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
+        <motion.div 
           initial={{ opacity: 0, y: 20 }}
           animate={{ opacity: 1, y: 0 }}
           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">
-            Queue Quiz Challenge
+            Queue isFull Operation Quiz
           </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>
@@ -220,14 +189,14 @@ const QueueQuiz = () => {
           <motion.div
             initial={{ scale: 0 }}
             animate={{ scale: 1 }}
-            transition={{ type: "spring", stiffness: 500, damping: 15 }}
+            transition={{ type: 'spring', stiffness: 500, damping: 15 }}
             className="mb-4"
           >
             <div className="relative">
               <div className="w-24 h-24 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center">
                 <FaCheck className="text-4xl text-green-500 animate-bounce" />
               </div>
-              <motion.div
+              <motion.div 
                 initial={{ scale: 0.5, opacity: 0 }}
                 animate={{ scale: 1.5, opacity: 0 }}
                 transition={{ duration: 1.5, repeat: Infinity }}
@@ -235,7 +204,7 @@ const QueueQuiz = () => {
               />
             </div>
           </motion.div>
-          <motion.p
+          <motion.p 
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}
             className="text-xl font-semibold text-gray-700 dark:text-gray-200"
@@ -255,15 +224,13 @@ const QueueQuiz = () => {
               </span>
             </div>
             <div className="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
-              <div
-                className="bg-gradient-to-r from-blue-500 to-purple-500 h-2.5 rounded-full transition-all duration-500"
-                style={{
-                  width: `${((currentQuestion + 1) / questions.length) * 100}%`,
-                }}
+              <div 
+                className="bg-gradient-to-r from-blue-500 to-purple-500 h-2.5 rounded-full transition-all duration-500" 
+                style={{ width: `${((currentQuestion + 1) / questions.length) * 100}%` }}
               />
             </div>
           </div>
-
+          
           <motion.div
             key={currentQuestion}
             initial={{ opacity: 0, x: 20 }}
@@ -273,28 +240,26 @@ const QueueQuiz = () => {
             <h3 className="text-xl font-semibold mb-6 dark:text-white p-4">
               {questions[currentQuestion].question}
             </h3>
-
+            
             <div className="space-y-3 mb-6">
               {questions[currentQuestion].options.map((option, index) => (
-                <motion.div
+                <motion.div 
                   key={index}
                   whileHover={{ scale: 1.02 }}
                   whileTap={{ scale: 0.98 }}
                   className={`p-4 border rounded-lg cursor-pointer transition-all ${
                     selectedAnswer === index
-                      ? "border-blue-500 bg-blue-50 dark:bg-blue-900/20 shadow-md"
-                      : "border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700"
+                      ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20 shadow-md'
+                      : 'border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700'
                   }`}
                   onClick={() => handleAnswerSelect(index)}
                 >
                   <div className="flex items-center">
-                    <span
-                      className={`font-medium mr-3 w-6 h-6 flex items-center justify-center rounded-full ${
-                        selectedAnswer === index
-                          ? "bg-blue-500 text-white"
-                          : "bg-gray-200 dark:bg-gray-600"
-                      }`}
-                    >
+                    <span className={`font-medium mr-3 w-6 h-6 flex items-center justify-center rounded-full ${
+                      selectedAnswer === index 
+                        ? 'bg-blue-500 text-white' 
+                        : 'bg-gray-200 dark:bg-gray-600'
+                    }`}>
                       {String.fromCharCode(65 + index)}
                     </span>
                     <span>{option}</span>
@@ -302,32 +267,9 @@ const QueueQuiz = () => {
                 </motion.div>
               ))}
             </div>
-
-            {selectedAnswer !== null && (
-              <div className="mb-6">
-                <button
-                  onClick={() => setShowExplanation(!showExplanation)}
-                  className="text-sm flex items-center text-blue-600 dark:text-blue-400 hover:underline mb-2"
-                >
-                  <FaInfoCircle className="mr-1" />
-                  {showExplanation ? "Hide Explanation" : "Show Explanation"}
-                </button>
-                <AnimatePresence>
-                  {showExplanation && (
-                    <motion.div
-                      initial={{ opacity: 0, height: 0 }}
-                      animate={{ opacity: 1, height: "auto" }}
-                      exit={{ opacity: 0, height: 0 }}
-                      className="p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg text-sm overflow-hidden"
-                    >
-                      {questions[currentQuestion].explanation}
-                    </motion.div>
-                  )}
-                </AnimatePresence>
-              </div>
-            )}
+            
           </motion.div>
-
+          
           <div className="flex justify-between">
             <button
               onClick={handlePreviousQuestion}
@@ -336,14 +278,13 @@ const QueueQuiz = () => {
             >
               <FaArrowLeft className="mr-2" /> Previous
             </button>
-
+            
             <button
               onClick={handleNextQuestion}
               disabled={selectedAnswer === null}
               className="px-4 py-2 bg-blue-600 text-white rounded-lg disabled:opacity-50 hover:from-blue-600 hover:to-purple-600 transition-all flex items-center shadow-md hover:shadow-lg"
             >
-              {currentQuestion === questions.length - 1 ? "Finish" : "Next"}{" "}
-              <FaArrowRight className="ml-2" />
+              {currentQuestion === questions.length - 1 ? 'Finish' : 'Next'} <FaArrowRight className="ml-2" />
             </button>
           </div>
         </div>
@@ -362,84 +303,62 @@ const QueueQuiz = () => {
               </div>
               <div className="absolute -bottom-2 left-0 right-0 flex justify-center">
                 {[...Array(5)].map((_, i) => (
-                  <FaStar
+                  <FaStar 
                     key={i}
                     className={`text-2xl mx-1 ${
-                      i < getStarRating()
-                        ? "text-yellow-400 fill-current"
-                        : "text-gray-300 dark:text-gray-600 fill-current"
+                      i < getStarRating() 
+                        ? 'text-yellow-400 fill-current' 
+                        : 'text-gray-300 dark:text-gray-600 fill-current'
                     }`}
                   />
                 ))}
               </div>
             </div>
-
+            
             <h3 className="text-2xl font-bold mb-2 dark:text-white">
-              {score === questions.length
-                ? "Perfect Score!"
-                : score >= questions.length * 0.8
-                ? "Excellent Work!"
-                : score >= questions.length * 0.6
-                ? "Good Job!"
-                : score >= questions.length * 0.4
-                ? "Keep Practicing!"
-                : "Let's Review Again!"}
+              {score === questions.length ? "Perfect Score!" :
+               score >= questions.length * 0.8 ? "Excellent Work!" :
+               score >= questions.length * 0.6 ? "Good Job!" :
+               score >= questions.length * 0.4 ? "Keep Practicing!" : "Let's Review Again!"}
             </h3>
             <p className="text-gray-600 dark:text-gray-400 mb-6">
-              You scored {((score / questions.length) * 100).toFixed(0)}%
-              correct
+              You scored {((score / questions.length) * 100).toFixed(0)}% correct
             </p>
           </div>
-
+          
           <div className="bg-white dark:bg-gray-700 p-4 rounded-lg mb-6 shadow-inner">
             <h4 className="font-bold mb-3 flex items-center text-blue-600 dark:text-blue-400">
               <FaInfoCircle className="mr-2" /> Performance Analysis
             </h4>
             <p className="text-sm">{calculateWeakAreas()}</p>
           </div>
-
+          
           <div className="space-y-4 mb-8">
-            <h4 className="font-bold text-gray-700 dark:text-gray-300">
-              Question Breakdown:
-            </h4>
+            <h4 className="font-bold text-gray-700 dark:text-gray-300">Question Breakdown:</h4>
             {questions.map((q, index) => (
-              <div
-                key={index}
-                className="border-b pb-3 border-gray-200 dark:border-gray-700 last:border-0"
-              >
-                <p className="font-medium text-gray-800 dark:text-gray-200">
-                  {q.question}
-                </p>
-                <div
-                  className={`flex items-start mt-1 ${
-                    answers[index] === q.correctAnswer
-                      ? "text-green-600 dark:text-green-400"
-                      : "text-red-600 dark:text-red-400"
-                  }`}
-                >
+              <div key={index} className="border-b pb-3 border-gray-200 dark:border-gray-700 last:border-0">
+                <p className="font-medium text-gray-800 dark:text-gray-200">{q.question}</p>
+                <div className={`flex items-start mt-1 ${
+                  answers[index] === q.correctAnswer 
+                    ? 'text-green-600 dark:text-green-400' 
+                    : 'text-red-600 dark:text-red-400'
+                }`}>
                   {answers[index] === q.correctAnswer ? (
                     <FaCheck className="mt-1 mr-2 flex-shrink-0" />
                   ) : (
                     <FaTimes className="mt-1 mr-2 flex-shrink-0" />
                   )}
                   <div>
-                    <p className="text-sm">
-                      Your answer:{" "}
-                      {answers[index] !== null
-                        ? q.options[answers[index]]
-                        : "Not answered"}
-                    </p>
+                    <p className="text-sm">Your answer: {answers[index] !== null ? q.options[answers[index]] : "Not answered"}</p>
                     {answers[index] !== q.correctAnswer && (
-                      <p className="text-sm">
-                        Correct answer: {q.options[q.correctAnswer]}
-                      </p>
+                      <p className="text-sm">Correct answer: {q.options[q.correctAnswer]}</p>
                     )}
                   </div>
                 </div>
               </div>
             ))}
           </div>
-
+          
           <button
             onClick={resetQuiz}
             className="w-full px-6 py-3 bg-blue-600 text-white rounded-lg hover:from-blue-700 hover:to-purple-600 transition-all shadow-md hover:shadow-lg flex items-center justify-center"
diff --git a/app/visualizer/queue/operations/peek-front/content.jsx b/app/visualizer/queue/operations/peek-front/content.jsx
index 0a276c9..a3d64f9 100755
--- a/app/visualizer/queue/operations/peek-front/content.jsx
+++ b/app/visualizer/queue/operations/peek-front/content.jsx
@@ -2,24 +2,24 @@
 import { useEffect, useState } from "react";
 
 const content = () => {
-  const [theme, setTheme] = useState('light');
+  const [theme, setTheme] = useState("light");
   const [mounted, setMounted] = useState(false);
 
   useEffect(() => {
     const updateTheme = () => {
-      const savedTheme = localStorage.getItem('theme') || 'light';
+      const savedTheme = localStorage.getItem("theme") || "light";
       setTheme(savedTheme);
     };
 
     updateTheme();
     setMounted(true);
 
-    window.addEventListener('storage', updateTheme);
-    window.addEventListener('themeChange', updateTheme);
+    window.addEventListener("storage", updateTheme);
+    window.addEventListener("themeChange", updateTheme);
 
     return () => {
-      window.removeEventListener('storage', updateTheme);
-      window.removeEventListener('themeChange', updateTheme);
+      window.removeEventListener("storage", updateTheme);
+      window.removeEventListener("themeChange", updateTheme);
     };
   }, []);
 
@@ -29,53 +29,45 @@ const content = () => {
   ];
 
   const example = [
-    { points : "Current Queue: [A, B, C, D]" },
-    { points : "peekFront(): Returns 'A'" },
-    { points : "Queue After Peek: [A, B, C, D] (unchanged)" },
+    { points: "Current Queue: [A, B, C, D]" },
+    { points: "peekFront(): Returns 'A'" },
+    { points: "Queue After Peek: [A, B, C, D] (unchanged)" },
   ];
 
   const implementation = [
-    { points : "Array-based Queue:",
-      subpoints : [
-        "Return array[front]",
-        "Check for empty queue first",
-      ],
+    {
+      points: "Array-based Queue:",
+      subpoints: ["Return array[front]", "Check for empty queue first"],
     },
-    { points : "Linked List Queue:",
-      subpoints : [
-        "Return head.data",
-      ],
-    },
-    { points : "Circular Buffer:",
-      subpoints : [
-        "Return buffer[front]",
-        "Handle wrap-around cases",
-      ],
+    { points: "Linked List Queue:", subpoints: ["Return head.data"] },
+    {
+      points: "Circular Buffer:",
+      subpoints: ["Return buffer[front]", "Handle wrap-around cases"],
     },
   ];
 
   const steps = [
-    { points : "Check if queue is empty (use isEmpty())" },
-    { points : "If empty, return error/exception (or null)" },
-    { points : "Access the data at front position" },
-    { points : "Return the data without modifying pointers" },
+    { points: "Check if queue is empty (use isEmpty())" },
+    { points: "If empty, return error/exception (or null)" },
+    { points: "Access the data at front position" },
+    { points: "Return the data without modifying pointers" },
   ];
 
   const complexity = [
-    { points : "Direct access to front element" },
-    { points : "No iteration needed" },
-    { points : "No structural changes to queue" },
+    { points: "Direct access to front element" },
+    { points: "No iteration needed" },
+    { points: "No structural changes to queue" },
   ];
 
   const application = [
-    { points : "Previewing next item before processing" },
-    { points : "Priority checking in priority queues" },
-    { points : "Conditional processing logic" },
-    { points : "Debugging queue contents" },
+    { points: "Previewing next item before processing" },
+    { points: "Priority checking in priority queues" },
+    { points: "Conditional processing logic" },
+    { points: "Debugging queue contents" },
   ];
 
-    return (
-          <main className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-5 md:gap-4">
+  return (
+    <main className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-5 md:gap-4">
       <div className="col-span-1">
         <div className="hidden md:block">
           {mounted && (
@@ -106,150 +98,168 @@ const content = () => {
         </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">
-    {/* What is Peek Front Operation? */}
-    <section className="p-6 border-b border-gray-100 dark:border-gray-700">
-      <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
-        <span className="w-1 h-6 bg-blue-500 mr-3 rounded-full"></span>
-        What is Peek Front Operation?
-      </h1>
-      <div className="prose dark:prose-invert max-w-none">
-        <p className="text-gray-700 dark:text-gray-300 leading-relaxed">
-          {paragraph[0]}
-        </p>
-      </div>
-    </section>
+        {/* What is Peek Front Operation? */}
+        <section className="p-6 border-b border-gray-100 dark:border-gray-700">
+          <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-blue-500 mr-3 rounded-full"></span>
+            What is Peek Front Operation?
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <p className="text-gray-700 dark:text-gray-300 leading-relaxed">
+              {paragraph[0]}
+            </p>
+          </div>
+        </section>
 
-    {/* How Does It Work? */}
-    <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 Does It Work?
-      </h1>
-      <div className="prose dark:prose-invert max-w-none">
-        <p className="text-gray-700 dark:text-gray-300 mb-4 leading-relaxed">
-          Peek returns the front element while keeping the queue unchanged.
-        </p>
-        <p className="text-gray-700 dark:text-gray-300 mb-4 leading-relaxed">
-          Example with queue: [A, B, C, D]
-        </p>
-        
-        <ol className="space-y-2 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-          {example.map((item, index) => (
-            <li key={index} className="text-gray-700 dark:text-gray-300 pl-2">
-              {item.points}
-            </li>
-          ))}
-        </ol>
-        
-        <p className="text-gray-700 dark:text-gray-300 mt-4 leading-relaxed">
-          Contrast with dequeue() which would remove 'A' from the queue.
-        </p>
-      </div>
-    </section>
+        {/* How Does It Work? */}
+        <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 Does It Work?
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <p className="text-gray-700 dark:text-gray-300 mb-4 leading-relaxed">
+              Peek returns the front element while keeping the queue unchanged.
+            </p>
+            <p className="text-gray-700 dark:text-gray-300 mb-4 leading-relaxed">
+              Example with queue: [A, B, C, D]
+            </p>
 
-    {/* Implementation Details */}
-    <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>
-        Implementation Details
-      </h1>
-      <div className="prose dark:prose-invert max-w-none">
-        <p className="text-gray-700 dark:text-gray-300 mb-4 leading-relaxed">
-          Different implementations handle peek similarly:
-        </p>
-        
-        <ol className="space-y-3 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-          {implementation.map((item, index) => (
-            <li key={index} className="text-gray-700 dark:text-gray-300 pl-2">
-              <span className="font-semibold">{item.points}</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>
-          ))}
-        </ol>
-      </div>
-    </section>
+            <ol className="space-y-2 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {example.map((item, index) => (
+                <li
+                  key={index}
+                  className="text-gray-700 dark:text-gray-300 pl-2"
+                >
+                  {item.points}
+                </li>
+              ))}
+            </ol>
 
-    {/* Algorithm 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>
-        Algorithm Steps
-      </h1>
-      <div className="prose dark:prose-invert max-w-none">
-        <p className="text-gray-700 dark:text-gray-300 mb-4 leading-relaxed">
-          Basic peek operation algorithm:
-        </p>
-        <ol className="space-y-2 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-          {steps.map((item, index) => (
-            <li key={index} className="text-gray-700 dark:text-gray-300 pl-2">
-              {item.points}
-            </li>
-          ))}
-        </ol>
-      </div>
-    </section>
+            <p className="text-gray-700 dark:text-gray-300 mt-4 leading-relaxed">
+              Contrast with dequeue() which would remove 'A' from the queue.
+            </p>
+          </div>
+        </section>
 
-    {/* Time Complexity */}
-    <section className="p-6 border-b border-gray-100 dark:border-gray-700">
-      <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
-        <span className="w-1 h-6 bg-blue-500 mr-3 rounded-full"></span>
-        Time Complexity
-      </h1>
-      <div className="prose dark:prose-invert max-w-none">
-        <p className="text-gray-700 dark:text-gray-300 mb-4 leading-relaxed">
-          Peek operation always runs in O(1) constant time because:
-        </p>
-        <ul className="space-y-2 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">
-              {item.points}
-            </li>
-          ))}
-        </ul>
-      </div>
-    </section>
+        {/* Implementation Details */}
+        <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>
+            Implementation Details
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <p className="text-gray-700 dark:text-gray-300 mb-4 leading-relaxed">
+              Different implementations handle peek similarly:
+            </p>
 
-    {/* Practical Applications */}
-    <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 Applications
-      </h1>
-      <div className="prose dark:prose-invert max-w-none">
-        <p className="text-gray-700 dark:text-gray-300 mb-4 leading-relaxed">
-          Common use cases for peek:
-        </p>
-        <ul className="space-y-2 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-          {application.map((item, index) => (
-            <li key={index} className="text-gray-700 dark:text-gray-300 pl-2">
-              {item.points}
-            </li>
-          ))}
-        </ul>
-      </div>
-    </section>
+            <ol className="space-y-3 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {implementation.map((item, index) => (
+                <li
+                  key={index}
+                  className="text-gray-700 dark:text-gray-300 pl-2"
+                >
+                  <span className="font-semibold">{item.points}</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>
+              ))}
+            </ol>
+          </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">
-            {paragraph[1]}
-          </p>
-        </div>
-      </div>
-    </section>
-  </article>
+        {/* Algorithm 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>
+            Algorithm Steps
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <p className="text-gray-700 dark:text-gray-300 mb-4 leading-relaxed">
+              Basic peek operation algorithm:
+            </p>
+            <ol className="space-y-2 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {steps.map((item, index) => (
+                <li
+                  key={index}
+                  className="text-gray-700 dark:text-gray-300 pl-2"
+                >
+                  {item.points}
+                </li>
+              ))}
+            </ol>
+          </div>
+        </section>
+
+        {/* Time Complexity */}
+        <section className="p-6 border-b border-gray-100 dark:border-gray-700">
+          <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-blue-500 mr-3 rounded-full"></span>
+            Time Complexity
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <p className="text-gray-700 dark:text-gray-300 mb-4 leading-relaxed">
+              Peek operation always runs in O(1) constant time because:
+            </p>
+            <ul className="space-y-2 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"
+                >
+                  {item.points}
+                </li>
+              ))}
+            </ul>
+          </div>
+        </section>
 
-  {/* Mobile iframe at bottom */}
+        {/* Practical Applications */}
+        <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 Applications
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <p className="text-gray-700 dark:text-gray-300 mb-4 leading-relaxed">
+              Common use cases for peek:
+            </p>
+            <ul className="space-y-2 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {application.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">
+                {paragraph[1]}
+              </p>
+            </div>
+          </div>
+        </section>
+      </article>
+
+      {/* Mobile iframe at bottom */}
       <div className="block md:hidden w-full">
         {mounted && (
           <iframe
@@ -277,8 +287,8 @@ const content = () => {
           </span>
         </div>
       </div>
-</main>
-    );
-  };
-  
-  export default content;
\ No newline at end of file
+    </main>
+  );
+};
+
+export default content;
diff --git a/app/visualizer/queue/types/deque/animation.jsx b/app/visualizer/queue/types/deque/animation.jsx
index aaa8d01..b5f980f 100755
--- a/app/visualizer/queue/types/deque/animation.jsx
+++ b/app/visualizer/queue/types/deque/animation.jsx
@@ -1,324 +1,297 @@
-'use client';
-import React, { useState } from 'react';
-import Footer from '@/app/components/footer';
-import CodeBlock from '@/app/visualizer/queue/types/deque/codeBlock';
-import Content from '@/app/visualizer/queue/types/deque/content';
-import ExploreOther from '@/app/components/ui/exploreOther';
-import Quiz from '@/app/visualizer/queue/types/deque/quiz';
-import BackToTop from '@/app/components/ui/backtotop';
-import GoBackButton from "@/app/components/ui/goback";
+"use client";
+import React, { useState } from "react";
 
-const DoubleEndedQueueVisualizer = () => {
+const DequeVisualizer = () => {
   const [deque, setDeque] = useState([]);
-  const [inputValue, setInputValue] = useState('');
+  const [inputValue, setInputValue] = useState("");
   const [operation, setOperation] = useState(null);
-  const [message, setMessage] = useState('Deque is empty');
-  const [highlightedIndex, setHighlightedIndex] = useState(null);
+  const [message, setMessage] = useState("Deque is empty");
   const [isAnimating, setIsAnimating] = useState(false);
-  const [operationSide, setOperationSide] = useState(null); // 'front' or 'rear'
 
-  // Enqueue at front
-  const enqueueFront = () => {
+  /* ---------- helpers ---------- */
+  const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
+  const showOp = async (txt, ms = 800) => {
+    setOperation(txt);
+    await sleep(ms);
+    setOperation(null);
+  };
+
+  /* ---------- enqueue front ---------- */
+  const enqueueFront = async () => {
     if (!inputValue.trim()) {
-      setMessage('Please enter a value');
+      setMessage("Please enter a value");
       return;
     }
-
     setIsAnimating(true);
-    setOperation(`Adding "${inputValue}" at front...`);
-    setOperationSide('front');
-    setHighlightedIndex(0);
-
-    setTimeout(() => {
-      setDeque([inputValue, ...deque]);
-      setMessage(`"${inputValue}" added to front`);
-      setInputValue('');
-      setOperation(null);
-      setOperationSide(null);
-      setHighlightedIndex(null);
-      setIsAnimating(false);
-    }, 600);
+    await showOp(`Enqueuing "${inputValue}" at front …`);
+    setDeque((d) => [inputValue, ...d]);
+    setMessage(`"${inputValue}" added to front`);
+    setInputValue("");
+    setIsAnimating(false);
   };
 
-  // Enqueue at rear
-  const enqueueRear = () => {
+  /* ---------- enqueue rear ---------- */
+  const enqueueRear = async () => {
     if (!inputValue.trim()) {
-      setMessage('Please enter a value');
+      setMessage("Please enter a value");
       return;
     }
-
     setIsAnimating(true);
-    setOperation(`Adding "${inputValue}" at rear...`);
-    setOperationSide('rear');
-    setHighlightedIndex(deque.length);
-
-    setTimeout(() => {
-      setDeque([...deque, inputValue]);
-      setMessage(`"${inputValue}" added to rear`);
-      setInputValue('');
-      setOperation(null);
-      setOperationSide(null);
-      setHighlightedIndex(null);
-      setIsAnimating(false);
-    }, 600);
+    await showOp(`Enqueuing "${inputValue}" at rear …`);
+    setDeque((d) => [...d, inputValue]);
+    setMessage(`"${inputValue}" added to rear`);
+    setInputValue("");
+    setIsAnimating(false);
   };
 
-  // Dequeue from front
-  const dequeueFront = () => {
+  /* ---------- dequeue front ---------- */
+  const dequeueFront = async () => {
     if (deque.length === 0) {
-      setMessage('Deque is empty!');
+      setMessage("Deque is empty!");
       return;
     }
-
     setIsAnimating(true);
-    setOperation('Removing from front...');
-    setOperationSide('front');
-    setHighlightedIndex(0);
-
-    setTimeout(() => {
-      const dequeued = deque[0];
-      setDeque(deque.slice(1));
-      setMessage(`"${dequeued}" removed from front`);
-      setOperation(null);
-      setOperationSide(null);
-      setHighlightedIndex(null);
-      setIsAnimating(false);
-    }, 600);
+    const front = deque[0];
+    await showOp(`Dequeuing "${front}" from front …`);
+    setDeque((d) => d.slice(1));
+    setMessage(`"${front}" removed from front`);
+    setIsAnimating(false);
   };
 
-  // Dequeue from rear
-  const dequeueRear = () => {
+  /* ---------- dequeue rear ---------- */
+  const dequeueRear = async () => {
     if (deque.length === 0) {
-      setMessage('Deque is empty!');
+      setMessage("Deque is empty!");
       return;
     }
-
     setIsAnimating(true);
-    setOperation('Removing from rear...');
-    setOperationSide('rear');
-    setHighlightedIndex(deque.length - 1);
-
-    setTimeout(() => {
-      const dequeued = deque[deque.length - 1];
-      setDeque(deque.slice(0, -1));
-      setMessage(`"${dequeued}" removed from rear`);
-      setOperation(null);
-      setOperationSide(null);
-      setHighlightedIndex(null);
-      setIsAnimating(false);
-    }, 600);
+    const rear = deque[deque.length - 1];
+    await showOp(`Dequeuing "${rear}" from rear …`);
+    setDeque((d) => d.slice(0, -1));
+    setMessage(`"${rear}" removed from rear`);
+    setIsAnimating(false);
   };
 
-  // Peek front
-  const peekFront = () => {
+  /* ---------- peek front ---------- */
+  const peekFront = async () => {
     if (deque.length === 0) {
-      setMessage('Deque is empty!');
+      setMessage("Deque is empty!");
       return;
     }
     setIsAnimating(true);
-    setOperationSide('front');
-    setHighlightedIndex(0);
     setMessage(`Front element: "${deque[0]}"`);
-    setTimeout(() => {
-      setHighlightedIndex(null);
-      setOperationSide(null);
-      setIsAnimating(false);
-    }, 1500);
+    await sleep(1500);
+    setIsAnimating(false);
   };
 
-  // Peek rear
-  const peekRear = () => {
+  /* ---------- peek rear ---------- */
+  const peekRear = async () => {
     if (deque.length === 0) {
-      setMessage('Deque is empty!');
+      setMessage("Deque is empty!");
       return;
     }
     setIsAnimating(true);
-    setOperationSide('rear');
-    setHighlightedIndex(deque.length - 1);
     setMessage(`Rear element: "${deque[deque.length - 1]}"`);
-    setTimeout(() => {
-      setHighlightedIndex(null);
-      setOperationSide(null);
-      setIsAnimating(false);
-    }, 1500);
+    await sleep(1500);
+    setIsAnimating(false);
   };
 
-  // Reset deque
+  /* ---------- reset ---------- */
   const reset = () => {
     setDeque([]);
-    setMessage('Deque cleared');
+    setInputValue("");
+    setOperation(null);
+    setMessage("Deque cleared");
   };
 
+  /* ---------- UI ---------- */
   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 className="container mx-auto px-6 pt-4 pb-4">
+      <p className="text-lg text-center text-gray-600 dark:text-gray-400 mb-8">
+        Double-Ended Queue Visualiser
+      </p>
 
-        {/* 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">Double Ended Queue</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 Double Ended Queue (Deque) Operations
-        </p>
-        <div className="max-w-2xl mx-auto">
-          {/* Controls */}
-          <div className="bg-white dark:bg-gray-800 p-4 sm:p-6 rounded-lg shadow-md mb-8 border border-gray-200 dark:border-gray-700">
-            <div className="flex flex-col sm:flex-row gap-2 mb-4">
-              <input
-                type="text"
-                value={inputValue}
-                onChange={(e) => setInputValue(e.target.value)}
-                placeholder="Enter value"
-                className="flex-1 p-2 border rounded dark:bg-gray-700 focus:ring-2 focus:ring-blue-500 transition-all"
-                disabled={isAnimating}
-              />
-              <div className="flex gap-2 w-full sm:w-auto">
-                <button
-                  onClick={enqueueFront}
-                  disabled={isAnimating}
-                  className="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded disabled:opacity-50 transition-transform hover:scale-105 flex-0"
-                >
-                  Add Front
-                </button>
-                <button
-                  onClick={enqueueRear}
-                  disabled={isAnimating}
-                  className="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded disabled:opacity-50 transition-transform hover:scale-105 flex-0"
+      <div className="max-w-4xl mx-auto">
+        {/* ----- Controls card ----- */}
+        <div className="bg-white dark:bg-neutral-950 p-6 rounded-xl shadow-lg border border-gray-200 dark:border-gray-700 mb-8">
+          {/* Value input + dual enqueue buttons */}
+          <div className="flex flex-col sm:flex-row gap-4 mb-4">
+            <input
+              type="text"
+              value={inputValue}
+              onChange={(e) => setInputValue(e.target.value)}
+              placeholder="Enter value"
+              className="flex-1 p-3 border dark:border-gray-700 rounded-lg dark:bg-neutral-900 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
+              disabled={isAnimating}
+              onKeyDown={(e) => e.key === "Enter" && enqueueRear()}
+            />
+            <button
+              onClick={enqueueFront}
+              disabled={isAnimating}
+              className="bg-blue-500 hover:bg-blue-600 text-white px-4 py-3 rounded-lg disabled:opacity-50 transition-all"
+            >
+              Enqueue Front
+            </button>
+            <button
+              onClick={enqueueRear}
+              disabled={isAnimating}
+              className="bg-blue-500 hover:bg-blue-600 text-white px-4 py-3 rounded-lg disabled:opacity-50 transition-all"
+            >
+              Enqueue Rear
+            </button>
+          </div>
+
+          {/* Action buttons */}
+          <div className="grid grid-cols-2 sm:grid-cols-5 gap-2">
+            <button
+              onClick={dequeueFront}
+              disabled={isAnimating || deque.length === 0}
+              className="bg-blue-500 hover:bg-blue-600 text-white px-4 py-3 rounded-lg disabled:opacity-50 transition-all"
+            >
+              Dequeue Front
+            </button>
+            <button
+              onClick={dequeueRear}
+              disabled={isAnimating || deque.length === 0}
+              className="bg-blue-500 hover:bg-blue-600 text-white px-4 py-3 rounded-lg disabled:opacity-50 transition-all"
+            >
+              Dequeue Rear
+            </button>
+            <button
+              onClick={peekFront}
+              disabled={isAnimating || deque.length === 0}
+              className="bg-green-500 text-black px-4 py-3 rounded-lg disabled:opacity-50 transition-all"
+            >
+              Peek Front
+            </button>
+            <button
+              onClick={peekRear}
+              disabled={isAnimating || deque.length === 0}
+              className="bg-green-500 text-black px-4 py-3 rounded-lg disabled:opacity-50 transition-all"
+            >
+              Peek Rear
+            </button>
+            <button
+              onClick={reset}
+              disabled={isAnimating}
+              className="bg-red-500 text-white px-4 py-3 rounded-lg disabled:opacity-50 transition-all"
+            >
+              Reset
+            </button>
+          </div>
+
+          {/* Status banners */}
+          <div className="flex flex-col gap-3 mt-4 items-center">
+            {operation && (
+              <div className="p-3 rounded-lg bg-blue-100 dark:bg-blue-900/50 text-blue-800 dark:text-blue-200 border border-blue-200 dark:border-blue-800 flex items-center gap-2 justify-center">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  className="h-5 w-5 animate-spin"
+                  viewBox="0 0 20 20"
+                  fill="currentColor"
                 >
-                  Add Rear
-                </button>
+                  <path
+                    fillRule="evenodd"
+                    d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z"
+                    clipRule="evenodd"
+                  />
+                </svg>
+                <span>{operation}</span>
               </div>
-            </div>
-            
-            <div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
-              <button
-                onClick={dequeueFront}
-                disabled={isAnimating || deque.length === 0}
-                className="bg-none border border-black dark:border-white text-black dark:text-white disabled:border-blue-600 disabled:dark:border-blue-600 disabled:bg-transparent disabled:text-blue-600 dark:disabled:text-blue-600 px-4 py-2 rounded disabled:opacity-50 transition-transform hover:scale-105"
-              >
-                Remove Front
-              </button>
-              <button
-                onClick={dequeueRear}
-                disabled={isAnimating || deque.length === 0}
-                className="bg-none border border-black dark:border-white text-black dark:text-white disabled:border-blue-600 disabled:dark:border-blue-600 disabled:bg-transparent disabled:text-blue-600 dark:disabled:text-blue-600 px-4 py-2 rounded disabled:opacity-50 transition-transform hover:scale-105"
-              >
-                Remove Rear
-              </button>
-              <button
-                onClick={peekFront}
-                disabled={isAnimating || deque.length === 0}
-                className="bg-none border border-black dark:border-white text-black dark:text-white disabled:border-blue-600 disabled:dark:border-blue-600 disabled:bg-transparent disabled:text-blue-600 dark:disabled:text-blue-600 px-4 py-2 rounded disabled:opacity-50 transition-transform hover:scale-105"
-              >
-                Peek Front
-              </button>
-              <button
-                onClick={peekRear}
-                disabled={isAnimating || deque.length === 0}
-                className="bg-none border border-black dark:border-white text-black dark:text-white disabled:border-blue-600 disabled:dark:border-blue-600 disabled:bg-transparent disabled:text-blue-600 dark:disabled:text-blue-600 px-4 py-2 rounded disabled:opacity-50 transition-transform hover:scale-105"
-              >
-                Peek Rear
-              </button>
-            </div>
-            <div className="mt-2">
-              <button
-                onClick={reset}
-                disabled={isAnimating}
-                className="bg-none border border-black dark:border-white text-black dark:text-white px-4 py-2 w-full rounded transition-transform hover:scale-105"
+            )}
+            {message && (
+              <div
+                className={`p-3 rounded-lg ${
+                  message.includes("added")
+                    ? "bg-green-100 dark:bg-green-900/50 text-green-800 dark:text-green-200 border border-green-200 dark:border-green-800"
+                    : message.includes("removed") || message.includes("element:")
+                    ? "bg-yellow-100 dark:bg-yellow-900/50 text-yellow-800 dark:text-yellow-200 border border-yellow-200 dark:border-yellow-800"
+                    : "bg-gray-100 dark:bg-neutral-900 text-gray-800 dark:text-gray-200 border border-gray-200 dark:border-gray-600"
+                } flex items-center gap-2 justify-center`}
               >
-                Reset
-              </button>
-            </div>
+                <span>{message}</span>
+              </div>
+            )}
           </div>
+        </div>
 
-          {/* 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 animate-pulse">
-              {operation}
-            </div>
-          )}
-
-          {/* Message Display */}
-          {message && (
-            <div className="mb-4 p-3 border border-gray-200 dark:border-gray-700 rounded-lg shadow-md bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200">
-              {message}
-            </div>
-          )}
-
-          {/* Deque Visualization */}
-          <div className="bg-white dark:bg-gray-800 p-4 sm:p-6 rounded-lg shadow-md border border-gray-200 dark:border-gray-700">
-            <div className="flex justify-between mb-2">
-              <span className="text-sm text-blue-600 dark:text-blue-400 font-medium">Front</span>
-              <span className="text-sm text-green-600 dark:text-green-400 font-medium">Rear</span>
-            </div>
+        {/* ----- Visualisation card (hidden when empty) ----- */}
+        {deque.length > 0 && (
+          <div className="bg-white dark:bg-neutral-950 p-6 rounded-xl shadow-lg border border-gray-200 dark:border-gray-700">
+            <h2 className="text-2xl font-semibold mb-6 text-center">Deque Visualisation</h2>
 
-            {deque.length === 0 ? (
-              <div className="text-center py-8 border-2 rounded-lg border-gray-300 bg-gray-50 dark:border-gray-700 dark:bg-gray-900/30">
-                <span className="text-gray-600 dark:text-gray-400">Deque is empty</span>
+            <div className="flex items-center gap-3 w-full justify-center">
+              {/* Front pointer */}
+              <div className="text-blue-600 dark:text-blue-400 font-medium flex flex-col items-center">
+                <span>Front</span>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  className="h-5 w-5"
+                  viewBox="0 0 20 20"
+                  fill="currentColor"
+                >
+                  <path
+                    fillRule="evenodd"
+                    d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+                    clipRule="evenodd"
+                  />
+                </svg>
               </div>
-            ) : (
-              <div className="flex gap-2 overflow-x-auto pb-4">
+
+              {/* Elements */}
+              <div className="flex items-center gap-4">
                 {deque.map((item, index) => (
                   <div
                     key={index}
-                    className={`flex flex-col items-center transition-all duration-300 ${
-                      highlightedIndex === index ? 'transform scale-110' : ''
+                    className={`transition-all duration-300 ${
+                      index === 0 && operation?.includes("Dequeuing") && operation?.includes("front")
+                        ? "animate-pulse scale-110"
+                        : index === deque.length - 1 && operation?.includes("Dequeuing") && operation?.includes("rear")
+                        ? "animate-pulse scale-110"
+                        : index === 0 && operation?.includes("Enqueuing") && operation?.includes("front")
+                        ? "animate-bounce"
+                        : index === deque.length - 1 && operation?.includes("Enqueuing") && operation?.includes("rear")
+                        ? "animate-bounce"
+                        : ""
                     }`}
                   >
-                    <div className={`
-                      w-16 sm:w-20 p-3 rounded-lg border-2 text-center font-medium
-                      ${index === 0 ? 'bg-blue-500 text-white border-blue-600 dark:bg-blue-600 dark:border-blue-700' : ''}
-                      ${index === deque.length - 1 ? 'bg-green-500 text-white border-green-600 dark:bg-green-600 dark:border-green-700' : ''}
-                      ${highlightedIndex === index ? 
-                        operationSide === 'front' ? 'ring-4 ring-blue-400 dark:ring-blue-500' : 
-                        operationSide === 'rear' ? 'ring-4 ring-green-400 dark:ring-green-500' : 
-                        'ring-4 ring-yellow-400 dark:ring-yellow-500' : ''}
-                      ${index > 0 && index < deque.length - 1 ? 'bg-gray-200 dark:bg-gray-700 border-gray-300 dark:border-gray-600' : ''}
-                    `}>
+                    <div
+                      className={`w-24 h-24 rounded-lg shadow-md flex items-center justify-center text-lg font-medium border-2 ${
+                        index === 0
+                          ? "border-blue-300 dark:border-blue-700"
+                          : index === deque.length - 1
+                          ? "border-green-300 dark:border-green-700"
+                          : "border-gray-200 dark:border-gray-600"
+                      } bg-white dark:bg-neutral-900`}
+                    >
                       {item}
                     </div>
-                    {index === 0 && (
-                      <span className="text-xs text-blue-600 dark:text-blue-400 mt-1">Front</span>
-                    )}
-                    {index === deque.length - 1 && (
-                      <span className="text-xs text-green-600 dark:text-green-400 mt-1">Rear</span>
-                    )}
                   </div>
                 ))}
               </div>
-            )}
-          </div>
-        </div>
 
-        <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 Types"
-          links={[
-            { text: "Single Ended Queue", url: "./singleEnded" },
-            { text: "Circular Queue", url: "./circular" },
-            { text: "Multiple Queue", url: "./multiple" },
-            { text: "Priority Queue", url: "./priority" },
-          ]}
-        />
-      </main>
-      <div>
-        <div className="bg-gray-700 z-10 h-[1px]"></div>
+              {/* Rear pointer */}
+              <div className="text-green-600 dark:text-green-400 font-medium flex flex-col items-center">
+                <span>Rear</span>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  className="h-5 w-5"
+                  viewBox="0 0 20 20"
+                  fill="currentColor"
+                >
+                  <path
+                    fillRule="evenodd"
+                    d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+                    clipRule="evenodd"
+                  />
+                </svg>
+              </div>
+            </div>
+          </div>
+        )}
       </div>
-      <BackToTop/>
-      <Footer />
-    </div>
+    </main>
   );
 };
 
-export default DoubleEndedQueueVisualizer;
\ No newline at end of file
+export default DequeVisualizer;
\ No newline at end of file
diff --git a/app/visualizer/queue/types/deque/codeBlock.jsx b/app/visualizer/queue/types/deque/codeBlock.jsx
index d65a95b..2820970 100755
--- a/app/visualizer/queue/types/deque/codeBlock.jsx
+++ b/app/visualizer/queue/types/deque/codeBlock.jsx
@@ -759,10 +759,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/queue/types/deque/content.jsx b/app/visualizer/queue/types/deque/content.jsx
index 277bd34..7352d70 100755
--- a/app/visualizer/queue/types/deque/content.jsx
+++ b/app/visualizer/queue/types/deque/content.jsx
@@ -1,253 +1,326 @@
+"use client";
+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 Double-Ended Queue (Deque) is a versatile data structure that allows insertion and deletion of elements from both ends (front and rear). Unlike a single-ended queue, it provides more flexibility while maintaining efficient O(1) operations.`,
     `The double-ended queue is a powerful hybrid data structure that combines the best features of stacks and queues. Its flexibility makes it invaluable for algorithms requiring access to both ends of a dataset, while maintaining efficient constant-time operations for all key functions.`,
   ];
 
   const characteristics = [
-    { points : "Two open ends:",
-      subpoints : [
-        "Supports operations at both front and rear",
-      ],
-     },
-    { points : "Four core operations:",
-      subpoints : [
+    {
+      points: "Two open ends:",
+      subpoints: ["Supports operations at both front and rear"],
+    },
+    {
+      points: "Four core operations:",
+      subpoints: [
         "addFront() - Insert at front",
         "addRear() - Insert at rear",
         "removeFront() - Delete from front",
         "removeRear() - Delete from rear",
       ],
-     },
-    { points : "Hybrid nature:",
-      subpoints : [
-        "Combines features of both stacks and queues",
-      ],
-     },
-  ];
-
-  const example = [
-    { points : "addFront(30): [30]" },
-    { points : "addRear(40): [30, 40]" },
-    { points : "addFront(20): [20, 30, 40]" },
-    { points : "addRear(50): [20, 30, 40, 50]" },
-    { points : "removeFront(): Returns 20 → [30, 40, 50]" },
-    { points : "removeRear(): Returns 50 → [30, 40]" },
+    },
+    {
+      points: "Hybrid nature:",
+      subpoints: ["Combines features of both stacks and queues"],
+    },
   ];
 
   const variations = [
-    { points : "Doubly Linked List:",
-      subpoints : [
+    {
+      points: "Doubly Linked List:",
+      subpoints: [
         "Natural fit with head and tail pointers",
         "All operations are O(1)",
         "Extra memory for previous/next pointers",
       ],
     },
-    { points : "Circular Array:",
-      subpoints : [
+    {
+      points: "Circular Array:",
+      subpoints: [
         "Fixed capacity but efficient",
         "Requires careful index management",
         "Good for memory-constrained environments",
       ],
     },
-    { points : "Dynamic Array:",
-      subpoints : [
-        "Amortized O(1) operations",
-        "May need occasional resizing",
-      ],
+    {
+      points: "Dynamic Array:",
+      subpoints: ["Amortized O(1) operations", "May need occasional resizing"],
     },
   ];
 
   const complexity = [
-    { points : "addFront(): O(1)" },
-    { points : "addRear(): O(1)" },
-    { points : "removeFront(): O(1)" },
-    { points : "removeRear(): O(1)" },
-    { points : "peekFront(): O(1)" },
-    { points : "peekRear(): O(1)" },
+    { points: "addFront(): O(1)" },
+    { points: "addRear(): O(1)" },
+    { points: "removeFront(): O(1)" },
+    { points: "removeRear(): O(1)" },
+    { points: "peekFront(): O(1)" },
+    { points: "peekRear(): O(1)" },
   ];
 
   const application = [
-    { points : "Undo/Redo operations: Store history at both ends" },
-    { points : "Palindrome checking: Compare front and rear elements" },
-    { points : "Steal algorithms: Work stealing in parallel processing" },
-    { points : "Sliding window problems: Efficient maximum/minimum tracking" },
-    { points : "Browser history: Navigation in both directions" },
+    { points: "Undo/Redo operations: Store history at both ends" },
+    { points: "Palindrome checking: Compare front and rear elements" },
+    { points: "Steal algorithms: Work stealing in parallel processing" },
+    { points: "Sliding window problems: Efficient maximum/minimum tracking" },
+    { points: "Browser history: Navigation in both directions" },
   ];
 
   const cases = [
-    { points : "Input-Restricted Deque: Insertion only at one end" },
-    { points : "Output-Restricted Deque: Deletion only at one end" },
-    { points : "Palindrome Checker: Using deque properties" },
-    { points : "Priority Deque: Combines deque and priority queue features" },
+    { points: "Input-Restricted Deque: Insertion only at one end" },
+    { points: "Output-Restricted Deque: Deletion only at one end" },
+    { points: "Palindrome Checker: Using deque properties" },
+    { points: "Priority Deque: Combines deque and priority queue features" },
   ];
 
-    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 a Double-Ended Queue (Deque)? */}
-    <section className="p-6 border-b border-gray-100 dark:border-gray-700">
-      <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
-        <span className="w-1 h-6 bg-blue-500 mr-3 rounded-full"></span>
-        What is a Double-Ended Queue (Deque)?
-      </h1>
-      <div className="prose dark:prose-invert max-w-none">
-        <p className="text-gray-700 dark:text-gray-300 leading-relaxed">
-          {paragraph[0]}
-        </p>
-      </div>
-    </section>
-
-    {/* Key Characteristics */}
-    <section className="p-6 border-b border-gray-100 dark:border-gray-700">
-      <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
-        <span className="w-1 h-6 bg-blue-500 mr-3 rounded-full"></span>
-        Key Characteristics
-      </h1>
-      <div className="prose dark:prose-invert max-w-none">
-        <p className="text-gray-700 dark:text-gray-300 mb-4 leading-relaxed">
-          Deques have these fundamental properties:
-        </p>
-        <ol className="space-y-3 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-          {characteristics.map((item, index) => (
-            <li key={index} className="text-gray-700 dark:text-gray-300 pl-2">
-              {item.points}
-              {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>
-          ))}
-        </ol>
-      </div>
-    </section>
-
-    {/* Visual 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>
-        Visual Example
-      </h1>
-      <div className="prose dark:prose-invert max-w-none">
-        <p className="text-gray-700 dark:text-gray-300 mb-4 leading-relaxed">
-          Operation sequence on an empty deque:
-        </p>
-        <ol className="space-y-2 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-          {example.map((item, index) => (
-            <li key={index} className="text-gray-700 dark:text-gray-300 pl-2">
-              {item.points}
-            </li>
-          ))}
-        </ol>
-      </div>
-    </section>
-
-    {/* Implementation Variations */}
-    <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>
-        Implementation Variations
-      </h1>
-      <div className="prose dark:prose-invert max-w-none">
-        <p className="text-gray-700 dark:text-gray-300 mb-4 leading-relaxed">
-          Common implementation approaches:
-        </p>
-        <ol className="space-y-3 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-          {variations.map((item, index) => (
-            <li key={index} className="text-gray-700 dark:text-gray-300 pl-2">
-              <span className="font-semibold">{item.points}</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>
-          ))}
-        </ol>
-      </div>
-    </section>
-
-    {/* Time Complexity */}
-    <section className="p-6 border-b border-gray-100 dark:border-gray-700">
-      <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
-        <span className="w-1 h-6 bg-blue-500 mr-3 rounded-full"></span>
-        Time Complexity
-      </h1>
-      <div className="prose dark:prose-invert max-w-none">
-        <ul className="space-y-2 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>
-            </li>
-          ))}
-        </ul>
-      </div>
-    </section>
-
-    {/* Applications */}
-    <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>
-        Applications
-      </h1>
-      <div className="prose dark:prose-invert max-w-none">
-        <p className="text-gray-700 dark:text-gray-300 mb-4 leading-relaxed">
-          Deques are used in:
-        </p>
-        <ul className="space-y-2 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-          {application.map((item, index) => (
-            <li key={index} className="text-gray-700 dark:text-gray-300 pl-2">
-              {item.points}
-            </li>
-          ))}
-        </ul>
-      </div>
-    </section>
-
-    {/* Special Cases */}
-    <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>
-        Special Cases
-      </h1>
-      <div className="prose dark:prose-invert max-w-none">
-        <p className="text-gray-700 dark:text-gray-300 mb-4 leading-relaxed">
-          Interesting deque variations:
-        </p>
-        <ul className="space-y-2 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-          {cases.map((item, index) => (
-            <li key={index} className="text-gray-700 dark:text-gray-300 pl-2">
-              {item.points}
-            </li>
-          ))}
-        </ul>
+  return (
+    <main className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-5 md:gap-4">
+      <div className="col-span-1">
+        <div className="hidden md:block">
+          {mounted && (
+            <iframe
+              key={theme}
+              src={
+                theme === "dark"
+                  ? "https://hw.glich.co/resources/embed/daily/dsa?theme=dark"
+                  : "https://hw.glich.co/resources/embed/daily/dsa?theme=light"
+              }
+              width="100%"
+              height="400"
+              title="Daily DSA Challenge"
+            ></iframe>
+          )}
+        </div>
+        <div className="flex justify-center">
+          <span className="text-xs hidden md:block">
+            Daily DSA Challenge by{" "}
+            <a
+              href="https://hw.glich.co/resources/daily"
+              target="_blank"
+              className="underline hover:text-blue-500 duration-300"
+            >
+              Hello World
+            </a>
+          </span>
+        </div>
       </div>
-    </section>
-
-    {/* Additional Info */}
-    <section className="p-6 border-t border-gray-100 dark:border-gray-700">
-      <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">
-            {paragraph[1]}
-          </p>
+      <article className="col-span-4 max-w-4xl bg-white dark:bg-neutral-950 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden mb-8">
+        {/* What is a Double-Ended Queue (Deque)? */}
+        <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 a Double-Ended Queue (Deque)?
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <p className="text-gray-700 dark:text-gray-300 leading-relaxed">
+              {paragraph[0]}
+            </p>
+          </div>
+        </section>
+
+        {/* Key Characteristics */}
+        <section className="p-6 border-b border-gray-100 dark:border-gray-700">
+          <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-blue-500 mr-3 rounded-full"></span>
+            Key Characteristics
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <p className="text-gray-700 dark:text-gray-300 mb-4 leading-relaxed">
+              Deques have these fundamental properties:
+            </p>
+            <ol className="space-y-3 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {characteristics.map((item, index) => (
+                <li
+                  key={index}
+                  className="text-gray-700 dark:text-gray-300 pl-2"
+                >
+                  {item.points}
+                  {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>
+              ))}
+            </ol>
+          </div>
+        </section>
+
+        {/* Implementation Variations */}
+        <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>
+            Implementation Variations
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <p className="text-gray-700 dark:text-gray-300 mb-4 leading-relaxed">
+              Common implementation approaches:
+            </p>
+            <ol className="space-y-3 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {variations.map((item, index) => (
+                <li
+                  key={index}
+                  className="text-gray-700 dark:text-gray-300 pl-2"
+                >
+                  <span className="font-semibold">{item.points}</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>
+              ))}
+            </ol>
+          </div>
+        </section>
+
+        {/* Time Complexity */}
+        <section className="p-6 border-b border-gray-100 dark:border-gray-700">
+          <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-blue-500 mr-3 rounded-full"></span>
+            Time Complexity
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <ul className="space-y-2 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>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </section>
+
+        {/* Applications */}
+        <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>
+            Applications
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <p className="text-gray-700 dark:text-gray-300 mb-4 leading-relaxed">
+              Deques are used in:
+            </p>
+            <ul className="space-y-2 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {application.map((item, index) => (
+                <li
+                  key={index}
+                  className="text-gray-700 dark:text-gray-300 pl-2"
+                >
+                  {item.points}
+                </li>
+              ))}
+            </ul>
+          </div>
+        </section>
+
+        {/* Special Cases */}
+        <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>
+            Special Cases
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <p className="text-gray-700 dark:text-gray-300 mb-4 leading-relaxed">
+              Interesting deque variations:
+            </p>
+            <ul className="space-y-2 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {cases.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 border-t border-gray-100 dark:border-gray-700">
+          <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">
+                {paragraph[1]}
+              </p>
+            </div>
+          </div>
+        </section>
+      </article>
+
+      {/* Mobile iframe at bottom */}
+      <div className="block md:hidden w-full">
+        {mounted && (
+          <iframe
+            key={theme}
+            src={
+              theme === "dark"
+                ? "https://hw.glich.co/resources/embed/daily/dsa?theme=dark"
+                : "https://hw.glich.co/resources/embed/daily/dsa?theme=light"
+            }
+            width="100%"
+            height="320"
+            title="Daily DSA Challenge"
+          ></iframe>
+        )}
+        <div className="flex justify-center pb-8">
+          <span className="text-xs">
+            Daily DSA Challenge by{" "}
+            <a
+              href="https://hw.glich.co/resources/daily"
+              target="_blank"
+              className="underline hover:text-blue-500 duration-300"
+            >
+              Hello World
+            </a>
+          </span>
         </div>
       </div>
-    </section>
-  </article>
-</main>
-    );
-  };
-  
-  export default content;
\ No newline at end of file
+    </main>
+  );
+};
+
+export default content;
diff --git a/app/visualizer/queue/types/deque/page.jsx b/app/visualizer/queue/types/deque/page.jsx
index 45e5045..3b1b56d 100755
--- a/app/visualizer/queue/types/deque/page.jsx
+++ b/app/visualizer/queue/types/deque/page.jsx
@@ -1,31 +1,119 @@
 import Animation from "@/app/visualizer/queue/types/deque/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/queue/types/deque/content";
+import Quiz from "@/app/visualizer/queue/types/deque/quiz";
+import Code from "@/app/visualizer/queue/types/deque/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 BackToTop from '@/app/components/ui/backtotop';
 
 export const metadata = {
-    title: 'Double Ended Queue (Deque) | Learn with JS, C, Python, Java Code',
-    description: 'Explore Double Ended Queue (Deque) in Data Structures with visual animations and full code implementations in JavaScript, C, Python, and Java. Perfect for mastering DSA concepts and interview preparation.',
-    keywords: [
-      'Double Ended Queue',
-      'Double Ended Queue Visualizer',
-      'Deque in DSA',
-      'DSA Deque',
-      'Double Ended Queue in JavaScript',
-      'Deque in C',
-      'Deque in Python',
-      'Deque in Java',
-      'DSA Queue Operations',
-      'Learn Deque DSA',
-      'Deque Code Examples',
-      'DSA Visualizer'
+  title: "Double Ended Queue (Deque) | Learn with JS, C, Python, Java Code",
+  description:
+    "Explore Double Ended Queue (Deque) in Data Structures with visual animations and full code implementations in JavaScript, C, Python, and Java. Perfect for mastering DSA concepts and interview preparation.",
+  keywords: [
+    "Double Ended Queue",
+    "Double Ended Queue Visualizer",
+    "Deque in DSA",
+    "DSA Deque",
+    "Double Ended Queue in JavaScript",
+    "Deque in C",
+    "Deque in Python",
+    "Deque in Java",
+    "DSA Queue Operations",
+    "Learn Deque DSA",
+    "Deque Code Examples",
+    "DSA Visualizer",
+  ],
+  robots: "index, follow",
+  openGraph: {
+    images: [
+      {
+        url: "/og/queue/deque.png",
+        width: 1200,
+        height: 630,
+        alt: "Double Ended Queue Algorithm Visualization",
+      },
     ],
-    robots: 'index, follow',
-  };
-
-export default function Page(){
-    return(
-      <>
-        <Navbar/>
-        <Animation/>
-      </>
-    );
-};
\ No newline at end of file
+  },
+};
+
+export default function Page() {
+  const paths = [
+    { name: "Home", href: "/" },
+    { name: "Visualizer", href: "/visualizer" },
+    { name: "Queue : Double Ended", href: "" },
+  ];
+
+  return (
+    <>
+      <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">
+                Queue
+              </p>
+            </div>
+            <h1 className="text-4xl md:text-4xl font-bold text-center text-gray-900 dark:text-white mb-0">
+              Double Ended
+            </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">
+          <Animation />
+        </section>
+
+        <section className="px-6">
+          <p className="text-lg text-center text-gray-600 dark:text-gray-400 mb-8">
+            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.doubleEnded}
+            title="Double Ended"
+            description="Mark Double Ended Queue as done and view it on your dashboard"
+            initialDone={false}
+          />
+        </section>
+
+        <section className="px-6">
+          <ExploreOther
+          title="Explore Other Types"
+          links={[
+            { text: "Single Ended Queue", url: "./singleEnded" },
+            { text: "Circular Queue", url: "./circular" },
+            { text: "Multiple Queue", url: "./multiple" },
+            { text: "Priority Queue", url: "./priority" },
+          ]}
+        />
+        </section>
+      </div>
+
+      <BackToTop />
+      <Footer />
+    </>
+  );
+}
diff --git a/app/visualizer/queue/types/deque/quiz.jsx b/app/visualizer/queue/types/deque/quiz.jsx
index 1d244ed..f87b9b9 100755
--- a/app/visualizer/queue/types/deque/quiz.jsx
+++ b/app/visualizer/queue/types/deque/quiz.jsx
@@ -1,10 +1,11 @@
+"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';
 
 const QueueQuiz = () => {
-const questions = [
-        {
+  const questions = [
+    {
       question: "What is the key characteristic that distinguishes a deque from a single-ended queue?",
       options: [
         "Allows operations at only one end",
@@ -58,63 +59,8 @@ const questions = [
       ],
       correctAnswer: 0,
       explanation: "All core deque operations (addFront, addRear, removeFront, removeRear) should be O(1) in a proper implementation."
-    },
-    {
-      question: "Which application would MOST likely use a deque?",
-      options: [
-        "Implementing recursive function calls",
-        "Browser's undo-redo functionality", 
-        "Database indexing",
-        "Hash collision resolution"
-      ],
-      correctAnswer: 1,
-      explanation: "Deques are excellent for undo-redo as they allow operations at both ends to add and remove actions."
-    },
-    {
-      question: "What is true about a input-restricted deque?",
-      options: [
-        "Allows insertion at both ends but removal from one",
-        "Allows insertion at one end but removal from both", 
-        "Is exactly the same as a stack",
-        "Cannot implement any queue operations"
-      ],
-      correctAnswer: 1,
-      explanation: "An input-restricted deque allows insertion at only one end but removal from both ends."
-    },
-    {
-      question: "How can a deque be used to check for palindromes?",
-      options: [
-        "By comparing only the middle elements",
-        "By repeatedly comparing and removing front and rear elements", 
-        "By sorting the elements first",
-        "By using it as a temporary stack"
-      ],
-      correctAnswer: 1,
-      explanation: "Palindrome checking with a deque works by comparing front and rear elements (and removing them) until empty or one element remains."
-    },
-    {
-      question: "In a circular array implementation of a deque, what happens when the array is full?",
-      options: [
-        "It automatically shrinks",
-        "It throws an error by default", 
-        "It can either resize or reject new elements (implementation dependent)",
-        "It converts to a linked list"
-      ],
-      correctAnswer: 2,
-      explanation: "Behavior depends on implementation - some may resize (with performance cost), while others may have fixed capacity."
-    },
-    {
-      question: "Which property makes deques suitable for work-stealing algorithms in parallel processing?",
-      options: [
-        "Ability to access both ends simultaneously by different threads",
-        "Automatic sorting of elements", 
-        "Built-in thread synchronization",
-        "Random access capability"
-      ],
-      correctAnswer: 0,
-      explanation: "Work-stealing algorithms benefit from deques because idle threads can steal work from one end while the owner thread processes from the other end."
     }
-];
+  ];
 
   const [currentQuestion, setCurrentQuestion] = useState(0);
   const [selectedAnswer, setSelectedAnswer] = useState(null);
@@ -122,13 +68,10 @@ const questions = [
   const [showResult, setShowResult] = useState(false);
   const [quizCompleted, setQuizCompleted] = useState(false);
   const [answers, setAnswers] = useState(Array(questions.length).fill(null));
-  const [showExplanation, setShowExplanation] = useState(false);
   const [showIntro, setShowIntro] = useState(true);
   const [showSuccessAnimation, setShowSuccessAnimation] = useState(false);
-  const [penaltyApplied, setPenaltyApplied] = useState(false);
 
   const handleAnswerSelect = (optionIndex) => {
-    if (selectedAnswer !== null) return;
     setSelectedAnswer(optionIndex);
     const newAnswers = [...answers];
     newAnswers[currentQuestion] = optionIndex;
@@ -138,18 +81,9 @@ const questions = [
   const handleNextQuestion = () => {
     if (selectedAnswer === null) return;
     
-    if (showExplanation && !penaltyApplied) {
-      setScore(prevScore => Math.max(0, prevScore - 0.5));
-      setPenaltyApplied(true);
-    }
-
     if (selectedAnswer === questions[currentQuestion].correctAnswer) {
       setScore(score + 1);
     }
-    
-    setShowExplanation(false);
-    setPenaltyApplied(false);
-    
     if (currentQuestion < questions.length - 1) {
       setCurrentQuestion(currentQuestion + 1);
       setSelectedAnswer(null);
@@ -164,7 +98,6 @@ const questions = [
   };
 
   const handlePreviousQuestion = () => {
-    setShowExplanation(false);
     setCurrentQuestion(currentQuestion - 1);
     setSelectedAnswer(answers[currentQuestion - 1]);
   };
@@ -176,38 +109,30 @@ const questions = [
     setShowResult(false);
     setQuizCompleted(false);
     setAnswers(Array(questions.length).fill(null));
-    setShowExplanation(false);
     setShowIntro(true);
-    setPenaltyApplied(false);
   };
 
   const calculateWeakAreas = () => {
     const weakAreas = [];
     if (answers[0] !== questions[0].correctAnswer) {
-      weakAreas.push("understanding the basic principle of Selection Sort");
+      weakAreas.push("understanding deque characteristics");
     }
     if (answers[1] !== questions[1].correctAnswer) {
-      weakAreas.push("time complexity analysis");
+      weakAreas.push("deque operations");
     }
     if (answers[2] !== questions[2].correctAnswer) {
-      weakAreas.push("counting swaps in Selection Sort");
+      weakAreas.push("deque operation sequences");
     }
     if (answers[3] !== questions[3].correctAnswer) {
-      weakAreas.push("comparison with other simple sorts");
+      weakAreas.push("deque implementation");
     }
     if (answers[4] !== questions[4].correctAnswer) {
-      weakAreas.push("space complexity");
-    }
-    if (answers[5] !== questions[5].correctAnswer) {
-      weakAreas.push("stability characteristics");
-    }
-    if (answers[6] !== questions[6].correctAnswer) {
-      weakAreas.push("practical applications");
+      weakAreas.push("time complexity analysis");
     }
     
     return weakAreas.length > 0 
       ? `Focus on improving: ${weakAreas.join(', ')}. Review the corresponding sections above.`
-      : "Perfect! You've mastered all Selection Sort concepts!";
+      : "Perfect! You've mastered all Deque concepts!";
   };
 
   const startQuiz = () => {
@@ -224,22 +149,22 @@ const questions = [
   };
 
   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
+        <motion.div 
           initial={{ opacity: 0, y: 20 }}
           animate={{ opacity: 1, y: 0 }}
           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">
-            Queue Quiz Challenge
+            Deque Quiz
           </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>
@@ -274,14 +199,14 @@ const questions = [
           <motion.div
             initial={{ scale: 0 }}
             animate={{ scale: 1 }}
-            transition={{ type: "spring", stiffness: 500, damping: 15 }}
+            transition={{ type: 'spring', stiffness: 500, damping: 15 }}
             className="mb-4"
           >
             <div className="relative">
               <div className="w-24 h-24 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center">
                 <FaCheck className="text-4xl text-green-500 animate-bounce" />
               </div>
-              <motion.div
+              <motion.div 
                 initial={{ scale: 0.5, opacity: 0 }}
                 animate={{ scale: 1.5, opacity: 0 }}
                 transition={{ duration: 1.5, repeat: Infinity }}
@@ -289,7 +214,7 @@ const questions = [
               />
             </div>
           </motion.div>
-          <motion.p
+          <motion.p 
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}
             className="text-xl font-semibold text-gray-700 dark:text-gray-200"
@@ -309,15 +234,13 @@ const questions = [
               </span>
             </div>
             <div className="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
-              <div
-                className="bg-gradient-to-r from-blue-500 to-purple-500 h-2.5 rounded-full transition-all duration-500"
-                style={{
-                  width: `${((currentQuestion + 1) / questions.length) * 100}%`,
-                }}
+              <div 
+                className="bg-gradient-to-r from-blue-500 to-purple-500 h-2.5 rounded-full transition-all duration-500" 
+                style={{ width: `${((currentQuestion + 1) / questions.length) * 100}%` }}
               />
             </div>
           </div>
-
+          
           <motion.div
             key={currentQuestion}
             initial={{ opacity: 0, x: 20 }}
@@ -327,28 +250,26 @@ const questions = [
             <h3 className="text-xl font-semibold mb-6 dark:text-white p-4">
               {questions[currentQuestion].question}
             </h3>
-
+            
             <div className="space-y-3 mb-6">
               {questions[currentQuestion].options.map((option, index) => (
-                <motion.div
+                <motion.div 
                   key={index}
                   whileHover={{ scale: 1.02 }}
                   whileTap={{ scale: 0.98 }}
                   className={`p-4 border rounded-lg cursor-pointer transition-all ${
                     selectedAnswer === index
-                      ? "border-blue-500 bg-blue-50 dark:bg-blue-900/20 shadow-md"
-                      : "border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700"
+                      ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20 shadow-md'
+                      : 'border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700'
                   }`}
                   onClick={() => handleAnswerSelect(index)}
                 >
                   <div className="flex items-center">
-                    <span
-                      className={`font-medium mr-3 w-6 h-6 flex items-center justify-center rounded-full ${
-                        selectedAnswer === index
-                          ? "bg-blue-500 text-white"
-                          : "bg-gray-200 dark:bg-gray-600"
-                      }`}
-                    >
+                    <span className={`font-medium mr-3 w-6 h-6 flex items-center justify-center rounded-full ${
+                      selectedAnswer === index 
+                        ? 'bg-blue-500 text-white' 
+                        : 'bg-gray-200 dark:bg-gray-600'
+                    }`}>
                       {String.fromCharCode(65 + index)}
                     </span>
                     <span>{option}</span>
@@ -356,32 +277,9 @@ const questions = [
                 </motion.div>
               ))}
             </div>
-
-            {selectedAnswer !== null && (
-              <div className="mb-6">
-                <button
-                  onClick={() => setShowExplanation(!showExplanation)}
-                  className="text-sm flex items-center text-blue-600 dark:text-blue-400 hover:underline mb-2"
-                >
-                  <FaInfoCircle className="mr-1" />
-                  {showExplanation ? "Hide Explanation" : "Show Explanation"}
-                </button>
-                <AnimatePresence>
-                  {showExplanation && (
-                    <motion.div
-                      initial={{ opacity: 0, height: 0 }}
-                      animate={{ opacity: 1, height: "auto" }}
-                      exit={{ opacity: 0, height: 0 }}
-                      className="p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg text-sm overflow-hidden"
-                    >
-                      {questions[currentQuestion].explanation}
-                    </motion.div>
-                  )}
-                </AnimatePresence>
-              </div>
-            )}
+            
           </motion.div>
-
+          
           <div className="flex justify-between">
             <button
               onClick={handlePreviousQuestion}
@@ -390,14 +288,13 @@ const questions = [
             >
               <FaArrowLeft className="mr-2" /> Previous
             </button>
-
+            
             <button
               onClick={handleNextQuestion}
               disabled={selectedAnswer === null}
               className="px-4 py-2 bg-blue-600 text-white rounded-lg disabled:opacity-50 hover:from-blue-600 hover:to-purple-600 transition-all flex items-center shadow-md hover:shadow-lg"
             >
-              {currentQuestion === questions.length - 1 ? "Finish" : "Next"}{" "}
-              <FaArrowRight className="ml-2" />
+              {currentQuestion === questions.length - 1 ? 'Finish' : 'Next'} <FaArrowRight className="ml-2" />
             </button>
           </div>
         </div>
@@ -416,84 +313,62 @@ const questions = [
               </div>
               <div className="absolute -bottom-2 left-0 right-0 flex justify-center">
                 {[...Array(5)].map((_, i) => (
-                  <FaStar
+                  <FaStar 
                     key={i}
                     className={`text-2xl mx-1 ${
-                      i < getStarRating()
-                        ? "text-yellow-400 fill-current"
-                        : "text-gray-300 dark:text-gray-600 fill-current"
+                      i < getStarRating() 
+                        ? 'text-yellow-400 fill-current' 
+                        : 'text-gray-300 dark:text-gray-600 fill-current'
                     }`}
                   />
                 ))}
               </div>
             </div>
-
+            
             <h3 className="text-2xl font-bold mb-2 dark:text-white">
-              {score === questions.length
-                ? "Perfect Score!"
-                : score >= questions.length * 0.8
-                ? "Excellent Work!"
-                : score >= questions.length * 0.6
-                ? "Good Job!"
-                : score >= questions.length * 0.4
-                ? "Keep Practicing!"
-                : "Let's Review Again!"}
+              {score === questions.length ? "Perfect Score!" :
+               score >= questions.length * 0.8 ? "Excellent Work!" :
+               score >= questions.length * 0.6 ? "Good Job!" :
+               score >= questions.length * 0.4 ? "Keep Practicing!" : "Let's Review Again!"}
             </h3>
             <p className="text-gray-600 dark:text-gray-400 mb-6">
-              You scored {((score / questions.length) * 100).toFixed(0)}%
-              correct
+              You scored {((score / questions.length) * 100).toFixed(0)}% correct
             </p>
           </div>
-
+          
           <div className="bg-white dark:bg-gray-700 p-4 rounded-lg mb-6 shadow-inner">
             <h4 className="font-bold mb-3 flex items-center text-blue-600 dark:text-blue-400">
               <FaInfoCircle className="mr-2" /> Performance Analysis
             </h4>
             <p className="text-sm">{calculateWeakAreas()}</p>
           </div>
-
+          
           <div className="space-y-4 mb-8">
-            <h4 className="font-bold text-gray-700 dark:text-gray-300">
-              Question Breakdown:
-            </h4>
+            <h4 className="font-bold text-gray-700 dark:text-gray-300">Question Breakdown:</h4>
             {questions.map((q, index) => (
-              <div
-                key={index}
-                className="border-b pb-3 border-gray-200 dark:border-gray-700 last:border-0"
-              >
-                <p className="font-medium text-gray-800 dark:text-gray-200">
-                  {q.question}
-                </p>
-                <div
-                  className={`flex items-start mt-1 ${
-                    answers[index] === q.correctAnswer
-                      ? "text-green-600 dark:text-green-400"
-                      : "text-red-600 dark:text-red-400"
-                  }`}
-                >
+              <div key={index} className="border-b pb-3 border-gray-200 dark:border-gray-700 last:border-0">
+                <p className="font-medium text-gray-800 dark:text-gray-200">{q.question}</p>
+                <div className={`flex items-start mt-1 ${
+                  answers[index] === q.correctAnswer 
+                    ? 'text-green-600 dark:text-green-400' 
+                    : 'text-red-600 dark:text-red-400'
+                }`}>
                   {answers[index] === q.correctAnswer ? (
                     <FaCheck className="mt-1 mr-2 flex-shrink-0" />
                   ) : (
                     <FaTimes className="mt-1 mr-2 flex-shrink-0" />
                   )}
                   <div>
-                    <p className="text-sm">
-                      Your answer:{" "}
-                      {answers[index] !== null
-                        ? q.options[answers[index]]
-                        : "Not answered"}
-                    </p>
+                    <p className="text-sm">Your answer: {answers[index] !== null ? q.options[answers[index]] : "Not answered"}</p>
                     {answers[index] !== q.correctAnswer && (
-                      <p className="text-sm">
-                        Correct answer: {q.options[q.correctAnswer]}
-                      </p>
+                      <p className="text-sm">Correct answer: {q.options[q.correctAnswer]}</p>
                     )}
                   </div>
                 </div>
               </div>
             ))}
           </div>
-
+          
           <button
             onClick={resetQuiz}
             className="w-full px-6 py-3 bg-blue-600 text-white rounded-lg hover:from-blue-700 hover:to-purple-600 transition-all shadow-md hover:shadow-lg flex items-center justify-center"
diff --git a/app/visualizer/queue/types/singleEnded/animation.jsx b/app/visualizer/queue/types/singleEnded/animation.jsx
index 12af048..5b2176d 100755
--- a/app/visualizer/queue/types/singleEnded/animation.jsx
+++ b/app/visualizer/queue/types/singleEnded/animation.jsx
@@ -1,276 +1,250 @@
-'use client';
-import React, { useState } from 'react';
-import Footer from '@/app/components/footer';
-import CodeBlock from '@/app/visualizer/queue/types/singleEnded/codeBlock';
-import Content from '@/app/visualizer/queue/types/singleEnded/content';
-import ExploreOther from '@/app/components/ui/exploreOther';
-import Quiz from '@/app/visualizer/queue/types/singleEnded/quiz';
-import BackToTop from '@/app/components/ui/backtotop';
-import GoBackButton from "@/app/components/ui/goback";
+"use client";
+import React, { useState } from "react";
 
 const SingleEndedQueueVisualizer = () => {
   const [queue, setQueue] = useState([]);
-  const [inputValue, setInputValue] = useState('');
+  const [inputValue, setInputValue] = useState("");
   const [operation, setOperation] = useState(null);
-  const [message, setMessage] = useState('Queue is empty'); // Added message state
-  const [highlightedIndex, setHighlightedIndex] = useState(null);
+  const [message, setMessage] = useState("Queue is empty");
   const [isAnimating, setIsAnimating] = useState(false);
 
-  // Enqueue at rear
-  const enqueueRear = () => {
+  /* ---------- helpers ---------- */
+  const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
+  const showOp = async (txt, ms = 800) => {
+    setOperation(txt);
+    await sleep(ms);
+    setOperation(null);
+  };
+
+  /* ---------- enqueue (rear) ---------- */
+  const enqueueRear = async () => {
     if (!inputValue.trim()) {
-      setMessage('Please enter a value');
+      setMessage("Please enter a value");
       return;
     }
-
     setIsAnimating(true);
-    setOperation(`Enqueuing "${inputValue}" at rear...`);
-    setHighlightedIndex(queue.length);
-
-    setTimeout(() => {
-      setQueue([...queue, inputValue]);
-      setMessage(`"${inputValue}" added to rear`);
-      setInputValue('');
-      setOperation(null);
-      setHighlightedIndex(null);
-      setIsAnimating(false);
-    }, 600);
+    await showOp(`Enqueuing "${inputValue}" at rear …`);
+    setQueue((q) => [...q, inputValue]);
+    setMessage(`"${inputValue}" added to rear`);
+    setInputValue("");
+    setIsAnimating(false);
   };
 
-  // Dequeue from front
-  const dequeueFront = () => {
+  /* ---------- dequeue (front) ---------- */
+  const dequeueFront = async () => {
     if (queue.length === 0) {
-      setMessage('Queue is empty!');
+      setMessage("Queue is empty!");
       return;
     }
-
     setIsAnimating(true);
-    setOperation('Dequeuing from front...');
-    setHighlightedIndex(0);
-
-    setTimeout(() => {
-      const dequeued = queue[0];
-      setQueue(queue.slice(1));
-      setMessage(`"${dequeued}" removed from front`);
-      setOperation(null);
-      setHighlightedIndex(null);
-      setIsAnimating(false);
-    }, 600);
+    const front = queue[0];
+    await showOp(`Dequeuing "${front}" from front …`);
+    setQueue((q) => q.slice(1));
+    setMessage(`"${front}" removed from front`);
+    setIsAnimating(false);
   };
 
-  // Peek front
-  const peekFront = () => {
+  /* ---------- peek front ---------- */
+  const peekFront = async () => {
     if (queue.length === 0) {
-      setMessage('Queue is empty!');
+      setMessage("Queue is empty!");
       return;
     }
     setIsAnimating(true);
-    setHighlightedIndex(0);
     setMessage(`Front element: "${queue[0]}"`);
-    setTimeout(() => {
-      setHighlightedIndex(null);
-      setIsAnimating(false);
-    }, 1500);
+    await sleep(1500);
+    setIsAnimating(false);
   };
 
-  // Peek rear
-  const peekRear = () => {
+  /* ---------- peek rear ---------- */
+  const peekRear = async () => {
     if (queue.length === 0) {
-      setMessage('Queue is empty!');
+      setMessage("Queue is empty!");
       return;
     }
     setIsAnimating(true);
-    setHighlightedIndex(queue.length - 1);
     setMessage(`Rear element: "${queue[queue.length - 1]}"`);
-    setTimeout(() => {
-      setHighlightedIndex(null);
-      setIsAnimating(false);
-    }, 1500);
+    await sleep(1500);
+    setIsAnimating(false);
   };
 
-  // Reset queue
+  /* ---------- reset ---------- */
   const reset = () => {
     setQueue([]);
-    setMessage('Queue cleared');
+    setInputValue("");
+    setOperation(null);
+    setMessage("Queue cleared");
   };
 
+  /* ---------- UI ---------- */
   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 className="container mx-auto px-6 pt-4 pb-4">
+      <p className="text-lg text-center text-gray-600 dark:text-gray-400 mb-8">
+        Single-Ended Queue Visualiser (FIFO)
+      </p>
+
+      <div className="max-w-4xl mx-auto">
+        {/* ----- Controls card ----- */}
+        <div className="bg-white dark:bg-neutral-950 p-6 rounded-xl shadow-lg border border-gray-200 dark:border-gray-700 mb-8">
+          {/* Value input + Enqueue */}
+          <div className="flex flex-col sm:flex-row gap-4 mb-4">
+            <input
+              type="text"
+              value={inputValue}
+              onChange={(e) => setInputValue(e.target.value)}
+              placeholder="Enter value"
+              className="flex-1 p-3 border dark:border-gray-700 rounded-lg dark:bg-neutral-900 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
+              disabled={isAnimating}
+              onKeyDown={(e) => e.key === "Enter" && enqueueRear()}
+            />
+          </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">Single Ended Queue</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 Single Ended Queue Operations
-        </p>
-        <div className="max-w-2xl mx-auto">
-          {/* Controls */}
-          <div className="bg-white dark:bg-gray-800 p-4 sm:p-6 rounded-lg shadow-md mb-8 border border-gray-200 dark:border-gray-700">
-            <div className="flex flex-col sm:flex-row gap-2 mb-4">
-              <input
-                type="text"
-                value={inputValue}
-                onChange={(e) => setInputValue(e.target.value)}
-                placeholder="Enter value"
-                className="flex-1 p-2 border rounded dark:bg-gray-700 focus:ring-2 focus:ring-green-500 transition-all"
-                disabled={isAnimating}
-              />
-              <button
-                onClick={enqueueRear}
-                disabled={isAnimating}
-                className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded disabled:opacity-50 transition-transform hover:scale-105 w-full sm:w-auto"
-              >
-                Enqueue
-              </button>
-            </div>
+          {/* Action buttons */}
+          <div className="grid grid-cols-2 sm:grid-cols-5 gap-2">
+            <button
+              onClick={enqueueRear}
+              disabled={isAnimating}
+              className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-3 rounded-lg disabled:opacity-50 transition-all"
+            >
+              Enqueue Rear
+            </button>
+            <button
+              onClick={dequeueFront}
+              disabled={isAnimating || queue.length === 0}
+              className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-3 rounded-lg disabled:opacity-50 transition-all"
+            >
+              Dequeue Front
+            </button>
+            <button
+              onClick={peekFront}
+              disabled={isAnimating || queue.length === 0}
+              className="bg-green-500 text-black px-4 py-3 rounded-lg disabled:opacity-50 transition-all"
+            >
+              Peek Front
+            </button>
+            <button
+              onClick={peekRear}
+              disabled={isAnimating || queue.length === 0}
+              className="bg-green-500 text-black px-4 py-3 rounded-lg disabled:opacity-50 transition-all"
+            >
+              Peek Rear
+            </button>
+            <button
+              onClick={reset}
+              disabled={isAnimating}
+              className="bg-red-500 text-white px-4 py-3 rounded-lg disabled:opacity-50 transition-all"
+            >
+              Reset
+            </button>
+          </div>
 
-            <div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
-              <button
-                onClick={dequeueFront}
-                disabled={isAnimating || queue.length === 0}
-                className="bg-none border-black dark:border-white text-black dark:text-white px-4 py-2 rounded disabled:opacity-50 disabled:bg-transparent disabled:text-blue-600 disabled:border-blue-600 dark:disabled:text-blue-600 border dark:disabled:border-blue-600 transition-transform hover:scale-105"
-              >
-                Dequeue
-              </button>
-              <button
-                onClick={peekFront}
-                disabled={isAnimating || queue.length === 0}
-                className="bg-none border-black dark:border-white text-black dark:text-white px-4 py-2 rounded disabled:opacity-50 disabled:bg-transparent disabled:text-blue-600 disabled:border-blue-600 dark:disabled:text-blue-600 border dark:disabled:border-blue-600 transition-transform hover:scale-105"
-              >
-                Peek Front
-              </button>
-              <button
-                onClick={peekRear}
-                disabled={isAnimating || queue.length === 0}
-                className="bg-none border-black dark:border-white text-black dark:text-white px-4 py-2 rounded disabled:opacity-50 disabled:bg-transparent disabled:text-blue-600 disabled:border-blue-600 dark:disabled:text-blue-600 border dark:disabled:border-blue-600 transition-transform hover:scale-105"
-              >
-                Peek Rear
-              </button>
-              <button
-                onClick={reset}
-                disabled={isAnimating}
-                className="bg-none border-black dark:border-white text-black dark:text-white px-4 py-2 rounded disabled:opacity-50 disabled:bg-transparent disabled:text-blue-600 disabled:border-blue-600 dark:disabled:text-blue-600 border dark:disabled:border-blue-600 transition-transform hover:scale-105"
+          {/* Status banners */}
+          <div className="flex flex-col gap-3 mt-4 items-center">
+            {operation && (
+              <div className="p-3 rounded-lg bg-blue-100 dark:bg-blue-900/50 text-blue-800 dark:text-blue-200 border border-blue-200 dark:border-blue-800 flex items-center gap-2 justify-center">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  className="h-5 w-5 animate-spin"
+                  viewBox="0 0 20 20"
+                  fill="currentColor"
+                >
+                  <path
+                    fillRule="evenodd"
+                    d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z"
+                    clipRule="evenodd"
+                  />
+                </svg>
+                <span>{operation}</span>
+              </div>
+            )}
+            {message && (
+              <div
+                className={`p-3 rounded-lg ${
+                  message.includes("added")
+                    ? "bg-green-100 dark:bg-green-900/50 text-green-800 dark:text-green-200 border border-green-200 dark:border-green-800"
+                    : message.includes("removed") || message.includes("element:")
+                    ? "bg-yellow-100 dark:bg-yellow-900/50 text-yellow-800 dark:text-yellow-200 border border-yellow-200 dark:border-yellow-800"
+                    : "bg-gray-100 dark:bg-neutral-900 text-gray-800 dark:text-gray-200 border border-gray-200 dark:border-gray-600"
+                } flex items-center gap-2 justify-center`}
               >
-                Clear
-              </button>
-            </div>
+                <span>{message}</span>
+              </div>
+            )}
           </div>
+        </div>
 
-          {/* Operation Status */}
-          {operation && (
-            <div className="mb-2 p-2 rounded-lg bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 animate-pulse">
-              {operation}
-            </div>
-          )}
-
-          {/* Message Display */}
-          {message && (
-            <div className="mb-4 p-3 border border-gray-200 dark:border-gray-700 rounded-lg shadow-md bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200">
-              {message}
-            </div>
-          )}
-
-          {/* Queue Visualization */}
-          <div className="bg-white dark:bg-gray-800 p-4 sm:p-6 rounded-lg shadow-md border border-gray-200 dark:border-gray-700">
-            <div className="flex justify-between mb-2">
-              <span className="text-sm text-green-600 dark:text-green-400 font-medium">
-                Front
-              </span>
-              <span className="text-sm text-orange-600 dark:text-orange-400 font-medium">
-                Rear
-              </span>
-            </div>
-
-            {queue.length === 0 ? (
-              <div className="text-center py-8 border-2 rounded-lg border-gray-300 bg-gray-50 dark:border-gray-700 dark:bg-gray-900/30">
-                <span className="text-gray-600 dark:text-gray-400">
-                  Queue is empty
-                </span>
+        {/* ----- Visualisation card (hidden when empty) ----- */}
+        {queue.length > 0 && (
+          <div className="bg-white dark:bg-neutral-950 p-6 rounded-xl shadow-lg border border-gray-200 dark:border-gray-700">
+            <h2 className="text-2xl font-semibold mb-6 text-center">Queue Visualisation</h2>
+
+            <div className="flex items-center gap-3 w-full justify-center">
+              {/* Front pointer */}
+              <div className="text-blue-600 dark:text-blue-400 font-medium flex flex-col items-center">
+                <span>Front</span>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  className="h-5 w-5"
+                  viewBox="0 0 20 20"
+                  fill="currentColor"
+                >
+                  <path
+                    fillRule="evenodd"
+                    d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+                    clipRule="evenodd"
+                  />
+                </svg>
               </div>
-            ) : (
-              <div className="flex gap-2 overflow-x-auto pb-4">
+
+              {/* Elements */}
+              <div className="flex items-center gap-4">
                 {queue.map((item, index) => (
                   <div
                     key={index}
-                    className={`flex flex-col items-center transition-all duration-300 ${
-                      highlightedIndex === index ? "transform scale-110" : ""
+                    className={`transition-all duration-300 ${
+                      index === 0 && operation?.includes("Dequeuing")
+                        ? "animate-pulse scale-110"
+                        : index === queue.length - 1 && operation?.includes("Enqueuing")
+                        ? "animate-bounce"
+                        : ""
                     }`}
                   >
                     <div
-                      className={`
-                      w-16 sm:w-20 p-3 rounded-lg border-2 text-center font-medium
-                      ${
+                      className={`w-24 h-24 rounded-lg shadow-md flex items-center justify-center text-lg font-medium border-2 ${
                         index === 0
-                          ? "bg-green-500 text-white border-green-600 dark:bg-green-600 dark:border-green-700"
-                          : ""
-                      }
-                      ${
-                        index === queue.length - 1
-                          ? "bg-orange-500 text-white border-orange-600 dark:bg-orange-600 dark:border-orange-700"
-                          : ""
-                      }
-                      ${
-                        highlightedIndex === index
-                          ? "ring-4 ring-yellow-400 dark:ring-yellow-500"
-                          : ""
-                      }
-                      ${
-                        index > 0 && index < queue.length - 1
-                          ? "bg-gray-200 dark:bg-gray-700 border-gray-300 dark:border-gray-600"
-                          : ""
-                      }
-                    `}
+                          ? "border-blue-300 dark:border-blue-700"
+                          : index === queue.length - 1
+                          ? "border-green-300 dark:border-green-700"
+                          : "border-gray-200 dark:border-gray-600"
+                      } bg-white dark:bg-neutral-900`}
                     >
                       {item}
                     </div>
-                    {index === 0 && (
-                      <span className="text-xs text-green-600 dark:text-green-400 mt-1">
-                        Front
-                      </span>
-                    )}
-                    {index === queue.length - 1 && (
-                      <span className="text-xs text-orange-600 dark:text-orange-400 mt-1">
-                        Rear
-                      </span>
-                    )}
                   </div>
                 ))}
               </div>
-            )}
-          </div>
-        </div>
 
-        <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 Types"
-          links={[
-            { text: "Double Ended Queue", url: "./deque" },
-            { text: "Circular Queue", url: "./circular" },
-            { text: "Multiple Queue", url: "./multiple" },
-            { text: "Priority Queue", url: "./priority" },
-          ]}
-        />
-      </main>
-      <div>
-        <div className="bg-gray-700 z-10 h-[1px]"></div>
+              {/* Rear pointer */}
+              <div className="text-green-600 dark:text-green-400 font-medium flex flex-col items-center">
+                <span>Rear</span>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  className="h-5 w-5"
+                  viewBox="0 0 20 20"
+                  fill="currentColor"
+                >
+                  <path
+                    fillRule="evenodd"
+                    d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+                    clipRule="evenodd"
+                  />
+                </svg>
+              </div>
+            </div>
+          </div>
+        )}
       </div>
-      <div className="bg-gray-700 z-10 h-[1px]"></div>
-      <BackToTop />
-      <Footer />
-    </div>
+    </main>
   );
 };
 
diff --git a/app/visualizer/queue/types/singleEnded/codeBlock.jsx b/app/visualizer/queue/types/singleEnded/codeBlock.jsx
index 9ca15ad..cfce87f 100755
--- a/app/visualizer/queue/types/singleEnded/codeBlock.jsx
+++ b/app/visualizer/queue/types/singleEnded/codeBlock.jsx
@@ -461,10 +461,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/queue/types/singleEnded/content.jsx b/app/visualizer/queue/types/singleEnded/content.jsx
index a20e0c0..28b957b 100755
--- a/app/visualizer/queue/types/singleEnded/content.jsx
+++ b/app/visualizer/queue/types/singleEnded/content.jsx
@@ -1,267 +1,352 @@
+"use client";
+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 paragraphs = [
     `A single-ended queue (often just called a queue) is a linear data structure that follows the FIFO (First-In-First-Out) principle. Elements are added (enqueued) at the rear and removed (dequeued) from the front, maintaining strict ordering.`,
-    `The single-ended queue is a fundamental data structure in computer science, providing predictable ordering that's essential for many algorithms and system design patterns where processing order matters.`
+    `The single-ended queue is a fundamental data structure in computer science, providing predictable ordering that's essential for many algorithms and system design patterns where processing order matters.`,
   ];
 
   const characteristics = [
-    { points : "Two ends:",
-      subpoints : [
-        "Front (for removal) and rear (for insertion)",
-      ],
-     },
-    { points : "Basic Operations:",
-      subpoints : [
+    {
+      points: "Two ends:",
+      subpoints: ["Front (for removal) and rear (for insertion)"],
+    },
+    {
+      points: "Basic Operations:",
+      subpoints: [
         "enqueue() - Add to rear",
         "dequeue() - Remove from front",
         "peek() - View front element",
         "isEmpty() - Check if empty",
       ],
-     },
-    { points : "Fixed Order:",
-      subpoints : [
-        "Elements are processed in exact arrival sequence",
-      ],
-     },
+    },
+    {
+      points: "Fixed Order:",
+      subpoints: ["Elements are processed in exact arrival sequence"],
+    },
   ];
 
   const example = [
-    { points : "enqueue(10): [10]" },
-    { points : "enqueue(20): [10, 20]" },
-    { points : "enqueue(30): [10, 20, 30]" },
-    { points : "dequeue(): Returns 10 → [20, 30]" },
-    { points : "peek(): Returns 20 → [20, 30] (unchanged)" },
+    { points: "enqueue(10): [10]" },
+    { points: "enqueue(20): [10, 20]" },
+    { points: "enqueue(30): [10, 20, 30]" },
+    { points: "dequeue(): Returns 10 → [20, 30]" },
+    { points: "peek(): Returns 20 → [20, 30] (unchanged)" },
   ];
 
   const implementation = [
-    { points : "Array-Based:",
-      subpoints : [
+    {
+      points: "Array-Based:",
+      subpoints: [
         "Fixed or dynamic array",
         "Need to handle wrap-around for circular queues",
       ],
-     },
-    { points : "Linked List:",
-      subpoints : [
+    },
+    {
+      points: "Linked List:",
+      subpoints: [
         "Head pointer as front",
         "Tail pointer as rear",
         "Efficient O(1) operations",
       ],
-     },
+    },
   ];
 
   const complexity = [
-    { points : "enqueue(): O(1)" },
-    { points : "dequeue(): O(1)" },
-    { points : "peek(): O(1)" },
-    { points : "isEmpty(): O(1)" },
+    { points: "enqueue(): O(1)" },
+    { points: "dequeue(): O(1)" },
+    { points: "peek(): O(1)" },
+    { points: "isEmpty(): O(1)" },
   ];
 
   const application = [
-    { points : "CPU task scheduling" },
-    { points : "Print job management" },
-    { points : "Breadth-First Search (BFS) algorithms" },
-    { points : "Buffering data streams" },
-    { points : "Handling requests in web servers" },
+    { points: "CPU task scheduling" },
+    { points: "Print job management" },
+    { points: "Breadth-First Search (BFS) algorithms" },
+    { points: "Buffering data streams" },
+    { points: "Handling requests in web servers" },
   ];
 
   const differences = [
-    { points : "Single-ended only allows insertion at rear and removal at front" },
-    { points : "Double-ended (deque) allows insertion/removal at both ends" },
-    { points : "Single-ended has stricter FIFO enforcement" },
-    { points : "Single-ended is simpler to implement" },
+    {
+      points: "Single-ended only allows insertion at rear and removal at front",
+    },
+    { points: "Double-ended (deque) allows insertion/removal at both ends" },
+    { points: "Single-ended has stricter FIFO enforcement" },
+    { points: "Single-ended is simpler to implement" },
   ];
 
-    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 a Single-Ended Queue? */}
-          <section className="p-6 border-b border-gray-100 dark:border-gray-700">
-            <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
-              <span className="w-1 h-6 bg-blue-500 mr-3 rounded-full"></span>
-              What is a Single-Ended Queue?
-            </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>
+  return (
+    <main className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-5 md:gap-4">
+      <div className="col-span-1">
+        <div className="hidden md:block">
+          {mounted && (
+            <iframe
+              key={theme}
+              src={
+                theme === "dark"
+                  ? "https://hw.glich.co/resources/embed/daily/dsa?theme=dark"
+                  : "https://hw.glich.co/resources/embed/daily/dsa?theme=light"
+              }
+              width="100%"
+              height="400"
+              title="Daily DSA Challenge"
+            ></iframe>
+          )}
+        </div>
+        <div className="flex justify-center">
+          <span className="text-xs hidden md:block">
+            Daily DSA Challenge by{" "}
+            <a
+              href="https://hw.glich.co/resources/daily"
+              target="_blank"
+              className="underline hover:text-blue-500 duration-300"
+            >
+              Hello World
+            </a>
+          </span>
+        </div>
+      </div>
+      <article className="col-span-4 max-w-4xl bg-white dark:bg-neutral-950 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden mb-8">
+        {/* What is a Single-Ended Queue? */}
+        <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 a Single-Ended Queue?
+          </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>
 
-          {/* Key Characteristics */}
-          <section className="p-6 border-b border-gray-100 dark:border-gray-700">
-            <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
-              <span className="w-1 h-6 bg-blue-500 mr-3 rounded-full"></span>
-              Key Characteristics
-            </h1>
-            <div className="prose dark:prose-invert max-w-none">
-              <p className="text-gray-700 dark:text-gray-300 mb-4 leading-relaxed">
-                Single-ended queues have these fundamental properties:
-              </p>
-              <ol className="space-y-3 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-                {characteristics.map((item, index) => (
-                  <li
-                    key={index}
-                    className="text-gray-700 dark:text-gray-300 pl-2"
-                  >
-                    {item.points}
-                    {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>
-                ))}
-              </ol>
-            </div>
-          </section>
+        {/* Key Characteristics */}
+        <section className="p-6 border-b border-gray-100 dark:border-gray-700">
+          <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-blue-500 mr-3 rounded-full"></span>
+            Key Characteristics
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <p className="text-gray-700 dark:text-gray-300 mb-4 leading-relaxed">
+              Single-ended queues have these fundamental properties:
+            </p>
+            <ol className="space-y-3 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {characteristics.map((item, index) => (
+                <li
+                  key={index}
+                  className="text-gray-700 dark:text-gray-300 pl-2"
+                >
+                  {item.points}
+                  {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>
+              ))}
+            </ol>
+          </div>
+        </section>
 
-          {/* Visual 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>
-              Visual Example
-            </h1>
-            <div className="prose dark:prose-invert max-w-none">
-              <p className="text-gray-700 dark:text-gray-300 mb-4 leading-relaxed">
-                Operation sequence on an initially empty queue:
-              </p>
-              <ol className="space-y-2 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-                {example.map((item, index) => (
-                  <li
-                    key={index}
-                    className="text-gray-700 dark:text-gray-300 pl-2"
-                  >
-                    {item.points}
-                  </li>
-                ))}
-              </ol>
-            </div>
-          </section>
+        {/* Visual 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>
+            Visual Example
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <p className="text-gray-700 dark:text-gray-300 mb-4 leading-relaxed">
+              Operation sequence on an initially empty queue:
+            </p>
+            <ol className="space-y-2 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {example.map((item, index) => (
+                <li
+                  key={index}
+                  className="text-gray-700 dark:text-gray-300 pl-2"
+                >
+                  {item.points}
+                </li>
+              ))}
+            </ol>
+          </div>
+        </section>
 
-          {/* Implementation Variations */}
-          <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>
-              Implementation Variations
-            </h1>
-            <div className="prose dark:prose-invert max-w-none">
-              <p className="text-gray-700 dark:text-gray-300 mb-4 leading-relaxed">
-                Common implementation approaches:
-              </p>
-              <ol className="space-y-3 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-                {implementation.map((item, index) => (
-                  <li
-                    key={index}
-                    className="text-gray-700 dark:text-gray-300 pl-2"
-                  >
-                    <span className="font-semibold">{item.points}</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>
-                ))}
-              </ol>
-            </div>
-          </section>
+        {/* Implementation Variations */}
+        <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>
+            Implementation Variations
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <p className="text-gray-700 dark:text-gray-300 mb-4 leading-relaxed">
+              Common implementation approaches:
+            </p>
+            <ol className="space-y-3 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {implementation.map((item, index) => (
+                <li
+                  key={index}
+                  className="text-gray-700 dark:text-gray-300 pl-2"
+                >
+                  <span className="font-semibold">{item.points}</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>
+              ))}
+            </ol>
+          </div>
+        </section>
 
-          {/* Time Complexity */}
-          <section className="p-6 border-b border-gray-100 dark:border-gray-700">
-            <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
-              <span className="w-1 h-6 bg-blue-500 mr-3 rounded-full"></span>
-              Time Complexity
-            </h1>
-            <div className="prose dark:prose-invert max-w-none">
-              <ul className="space-y-2 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>
-                  </li>
-                ))}
-              </ul>
-            </div>
-          </section>
+        {/* Time Complexity */}
+        <section className="p-6 border-b border-gray-100 dark:border-gray-700">
+          <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-blue-500 mr-3 rounded-full"></span>
+            Time Complexity
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <ul className="space-y-2 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>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </section>
 
-          {/* Applications */}
-          <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>
-              Applications
-            </h1>
-            <div className="prose dark:prose-invert max-w-none">
-              <p className="text-gray-700 dark:text-gray-300 mb-4 leading-relaxed">
-                Single-ended queues are used in:
-              </p>
-              <ul className="space-y-2 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-                {application.map((item, index) => (
-                  <li
-                    key={index}
-                    className="text-gray-700 dark:text-gray-300 pl-2"
-                  >
-                    {item.points}
-                  </li>
-                ))}
-              </ul>
-            </div>
-          </section>
+        {/* Applications */}
+        <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>
+            Applications
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <p className="text-gray-700 dark:text-gray-300 mb-4 leading-relaxed">
+              Single-ended queues are used in:
+            </p>
+            <ul className="space-y-2 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {application.map((item, index) => (
+                <li
+                  key={index}
+                  className="text-gray-700 dark:text-gray-300 pl-2"
+                >
+                  {item.points}
+                </li>
+              ))}
+            </ul>
+          </div>
+        </section>
+
+        {/* Comparison with Double-Ended Queue */}
+        <section className="p-6 border-b border-gray-100 dark:border-gray-700">
+          <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
+            <span className="w-1 h-6 bg-blue-500 mr-3 rounded-full"></span>
+            Comparison with Double-Ended Queue
+          </h1>
+          <div className="prose dark:prose-invert max-w-none">
+            <p className="text-gray-700 dark:text-gray-300 mb-4 leading-relaxed">
+              Key differences:
+            </p>
+            <ul className="space-y-2 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+              {differences.map((item, index) => (
+                <li
+                  key={index}
+                  className="text-gray-700 dark:text-gray-300 pl-2"
+                >
+                  {item.points}
+                </li>
+              ))}
+            </ul>
+          </div>
+        </section>
 
-          {/* Comparison with Double-Ended Queue */}
-          <section className="p-6 border-b border-gray-100 dark:border-gray-700">
-            <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
-              <span className="w-1 h-6 bg-blue-500 mr-3 rounded-full"></span>
-              Comparison with Double-Ended Queue
-            </h1>
-            <div className="prose dark:prose-invert max-w-none">
-              <p className="text-gray-700 dark:text-gray-300 mb-4 leading-relaxed">
-                Key differences:
+        {/* 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>
-              <ul className="space-y-2 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
-                {differences.map((item, index) => (
-                  <li
-                    key={index}
-                    className="text-gray-700 dark:text-gray-300 pl-2"
-                  >
-                    {item.points}
-                  </li>
-                ))}
-              </ul>
             </div>
-          </section>
+          </div>
+        </section>
+      </article>
 
-          {/* 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>
-    );
-  };
-  
-  export default content;
\ No newline at end of file
+      {/* 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>
+    </main>
+  );
+};
+
+export default content;
diff --git a/app/visualizer/queue/types/singleEnded/page.jsx b/app/visualizer/queue/types/singleEnded/page.jsx
index 0ff2da3..a7e992f 100755
--- a/app/visualizer/queue/types/singleEnded/page.jsx
+++ b/app/visualizer/queue/types/singleEnded/page.jsx
@@ -1,30 +1,118 @@
 import Animation from "@/app/visualizer/queue/types/singleEnded/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/queue/types/singleEnded/content";
+import Quiz from "@/app/visualizer/queue/types/singleEnded/quiz";
+import Code from "@/app/visualizer/queue/types/singleEnded/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 BackToTop from '@/app/components/ui/backtotop';
 
 export const metadata = {
-    title: 'Single Ended Queue | Learn with JS, C, Python, Java Code',
-    description: 'Understand Single Ended Queue in Data Structures with animations and full code examples in JavaScript, C, Python, and Java. Ideal for beginners learning queue operations and preparing for interviews.',
-    keywords: [
-      'Single Ended Queue',
-      'Single Ended Queue DSA',
-      'Queue Data Structure',
-      'Single Ended Queue in JavaScript',
-      'Single Ended Queue in C',
-      'Single Ended Queue in Python',
-      'Single Ended Queue in Java',
-      'DSA Queue Operations',
-      'Learn Queue DSA',
-      'Queue Code Examples',
-      'DSA Visualizer'
+  title: "Single Ended Queue | Learn with JS, C, Python, Java Code",
+  description:
+    "Understand Single Ended Queue in Data Structures with animations and full code examples in JavaScript, C, Python, and Java. Ideal for beginners learning queue operations and preparing for interviews.",
+  keywords: [
+    "Single Ended Queue",
+    "Single Ended Queue DSA",
+    "Queue Data Structure",
+    "Single Ended Queue in JavaScript",
+    "Single Ended Queue in C",
+    "Single Ended Queue in Python",
+    "Single Ended Queue in Java",
+    "DSA Queue Operations",
+    "Learn Queue DSA",
+    "Queue Code Examples",
+    "DSA Visualizer",
+  ],
+  robots: "index, follow",
+  openGraph: {
+    images: [
+      {
+        url: "/og/queue/singleEnded.png",
+        width: 1200,
+        height: 630,
+        alt: "Single Ended Queue Algorithm Visualization",
+      },
     ],
-    robots: 'index, follow',
-  };
-
-export default function Page(){
-    return(
-      <>
-        <Navbar/>
-        <Animation/>
-      </>
-    );
-};
\ No newline at end of file
+  },
+};
+
+export default function Page() {
+  const paths = [
+    { name: "Home", href: "/" },
+    { name: "Visualizer", href: "/visualizer" },
+    { name: "Queue : Single Ended", href: "" },
+  ];
+
+  return (
+    <>
+      <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">
+                Queue
+              </p>
+            </div>
+            <h1 className="text-4xl md:text-4xl font-bold text-center text-gray-900 dark:text-white mb-0">
+              Single Ended
+            </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">
+          <Animation />
+        </section>
+
+        <section className="px-6">
+          <p className="text-lg text-center text-gray-600 dark:text-gray-400 mb-8">
+            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.singleEnded}
+            title="Single Ended"
+            description="Mark Single Ended Queue as done and view it on your dashboard"
+            initialDone={false}
+          />
+        </section>
+
+        <section className="px-6">
+          <ExploreOther
+          title="Explore Other Types"
+          links={[
+            { text: "Double Ended Queue", url: "./deque" },
+            { text: "Circular Queue", url: "./circular" },
+            { text: "Multiple Queue", url: "./multiple" },
+            { text: "Priority Queue", url: "./priority" },
+          ]}
+        />
+        </section>
+      </div>
+
+      <BackToTop />
+      <Footer />
+    </>
+  );
+}
diff --git a/app/visualizer/queue/types/singleEnded/quiz.jsx b/app/visualizer/queue/types/singleEnded/quiz.jsx
index a4232ec..fe85cb7 100755
--- a/app/visualizer/queue/types/singleEnded/quiz.jsx
+++ b/app/visualizer/queue/types/singleEnded/quiz.jsx
@@ -1,9 +1,10 @@
+"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';
 
 const QueueQuiz = () => {
-const questions = [
+  const questions = [
     {
       question: "What principle does a single-ended queue follow?",
       options: [
@@ -58,63 +59,8 @@ const questions = [
       ],
       correctAnswer: 0,
       explanation: "Both operations are O(1) in a properly implemented queue."
-    },
-    {
-      question: "Which data structure is typically NOT used to implement a queue?",
-      options: [
-        "Linked List",
-        "Array", 
-        "Stack",
-        "Circular Buffer"
-      ],
-      correctAnswer: 2,
-      explanation: "While stacks can be used to simulate queues, they aren't used for direct queue implementation as they follow LIFO."
-    },
-    {
-      question: "What does the isEmpty() operation check?",
-      options: [
-        "If the queue is full",
-        "If the queue has exactly one element", 
-        "If the queue has no elements",
-        "If the queue is implemented correctly"
-      ],
-      correctAnswer: 2,
-      explanation: "isEmpty() returns true when there are no elements in the queue."
-    },
-    {
-      question: "In a linked list implementation, where would you add a new element?",
-      options: [
-        "At the head node",
-        "At the tail node", 
-        "After the middle node",
-        "At any random node"
-      ],
-      correctAnswer: 1,
-      explanation: "New elements are added at the tail (rear) in a queue implementation."
-    },
-    {
-      question: "What is a common application of queues?",
-      options: [
-        "Undo functionality in text editors",
-        "CPU task scheduling", 
-        "Reversing strings",
-        "Recursive function calls"
-      ],
-      correctAnswer: 1,
-      explanation: "Queues are commonly used in CPU scheduling to manage processes in FIFO order."
-    },
-    {
-      question: "How does a single-ended queue differ from a double-ended queue?",
-      options: [
-        "Single-ended allows operations at both ends",
-        "Double-ended allows operations at both ends", 
-        "They are identical",
-        "Single-ended is faster"
-      ],
-      correctAnswer: 1,
-      explanation: "Double-ended queues (deques) allow insertion/removal at both ends, while single-ended queues are restricted to rear insertion and front removal."
     }
-];
+  ];
 
   const [currentQuestion, setCurrentQuestion] = useState(0);
   const [selectedAnswer, setSelectedAnswer] = useState(null);
@@ -122,13 +68,10 @@ const questions = [
   const [showResult, setShowResult] = useState(false);
   const [quizCompleted, setQuizCompleted] = useState(false);
   const [answers, setAnswers] = useState(Array(questions.length).fill(null));
-  const [showExplanation, setShowExplanation] = useState(false);
   const [showIntro, setShowIntro] = useState(true);
   const [showSuccessAnimation, setShowSuccessAnimation] = useState(false);
-  const [penaltyApplied, setPenaltyApplied] = useState(false);
 
   const handleAnswerSelect = (optionIndex) => {
-    if (selectedAnswer !== null) return;
     setSelectedAnswer(optionIndex);
     const newAnswers = [...answers];
     newAnswers[currentQuestion] = optionIndex;
@@ -138,18 +81,9 @@ const questions = [
   const handleNextQuestion = () => {
     if (selectedAnswer === null) return;
     
-    if (showExplanation && !penaltyApplied) {
-      setScore(prevScore => Math.max(0, prevScore - 0.5));
-      setPenaltyApplied(true);
-    }
-
     if (selectedAnswer === questions[currentQuestion].correctAnswer) {
       setScore(score + 1);
     }
-    
-    setShowExplanation(false);
-    setPenaltyApplied(false);
-    
     if (currentQuestion < questions.length - 1) {
       setCurrentQuestion(currentQuestion + 1);
       setSelectedAnswer(null);
@@ -164,7 +98,6 @@ const questions = [
   };
 
   const handlePreviousQuestion = () => {
-    setShowExplanation(false);
     setCurrentQuestion(currentQuestion - 1);
     setSelectedAnswer(answers[currentQuestion - 1]);
   };
@@ -176,38 +109,30 @@ const questions = [
     setShowResult(false);
     setQuizCompleted(false);
     setAnswers(Array(questions.length).fill(null));
-    setShowExplanation(false);
     setShowIntro(true);
-    setPenaltyApplied(false);
   };
 
   const calculateWeakAreas = () => {
     const weakAreas = [];
     if (answers[0] !== questions[0].correctAnswer) {
-      weakAreas.push("understanding the basic principle of Selection Sort");
+      weakAreas.push("understanding FIFO principle");
     }
     if (answers[1] !== questions[1].correctAnswer) {
-      weakAreas.push("time complexity analysis");
+      weakAreas.push("queue insertion point");
     }
     if (answers[2] !== questions[2].correctAnswer) {
-      weakAreas.push("counting swaps in Selection Sort");
+      weakAreas.push("queue removal operations");
     }
     if (answers[3] !== questions[3].correctAnswer) {
-      weakAreas.push("comparison with other simple sorts");
+      weakAreas.push("queue state after operations");
     }
     if (answers[4] !== questions[4].correctAnswer) {
-      weakAreas.push("space complexity");
-    }
-    if (answers[5] !== questions[5].correctAnswer) {
-      weakAreas.push("stability characteristics");
-    }
-    if (answers[6] !== questions[6].correctAnswer) {
-      weakAreas.push("practical applications");
+      weakAreas.push("time complexity analysis");
     }
     
     return weakAreas.length > 0 
       ? `Focus on improving: ${weakAreas.join(', ')}. Review the corresponding sections above.`
-      : "Perfect! You've mastered all Selection Sort concepts!";
+      : "Perfect! You've mastered all Single-Ended Queue concepts!";
   };
 
   const startQuiz = () => {
@@ -224,22 +149,22 @@ const questions = [
   };
 
   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
+        <motion.div 
           initial={{ opacity: 0, y: 20 }}
           animate={{ opacity: 1, y: 0 }}
           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">
-            Queue Quiz Challenge
+            Single-Ended Queue Quiz
           </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>
@@ -274,14 +199,14 @@ const questions = [
           <motion.div
             initial={{ scale: 0 }}
             animate={{ scale: 1 }}
-            transition={{ type: "spring", stiffness: 500, damping: 15 }}
+            transition={{ type: 'spring', stiffness: 500, damping: 15 }}
             className="mb-4"
           >
             <div className="relative">
               <div className="w-24 h-24 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center">
                 <FaCheck className="text-4xl text-green-500 animate-bounce" />
               </div>
-              <motion.div
+              <motion.div 
                 initial={{ scale: 0.5, opacity: 0 }}
                 animate={{ scale: 1.5, opacity: 0 }}
                 transition={{ duration: 1.5, repeat: Infinity }}
@@ -289,7 +214,7 @@ const questions = [
               />
             </div>
           </motion.div>
-          <motion.p
+          <motion.p 
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}
             className="text-xl font-semibold text-gray-700 dark:text-gray-200"
@@ -309,15 +234,13 @@ const questions = [
               </span>
             </div>
             <div className="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
-              <div
-                className="bg-gradient-to-r from-blue-500 to-purple-500 h-2.5 rounded-full transition-all duration-500"
-                style={{
-                  width: `${((currentQuestion + 1) / questions.length) * 100}%`,
-                }}
+              <div 
+                className="bg-gradient-to-r from-blue-500 to-purple-500 h-2.5 rounded-full transition-all duration-500" 
+                style={{ width: `${((currentQuestion + 1) / questions.length) * 100}%` }}
               />
             </div>
           </div>
-
+          
           <motion.div
             key={currentQuestion}
             initial={{ opacity: 0, x: 20 }}
@@ -327,28 +250,26 @@ const questions = [
             <h3 className="text-xl font-semibold mb-6 dark:text-white p-4">
               {questions[currentQuestion].question}
             </h3>
-
+            
             <div className="space-y-3 mb-6">
               {questions[currentQuestion].options.map((option, index) => (
-                <motion.div
+                <motion.div 
                   key={index}
                   whileHover={{ scale: 1.02 }}
                   whileTap={{ scale: 0.98 }}
                   className={`p-4 border rounded-lg cursor-pointer transition-all ${
                     selectedAnswer === index
-                      ? "border-blue-500 bg-blue-50 dark:bg-blue-900/20 shadow-md"
-                      : "border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700"
+                      ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20 shadow-md'
+                      : 'border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700'
                   }`}
                   onClick={() => handleAnswerSelect(index)}
                 >
                   <div className="flex items-center">
-                    <span
-                      className={`font-medium mr-3 w-6 h-6 flex items-center justify-center rounded-full ${
-                        selectedAnswer === index
-                          ? "bg-blue-500 text-white"
-                          : "bg-gray-200 dark:bg-gray-600"
-                      }`}
-                    >
+                    <span className={`font-medium mr-3 w-6 h-6 flex items-center justify-center rounded-full ${
+                      selectedAnswer === index 
+                        ? 'bg-blue-500 text-white' 
+                        : 'bg-gray-200 dark:bg-gray-600'
+                    }`}>
                       {String.fromCharCode(65 + index)}
                     </span>
                     <span>{option}</span>
@@ -356,32 +277,9 @@ const questions = [
                 </motion.div>
               ))}
             </div>
-
-            {selectedAnswer !== null && (
-              <div className="mb-6">
-                <button
-                  onClick={() => setShowExplanation(!showExplanation)}
-                  className="text-sm flex items-center text-blue-600 dark:text-blue-400 hover:underline mb-2"
-                >
-                  <FaInfoCircle className="mr-1" />
-                  {showExplanation ? "Hide Explanation" : "Show Explanation"}
-                </button>
-                <AnimatePresence>
-                  {showExplanation && (
-                    <motion.div
-                      initial={{ opacity: 0, height: 0 }}
-                      animate={{ opacity: 1, height: "auto" }}
-                      exit={{ opacity: 0, height: 0 }}
-                      className="p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg text-sm overflow-hidden"
-                    >
-                      {questions[currentQuestion].explanation}
-                    </motion.div>
-                  )}
-                </AnimatePresence>
-              </div>
-            )}
+            
           </motion.div>
-
+          
           <div className="flex justify-between">
             <button
               onClick={handlePreviousQuestion}
@@ -390,14 +288,13 @@ const questions = [
             >
               <FaArrowLeft className="mr-2" /> Previous
             </button>
-
+            
             <button
               onClick={handleNextQuestion}
               disabled={selectedAnswer === null}
               className="px-4 py-2 bg-blue-600 text-white rounded-lg disabled:opacity-50 hover:from-blue-600 hover:to-purple-600 transition-all flex items-center shadow-md hover:shadow-lg"
             >
-              {currentQuestion === questions.length - 1 ? "Finish" : "Next"}{" "}
-              <FaArrowRight className="ml-2" />
+              {currentQuestion === questions.length - 1 ? 'Finish' : 'Next'} <FaArrowRight className="ml-2" />
             </button>
           </div>
         </div>
@@ -416,84 +313,62 @@ const questions = [
               </div>
               <div className="absolute -bottom-2 left-0 right-0 flex justify-center">
                 {[...Array(5)].map((_, i) => (
-                  <FaStar
+                  <FaStar 
                     key={i}
                     className={`text-2xl mx-1 ${
-                      i < getStarRating()
-                        ? "text-yellow-400 fill-current"
-                        : "text-gray-300 dark:text-gray-600 fill-current"
+                      i < getStarRating() 
+                        ? 'text-yellow-400 fill-current' 
+                        : 'text-gray-300 dark:text-gray-600 fill-current'
                     }`}
                   />
                 ))}
               </div>
             </div>
-
+            
             <h3 className="text-2xl font-bold mb-2 dark:text-white">
-              {score === questions.length
-                ? "Perfect Score!"
-                : score >= questions.length * 0.8
-                ? "Excellent Work!"
-                : score >= questions.length * 0.6
-                ? "Good Job!"
-                : score >= questions.length * 0.4
-                ? "Keep Practicing!"
-                : "Let's Review Again!"}
+              {score === questions.length ? "Perfect Score!" :
+               score >= questions.length * 0.8 ? "Excellent Work!" :
+               score >= questions.length * 0.6 ? "Good Job!" :
+               score >= questions.length * 0.4 ? "Keep Practicing!" : "Let's Review Again!"}
             </h3>
             <p className="text-gray-600 dark:text-gray-400 mb-6">
-              You scored {((score / questions.length) * 100).toFixed(0)}%
-              correct
+              You scored {((score / questions.length) * 100).toFixed(0)}% correct
             </p>
           </div>
-
+          
           <div className="bg-white dark:bg-gray-700 p-4 rounded-lg mb-6 shadow-inner">
             <h4 className="font-bold mb-3 flex items-center text-blue-600 dark:text-blue-400">
               <FaInfoCircle className="mr-2" /> Performance Analysis
             </h4>
             <p className="text-sm">{calculateWeakAreas()}</p>
           </div>
-
+          
           <div className="space-y-4 mb-8">
-            <h4 className="font-bold text-gray-700 dark:text-gray-300">
-              Question Breakdown:
-            </h4>
+            <h4 className="font-bold text-gray-700 dark:text-gray-300">Question Breakdown:</h4>
             {questions.map((q, index) => (
-              <div
-                key={index}
-                className="border-b pb-3 border-gray-200 dark:border-gray-700 last:border-0"
-              >
-                <p className="font-medium text-gray-800 dark:text-gray-200">
-                  {q.question}
-                </p>
-                <div
-                  className={`flex items-start mt-1 ${
-                    answers[index] === q.correctAnswer
-                      ? "text-green-600 dark:text-green-400"
-                      : "text-red-600 dark:text-red-400"
-                  }`}
-                >
+              <div key={index} className="border-b pb-3 border-gray-200 dark:border-gray-700 last:border-0">
+                <p className="font-medium text-gray-800 dark:text-gray-200">{q.question}</p>
+                <div className={`flex items-start mt-1 ${
+                  answers[index] === q.correctAnswer 
+                    ? 'text-green-600 dark:text-green-400' 
+                    : 'text-red-600 dark:text-red-400'
+                }`}>
                   {answers[index] === q.correctAnswer ? (
                     <FaCheck className="mt-1 mr-2 flex-shrink-0" />
                   ) : (
                     <FaTimes className="mt-1 mr-2 flex-shrink-0" />
                   )}
                   <div>
-                    <p className="text-sm">
-                      Your answer:{" "}
-                      {answers[index] !== null
-                        ? q.options[answers[index]]
-                        : "Not answered"}
-                    </p>
+                    <p className="text-sm">Your answer: {answers[index] !== null ? q.options[answers[index]] : "Not answered"}</p>
                     {answers[index] !== q.correctAnswer && (
-                      <p className="text-sm">
-                        Correct answer: {q.options[q.correctAnswer]}
-                      </p>
+                      <p className="text-sm">Correct answer: {q.options[q.correctAnswer]}</p>
                     )}
                   </div>
                 </div>
               </div>
             ))}
           </div>
-
+          
           <button
             onClick={resetQuiz}
             className="w-full px-6 py-3 bg-blue-600 text-white rounded-lg hover:from-blue-700 hover:to-purple-600 transition-all shadow-md hover:shadow-lg flex items-center justify-center"
diff --git a/lib/modulesMap.js b/lib/modulesMap.js
index 24dba01..8bd1c49 100755
--- a/lib/modulesMap.js
+++ b/lib/modulesMap.js
@@ -17,4 +17,7 @@ export const MODULE_MAPS = {
     enqueueDequeue : "0f8a94c9-c8e1-4407-bc03-11fac79e1331",
     peekFront : "77ebf769-59c5-43e6-8b2a-fb8aef51a9ab",
     queueIsEmpty : "ed561422-f566-43e8-b4fd-d73d53d9ab9a",
+    queueIsFull : "381cd781-881e-4060-a6a3-c5d58e36dffa",
+    singleEnded : "e8a2585d-5fb0-4004-bcf6-fd6ee6c4f7f2",
+    doubleEnded : "17db0a89-97ad-470e-809f-f461af6a838d",
 }
\ No newline at end of file