diff --git a/app/components/modules/CodeBlock.jsx b/app/components/modules/CodeBlock.jsx
new file mode 100755
index 0000000..e7a31fa
--- /dev/null
+++ b/app/components/modules/CodeBlock.jsx
@@ -0,0 +1,155 @@
+"use client";
+import { useState } from "react";
+import { FaCopy, FaCheck, FaCode } from "react-icons/fa";
+import { motion, AnimatePresence } from "framer-motion";
+import hljs from "highlight.js";
+import "highlight.js/styles/github.css";
+import "highlight.js/styles/github-dark.css";
+
+const LANGUAGE_NAMES = {
+  javascript: "JavaScript",
+  python: "Python",
+  java: "Java",
+  c: "C",
+  cpp: "C++",
+};
+
+export const highlightCode = (code, language) => {
+  const validLanguage = hljs.getLanguage(language) ? language : "plaintext";
+  return hljs.highlight(code, { language: validLanguage }).value;
+};
+
+const CodeBlock = ({ title, codeExamples }) => {
+  const languageIds = Object.keys(codeExamples);
+  const [selectedLanguage, setSelectedLanguage] = useState(languageIds[0]);
+  const [copied, setCopied] = useState(false);
+  const [isHovered, setIsHovered] = useState(false);
+
+  const copyToClipboard = async (text) => {
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (err) {
+      console.error("Failed to copy text: ", err);
+    }
+  };
+
+  return (
+    <div
+      className="max-w-4xl mx-auto"
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+    >
+      <motion.div
+        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"
+      >
+        {/* 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 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">
+              {title}
+            </h3>
+          </div>
+
+          <motion.button
+            whileHover={{ scale: 1.05 }}
+            whileTap={{ scale: 0.95 }}
+            onClick={() => copyToClipboard(codeExamples[selectedLanguage])}
+            className="flex items-center gap-2 px-3 py-1.5 bg-gray-100 dark:bg-gray-600 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-500 transition-colors text-gray-800 dark:text-gray-100 text-sm font-medium"
+            aria-label="Copy code"
+          >
+            <AnimatePresence mode="wait">
+              {copied ? (
+                <motion.span
+                  key="check"
+                  initial={{ opacity: 0 }}
+                  animate={{ opacity: 1 }}
+                  exit={{ opacity: 0 }}
+                  className="flex items-center text-green-600 dark:text-green-400"
+                >
+                  <FaCheck className="mr-1" /> Copied
+                </motion.span>
+              ) : (
+                <motion.span
+                  key="copy"
+                  initial={{ opacity: 0 }}
+                  animate={{ opacity: 1 }}
+                  exit={{ opacity: 0 }}
+                  className="flex items-center"
+                >
+                  <FaCopy className="mr-1" /> Copy Code
+                </motion.span>
+              )}
+            </AnimatePresence>
+          </motion.button>
+        </div>
+
+        {/* Language Selector */}
+        <div className="px-4 pt-3 pb-2 flex flex-wrap gap-2 border-b border-gray-200 dark:border-gray-700">
+          {languageIds.map((id) => (
+            <motion.button
+              key={id}
+              whileHover={{ scale: 1.03 }}
+              whileTap={{ scale: 0.97 }}
+              onClick={() => setSelectedLanguage(id)}
+              className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-colors ${
+                selectedLanguage === id
+                  ? "bg-blue-500 text-white shadow-md"
+                  : "bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-600"
+              }`}
+            >
+              {LANGUAGE_NAMES[id] || id}
+            </motion.button>
+          ))}
+        </div>
+
+        {/* Code Block */}
+        <div className="relative">
+          <AnimatePresence mode="wait">
+            <motion.div
+              key={selectedLanguage}
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              transition={{ duration: 0.2 }}
+              className="overflow-x-auto p-4 bg-gray-900 text-white"
+            >
+              <pre className="text-sm leading-relaxed">
+                <code
+                  className={`language-${selectedLanguage}`}
+                  dangerouslySetInnerHTML={{
+                    __html: highlightCode(
+                      codeExamples[selectedLanguage],
+                      selectedLanguage
+                    ),
+                  }}
+                />
+              </pre>
+            </motion.div>
+          </AnimatePresence>
+
+          {/* Language indicator (shown on hover) */}
+          <AnimatePresence>
+            {isHovered && (
+              <motion.div
+                initial={{ opacity: 0, y: 10 }}
+                animate={{ opacity: 1, y: 0 }}
+                exit={{ opacity: 0, y: 10 }}
+                className="absolute bottom-3 right-3 px-2 py-1 bg-gray-800 text-gray-300 text-xs rounded-md"
+              >
+                {selectedLanguage.toUpperCase()}
+              </motion.div>
+            )}
+          </AnimatePresence>
+        </div>
+      </motion.div>
+    </div>
+  );
+};
+
+export default CodeBlock;
diff --git a/app/visualizer/linkedList/operations/comparison/animation.jsx b/app/visualizer/linkedList/operations/comparison/animation.jsx
index c6e9bc3..be41ef1 100755
--- a/app/visualizer/linkedList/operations/comparison/animation.jsx
+++ b/app/visualizer/linkedList/operations/comparison/animation.jsx
@@ -1,13 +1,6 @@
 "use client";
 import React, { useState, useRef, useEffect } from 'react';
 import { gsap } from 'gsap';
-import Footer from '@/app/components/footer';
-import ExploreOther from '@/app/components/ui/exploreOther';
-import Content from "@/app/visualizer/linkedList/operations/comparison/content";
-import Quiz from '@/app/visualizer/linkedList/operations/comparison/quiz';
-import CodeBlock from "@/app/visualizer/linkedList/operations/comparison/codeBlock";
-import BackToTop from '@/app/components/ui/backtotop';
-import GoBackButton from "@/app/components/ui/goback";
 
 const LinkedListComparison = () => {
   const [list1, setList1] = useState([]);
@@ -111,17 +104,7 @@ const LinkedListComparison = () => {
   }, [list1, list2]);
 
   return (
-    <div className="min-h-screen bg-gray-100 dark:bg-zinc-950 text-gray-800 dark:text-gray-200 flex flex-col">
-      <main className="container mx-auto px-2 sm:px-6 pt-16 pb-4 flex-1">
-        <div className="mt-8 sm:mt-10">
-          <GoBackButton />
-        </div>
-
-        <h1 className="text-3xl sm:text-4xl mt-6 ml-2 sm:ml-10 font-bold text-left text-gray-900 dark:text-white mb-0">
-          Linked List Comparison
-        </h1>
-        <div className="bg-black dark:bg-gray-600 w-full h-[2px] rounded-xl mt-2 mb-5"></div>
-        <Content />
+    <div className="container mx-auto px-2 sm:px-6 pb-4">
         <p className="text-base sm:text-lg text-center text-gray-600 dark:text-gray-400 mb-8">
           Visualize comparison of two linked lists node by node
         </p>
@@ -273,28 +256,6 @@ const LinkedListComparison = () => {
             </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: "Insertion", url: "./insertion" },
-            { text: "Deletion", url: "./deletion" },
-            { text: "Traversal", url: "./traversal" },
-            { text: "Merging", url: "./merge" },
-            { text: "Searching", url: "./search" },
-            { text: "Reverse", url: "./reverse" },
-          ]}
-        />
-      </main>
-      <BackToTop />
-      <Footer />
     </div>
   );
 };
diff --git a/app/visualizer/linkedList/operations/comparison/data/codeExamples.json b/app/visualizer/linkedList/operations/comparison/code.js
similarity index 96%
rename from app/visualizer/linkedList/operations/comparison/data/codeExamples.json
rename to app/visualizer/linkedList/operations/comparison/code.js
index f968730..2a4032e 100755
--- a/app/visualizer/linkedList/operations/comparison/data/codeExamples.json
+++ b/app/visualizer/linkedList/operations/comparison/code.js
@@ -1,7 +1,9 @@
-{
+const codeExamples = {
   "javascript": "class Node {\n  constructor(data) {\n    this.data = data;\n    this.next = null;\n  }\n}\n\nfunction compareLists(l1, l2) {\n  while (l1 && l2) {\n    if (l1.data !== l2.data) return false;\n    l1 = l1.next;\n    l2 = l2.next;\n  }\n  return l1 === null && l2 === null;\n}",
   "python": "class Node:\n    def __init__(self, data):\n        self.data = data\n        self.next = None\n\ndef compare_lists(l1, l2):\n    while l1 and l2:\n        if l1.data != l2.data:\n            return False\n        l1 = l1.next\n        l2 = l2.next\n    return l1 is None and l2 is None",
   "java": "class Node {\n    int data;\n    Node next;\n    Node(int data) {\n        this.data = data;\n        this.next = null;\n    }\n}\n\npublic class CompareLists {\n    public static boolean compare(Node l1, Node l2) {\n        while (l1 != null && l2 != null) {\n            if (l1.data != l2.data) return false;\n            l1 = l1.next;\n            l2 = l2.next;\n        }\n        return l1 == null && l2 == null;\n    }\n}",
   "c": "#include <stdio.h>\n#include <stdlib.h>\n#include <stdbool.h>\n\ntypedef struct Node {\n    int data;\n    struct Node* next;\n} Node;\n\nbool compareLists(Node* l1, Node* l2) {\n    while (l1 && l2) {\n        if (l1->data != l2->data) return false;\n        l1 = l1->next;\n        l2 = l2->next;\n    }\n    return l1 == NULL && l2 == NULL;\n}",
   "cpp": "#include <iostream>\nusing namespace std;\n\nclass Node {\npublic:\n    int data;\n    Node* next;\n    Node(int d) : data(d), next(nullptr) {}\n};\n\nbool compareLists(Node* l1, Node* l2) {\n    while (l1 && l2) {\n        if (l1->data != l2->data) return false;\n        l1 = l1->next;\n        l2 = l2->next;\n    }\n    return l1 == nullptr && l2 == nullptr;\n}"
-}
\ No newline at end of file
+};
+
+export default codeExamples;
diff --git a/app/visualizer/linkedList/operations/comparison/codeBlock.jsx b/app/visualizer/linkedList/operations/comparison/codeBlock.jsx
deleted file mode 100755
index fbd10bb..0000000
--- a/app/visualizer/linkedList/operations/comparison/codeBlock.jsx
+++ /dev/null
@@ -1,159 +0,0 @@
-'use client';
-import { useState, useRef } from 'react';
-import { FaCopy, FaCheck, FaCode } from 'react-icons/fa';
-import { motion, AnimatePresence } from 'framer-motion';
-import hljs from 'highlight.js';
-import 'highlight.js/styles/github.css';
-import 'highlight.js/styles/github-dark.css';
-import CodeExamples from "@/app/visualizer/linkedList/operations/comparison/data/codeExamples.json";
-
-export const highlightCode = (code, language) => {
-  const validLanguage = hljs.getLanguage(language) ? language : 'plaintext';
-  return hljs.highlight(code, { language: validLanguage }).value;
-};
-
-const CodeBlock = () => {
-  const [selectedLanguage, setSelectedLanguage] = useState("javascript");
-  const [copied, setCopied] = useState(false);
-  const [isHovered, setIsHovered] = useState(false);
-  const topRef = useRef(null);
-
-  const languages = [
-    { id: "javascript", name: "JavaScript" },
-    { id: "python", name: "Python" },
-    { id: "java", name: "Java" },
-    { id: "c", name: "C" },
-    { id: "cpp", name: "C++" },
-  ];
-
-  const copyToClipboard = async (text) => {
-    try {
-      await navigator.clipboard.writeText(text);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    } catch (err) {
-      console.error("Failed to copy text: ", err);
-    }
-  };
-  
-const codeExamples = CodeExamples;
-
-  return (
-       <div
-         className="max-w-4xl mx-auto"
-         ref={topRef}
-         onMouseEnter={() => setIsHovered(true)}
-         onMouseLeave={() => setIsHovered(false)}
-       >
-         <motion.div
-           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"
-         >
-           {/* 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 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">
-                 Linked List Comparison Implementation
-               </h3>
-             </div>
-   
-             <motion.button
-               whileHover={{ scale: 1.05 }}
-               whileTap={{ scale: 0.95 }}
-               onClick={() => copyToClipboard(codeExamples[selectedLanguage])}
-               className="flex items-center gap-2 px-3 py-1.5 bg-gray-100 dark:bg-gray-600 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-500 transition-colors text-gray-800 dark:text-gray-100 text-sm font-medium"
-               aria-label="Copy code"
-             >
-               <AnimatePresence mode="wait">
-                 {copied ? (
-                   <motion.span
-                     key="check"
-                     initial={{ opacity: 0 }}
-                     animate={{ opacity: 1 }}
-                     exit={{ opacity: 0 }}
-                     className="flex items-center text-green-600 dark:text-green-400"
-                   >
-                     <FaCheck className="mr-1" /> Copied
-                   </motion.span>
-                 ) : (
-                   <motion.span
-                     key="copy"
-                     initial={{ opacity: 0 }}
-                     animate={{ opacity: 1 }}
-                     exit={{ opacity: 0 }}
-                     className="flex items-center"
-                   >
-                     <FaCopy className="mr-1" /> Copy Code
-                   </motion.span>
-                 )}
-               </AnimatePresence>
-             </motion.button>
-           </div>
-   
-           {/* Language Selector */}
-           <div className="px-4 pt-3 pb-2 flex flex-wrap gap-2 border-b border-gray-200 dark:border-gray-700">
-             {languages.map((lang) => (
-               <motion.button
-                 key={lang.id}
-                 whileHover={{ scale: 1.03 }}
-                 whileTap={{ scale: 0.97 }}
-                 onClick={() => setSelectedLanguage(lang.id)}
-                 className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-colors ${
-                   selectedLanguage === lang.id
-                     ? "bg-blue-500 text-white shadow-md"
-                     : "bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-600"
-                 }`}
-               >
-                 {lang.name}
-               </motion.button>
-             ))}
-           </div>
-   
-           {/* Code Block */}
-           <div className="relative">
-             <AnimatePresence mode="wait">
-               <motion.div
-                 key={selectedLanguage}
-                 initial={{ opacity: 0 }}
-                 animate={{ opacity: 1 }}
-                 exit={{ opacity: 0 }}
-                 transition={{ duration: 0.2 }}
-                 className="overflow-x-auto p-4 bg-gray-900 text-white"
-               >
-                 <pre className="text-sm leading-relaxed">
-                   <code
-                     className={`language-${selectedLanguage}`}
-                     dangerouslySetInnerHTML={{
-                       __html: highlightCode(
-                         codeExamples[selectedLanguage],
-                         selectedLanguage
-                       ),
-                     }}
-                   />
-                 </pre>
-               </motion.div>
-             </AnimatePresence>
-   
-             {/* Language indicator (shown on hover) */}
-             <AnimatePresence>
-               {isHovered && (
-                 <motion.div
-                   initial={{ opacity: 0, y: 10 }}
-                   animate={{ opacity: 1, y: 0 }}
-                   exit={{ opacity: 0, y: 10 }}
-                   className="absolute bottom-3 right-3 px-2 py-1 bg-gray-800 text-gray-300 text-xs rounded-md"
-                 >
-                   {selectedLanguage.toUpperCase()}
-                 </motion.div>
-               )}
-             </AnimatePresence>
-           </div>
-         </motion.div>
-       </div>
-     );
-   };
-   
-   export default CodeBlock;
\ No newline at end of file
diff --git a/app/visualizer/linkedList/operations/comparison/page.jsx b/app/visualizer/linkedList/operations/comparison/page.jsx
index 8653118..a53535b 100755
--- a/app/visualizer/linkedList/operations/comparison/page.jsx
+++ b/app/visualizer/linkedList/operations/comparison/page.jsx
@@ -3,6 +3,13 @@ import Navbar from "@/app/components/navbarinner";
 import ModuleHeader from "@/app/components/modules/Header";
 import Footer from "@/app/components/footer";
 import BackToTopButton from "@/app/components/ui/backtotop";
+import Content from "@/app/visualizer/linkedList/operations/comparison/content";
+import Quiz from "@/app/visualizer/linkedList/operations/comparison/quiz";
+import CodeBlock from "@/app/components/modules/CodeBlock";
+import codeExamples from "./code";
+import ModuleCard from "@/app/components/ui/ModuleCard";
+import { MODULE_MAPS } from "@/lib/modulesMap";
+import ExploreOther from "@/app/components/ui/exploreOther";
 
 export const metadata = {
     title: 'Linked List Comparison Algorithm | Interactive Visualization & Step-by-Step Guide',
@@ -47,11 +54,46 @@ export default function Page() {
       <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">
           <ModuleHeader category="Operations" title="Comparison" paths={paths} />
+          <Content />
         </section>
 
         <section>
           <Animation />
         </section>
+
+        <section className="px-6">
+          <p className="text-lg text-center text-gray-600 dark:text-gray-400 mb-2">
+            Test Your Knowledge Before Moving Forward!
+          </p>
+          <Quiz />
+        </section>
+
+        <section className="px-6">
+          <CodeBlock title="Linked List Comparison Implementation" codeExamples={codeExamples} />
+        </section>
+
+        <section className="px-6 md:px-12 my-12">
+          <ModuleCard
+            moduleId={MODULE_MAPS.linkedListComparison}
+            title="Comparison"
+            description="Mark Comparison as done and view it on your dashboard"
+            initialDone={false}
+          />
+        </section>
+
+        <section className="px-6">
+          <ExploreOther
+            title="Explore Other Operations"
+            links={[
+              { text: "Insertion", url: "./insertion" },
+              { text: "Deletion", url: "./deletion" },
+              { text: "Traversal", url: "./traversal" },
+              { text: "Merging", url: "./merge" },
+              { text: "Searching", url: "./search" },
+              { text: "Reverse", url: "./reverse" },
+            ]}
+          />
+        </section>
       </div>
 
       <BackToTopButton />
diff --git a/app/visualizer/linkedList/operations/comparison/quiz.jsx b/app/visualizer/linkedList/operations/comparison/quiz.jsx
index c37e51a..dc1fc3d 100755
--- a/app/visualizer/linkedList/operations/comparison/quiz.jsx
+++ b/app/visualizer/linkedList/operations/comparison/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';
diff --git a/app/visualizer/linkedList/operations/deletion/animation.jsx b/app/visualizer/linkedList/operations/deletion/animation.jsx
index 8bf47ab..e245052 100755
--- a/app/visualizer/linkedList/operations/deletion/animation.jsx
+++ b/app/visualizer/linkedList/operations/deletion/animation.jsx
@@ -1,13 +1,6 @@
 "use client";
 import React, { useState, useRef, useEffect } from 'react';
 import { gsap } from 'gsap';
-import Footer from '@/app/components/footer';
-import ExploreOther from '@/app/components/ui/exploreOther';
-import Content from "@/app/visualizer/linkedList/operations/deletion/content";
-import Quiz from '@/app/visualizer/linkedList/operations/deletion/quiz';
-import CodeBlock from "@/app/visualizer/linkedList/operations/deletion/codeBlock";
-import BackToTop from '@/app/components/ui/backtotop';
-import GoBackButton from "@/app/components/ui/goback";
 
 const LinkedListVisualizer = () => {
   const [inputValue, setInputValue] = useState('');
@@ -130,17 +123,7 @@ const LinkedListVisualizer = () => {
   }, [list]);
 
   return (
-    <div className="min-h-screen bg-gray-100 dark:bg-zinc-950 text-gray-800 dark:text-gray-200 flex flex-col">
-      <main className="container mx-auto px-2 sm:px-6 pt-16 pb-4 flex-1">
-        <div className="mt-8 sm:mt-10">
-          <GoBackButton />
-        </div>
-
-        <h1 className="text-3xl sm:text-4xl mt-6 ml-2 sm:ml-10 font-bold text-left text-gray-900 dark:text-white mb-0">
-          Linked List Deletion
-        </h1>
-        <div className="bg-black dark:bg-gray-600 w-full h-[2px] rounded-xl mt-2 mb-5"></div>
-        <Content />
+    <div className="container mx-auto px-2 sm:px-6 pb-4">
         <p className="text-base sm:text-lg text-center text-gray-600 dark:text-gray-400 mb-8">
           Visualize Linked List Deletion Operation
         </p>
@@ -230,26 +213,6 @@ const LinkedListVisualizer = () => {
           )}
         </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: "Insertion", url: "./insertion" },
-            { text: "Searching", url: "./search" },
-            { text: "Merge Lists", url: "./merge" },
-            { text: "Comparison", url: "./comparison" },
-          ]}
-        />
-      </main>
-      <BackToTop />
-      <Footer />
     </div>
   );
 };
diff --git a/app/visualizer/linkedList/operations/deletion/data/codeExamples.json b/app/visualizer/linkedList/operations/deletion/code.js
similarity index 99%
rename from app/visualizer/linkedList/operations/deletion/data/codeExamples.json
rename to app/visualizer/linkedList/operations/deletion/code.js
index 45a5dd1..bf47964 100755
--- a/app/visualizer/linkedList/operations/deletion/data/codeExamples.json
+++ b/app/visualizer/linkedList/operations/deletion/code.js
@@ -1,7 +1,9 @@
-{
+const codeExamples = {
   "javascript": "class SinglyLinkedList {\n  // 1. Delete first node\n  deleteFirst() {\n    if (!this.head) return null;\n    \n    const deletedNode = this.head;\n    this.head = this.head.next;\n    this.size--;\n    return deletedNode.data;\n  }\n\n  // 2. Delete last node\n  deleteLast() {\n    if (!this.head) return null;\n    \n    if (!this.head.next) {\n      const data = this.head.data;\n      this.head = null;\n      this.size--;\n      return data;\n    }\n    \n    let current = this.head;\n    while (current.next.next) {\n      current = current.next;\n    }\n    \n    const data = current.next.data;\n    current.next = null;\n    this.size--;\n    return data;\n  }\n\n  // 3. Delete at specific index\n  deleteAt(index) {\n    if (index < 0 || index >= this.size) return null;\n    if (index === 0) return this.deleteFirst();\n    \n    let current = this.head;\n    for (let i = 0; i < index - 1; i++) {\n      current = current.next;\n    }\n    \n    const deletedNode = current.next;\n    current.next = deletedNode.next;\n    this.size--;\n    return deletedNode.data;\n  }\n\n  // 4. Delete by value (first occurrence)\n  deleteValue(value) {\n    if (!this.head) return null;\n    \n    if (this.head.data === value) {\n      return this.deleteFirst();\n    }\n    \n    let current = this.head;\n    while (current.next && current.next.data !== value) {\n      current = current.next;\n    }\n    \n    if (!current.next) return null;\n    \n    const deletedNode = current.next;\n    current.next = deletedNode.next;\n    this.size--;\n    return deletedNode.data;\n  }\n}",
   "python": "class SinglyLinkedList:\n    # 1. Delete first node\n    def delete_first(self):\n        if not self.head:\n            return None\n            \n        deleted_node = self.head\n        self.head = self.head.next\n        self.size -= 1\n        return deleted_node.data\n    \n    # 2. Delete last node\n    def delete_last(self):\n        if not self.head:\n            return None\n            \n        if not self.head.next:\n            data = self.head.data\n            self.head = None\n            self.size -= 1\n            return data\n            \n        current = self.head\n        while current.next.next:\n            current = current.next\n            \n        data = current.next.data\n        current.next = None\n        self.size -= 1\n        return data\n    \n    # 3. Delete at specific index\n    def delete_at(self, index):\n        if index < 0 or index >= self.size:\n            return None\n        if index == 0:\n            return self.delete_first()\n            \n        current = self.head\n        for _ in range(index - 1):\n            current = current.next\n            \n        deleted_node = current.next\n        current.next = deleted_node.next\n        self.size -= 1\n        return deleted_node.data\n    \n    # 4. Delete by value (first occurrence)\n    def delete_value(self, value):\n        if not self.head:\n            return None\n            \n        if self.head.data == value:\n            return self.delete_first()\n            \n        current = self.head\n        while current.next and current.next.data != value:\n            current = current.next\n            \n        if not current.next:\n            return None\n            \n        deleted_node = current.next\n        current.next = deleted_node.next\n        self.size -= 1\n        return deleted_node.data",
   "java": "public class SinglyLinkedList {\n    // 1. Delete first node\n    public Integer deleteFirst() {\n        if (head == null) return null;\n        \n        int data = head.data;\n        head = head.next;\n        size--;\n        return data;\n    }\n    \n    // 2. Delete last node\n    public Integer deleteLast() {\n        if (head == null) return null;\n        \n        if (head.next == null) {\n            int data = head.data;\n            head = null;\n            size--;\n            return data;\n        }\n        \n        Node current = head;\n        while (current.next.next != null) {\n            current = current.next;\n        }\n        \n        int data = current.next.data;\n        current.next = null;\n        size--;\n        return data;\n    }\n    \n    // 3. Delete at specific index\n    public Integer deleteAt(int index) {\n        if (index < 0 || index >= size) return null;\n        if (index == 0) return deleteFirst();\n        \n        Node current = head;\n        for (int i = 0; i < index - 1; i++) {\n            current = current.next;\n        }\n        \n        int data = current.next.data;\n        current.next = current.next.next;\n        size--;\n        return data;\n    }\n    \n    // 4. Delete by value (first occurrence)\n    public Integer deleteValue(int value) {\n        if (head == null) return null;\n        \n        if (head.data == value) {\n            return deleteFirst();\n        }\n        \n        Node current = head;\n        while (current.next != null && current.next.data != value) {\n            current = current.next;\n        }\n        \n        if (current.next == null) return null;\n        \n        int data = current.next.data;\n        current.next = current.next.next;\n        size--;\n        return data;\n    }\n    \n    // Usage Example\n    public static void main(String[] args) {\n        SinglyLinkedList sll = new SinglyLinkedList();\n        // Example of the insertion for insertion refer insertion article\n        sll.insertLast(100);\n        sll.insertLast(200);\n        sll.insertLast(300);\n        sll.insertLast(400);\n        \n        System.out.println(sll.deleteFirst());  // 100\n        System.out.println(sll.deleteLast());   // 400\n        System.out.println(sll.deleteAt(1));    // 300\n        System.out.println(sll.deleteValue(200)); // 200\n    }\n}",
   "c": "int deleteFirst(SinglyLinkedList* list) {\n    if (list->head == NULL) return -1;\n    \n    Node* temp = list->head;\n    int data = temp->data;\n    list->head = list->head->next;\n    free(temp);\n    list->size--;\n    return data;\n}\n\n// 2. Delete last node\nint deleteLast(SinglyLinkedList* list) {\n    if (list->head == NULL) return -1;\n    \n    if (list->head->next == NULL) {\n        int data = list->head->data;\n        free(list->head);\n        list->head = NULL;\n        list->size--;\n        return data;\n    }\n    \n    Node* current = list->head;\n    while (current->next->next != NULL) {\n        current = current->next;\n    }\n    \n    int data = current->next->data;\n    free(current->next);\n    current->next = NULL;\n    list->size--;\n    return data;\n}\n\n// 3. Delete at specific index\nint deleteAt(SinglyLinkedList* list, int index) {\n    if (index < 0 || index >= list->size) return -1;\n    if (index == 0) return deleteFirst(list);\n    \n    Node* current = list->head;\n    for (int i = 0; i < index - 1; i++) {\n        current = current->next;\n    }\n    \n    Node* temp = current->next;\n    int data = temp->data;\n    current->next = temp->next;\n    free(temp);\n    list->size--;\n    return data;\n}\n\n// 4. Delete by value (first occurrence)\nint deleteValue(SinglyLinkedList* list, int value) {\n    if (list->head == NULL) return -1;\n    \n    if (list->head->data == value) {\n        return deleteFirst(list);\n    }\n    \n    Node* current = list->head;\n    while (current->next != NULL && current->next->data != value) {\n        current = current->next;\n    }\n    \n    if (current->next == NULL) return -1;\n    \n    Node* temp = current->next;\n    int data = temp->data;\n    current->next = temp->next;\n    free(temp);\n    list->size--;\n    return data;\n}",
   "cpp": "public:\n    // 1. Delete first node\n    int deleteFirst() {\n        if (!head) throw std::out_of_range(\"List is empty\");\n        \n        Node* temp = head;\n        int data = temp->data;\n        head = head->next;\n        delete temp;\n        size--;\n        return data;\n    }\n    \n    // 2. Delete last node\n    int deleteLast() {\n        if (!head) throw std::out_of_range(\"List is empty\");\n        \n        if (!head->next) {\n            int data = head->data;\n            delete head;\n            head = nullptr;\n            size--;\n            return data;\n        }\n        \n        Node* current = head;\n        while (current->next->next) {\n            current = current->next;\n        }\n        \n        int data = current->next->data;\n        delete current->next;\n        current->next = nullptr;\n        size--;\n        return data;\n    }\n    \n    // 3. Delete at specific index\n    int deleteAt(int index) {\n        if (index < 0 || index >= size) throw std::out_of_range(\"Index out of range\");\n        if (index == 0) return deleteFirst();\n        \n        Node* current = head;\n        for (int i = 0; i < index - 1; i++) {\n            current = current->next;\n        }\n        \n        Node* temp = current->next;\n        int data = temp->data;\n        current->next = temp->next;\n        delete temp;\n        size--;\n        return data;\n    }\n    \n    // 4. Delete by value (first occurrence)\n    int deleteValue(int value) {\n        if (!head) throw std::out_of_range(\"List is empty\");\n        \n        if (head->data == value) {\n            return deleteFirst();\n        }\n        \n        Node* current = head;\n        while (current->next && current->next->data != value) {\n            current = current->next;\n        }\n        \n        if (!current->next) throw std::out_of_range(\"Value not found\");\n        \n        Node* temp = current->next;\n        int data = temp->data;\n        current->next = temp->next;\n        delete temp;\n        size--;\n        return data;\n    }\n};"
-}
\ No newline at end of file
+};
+
+export default codeExamples;
diff --git a/app/visualizer/linkedList/operations/deletion/codeBlock.jsx b/app/visualizer/linkedList/operations/deletion/codeBlock.jsx
deleted file mode 100755
index 9b0b88b..0000000
--- a/app/visualizer/linkedList/operations/deletion/codeBlock.jsx
+++ /dev/null
@@ -1,159 +0,0 @@
-'use client';
-import { useState, useRef } from 'react';
-import { FaCopy, FaCheck, FaCode } from 'react-icons/fa';
-import { motion, AnimatePresence } from 'framer-motion';
-import hljs from 'highlight.js';
-import 'highlight.js/styles/github.css';
-import 'highlight.js/styles/github-dark.css';
-import CodeExamples from "@/app/visualizer/linkedList/operations/deletion/data/codeExamples.json";
-
-export const highlightCode = (code, language) => {
-  const validLanguage = hljs.getLanguage(language) ? language : 'plaintext';
-  return hljs.highlight(code, { language: validLanguage }).value;
-};
-
-const CodeBlock = () => {
-  const [selectedLanguage, setSelectedLanguage] = useState("javascript");
-  const [copied, setCopied] = useState(false);
-  const [isHovered, setIsHovered] = useState(false);
-  const topRef = useRef(null);
-
-  const languages = [
-    { id: "javascript", name: "JavaScript" },
-    { id: "python", name: "Python" },
-    { id: "java", name: "Java" },
-    { id: "c", name: "C" },
-    { id: "cpp", name: "C++" },
-  ];
-
-  const copyToClipboard = async (text) => {
-    try {
-      await navigator.clipboard.writeText(text);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    } catch (err) {
-      console.error("Failed to copy text: ", err);
-    }
-  };
-  
-const codeExamples = CodeExamples;
-
-  return (
-       <div
-         className="max-w-4xl mx-auto"
-         ref={topRef}
-         onMouseEnter={() => setIsHovered(true)}
-         onMouseLeave={() => setIsHovered(false)}
-       >
-         <motion.div
-           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"
-         >
-           {/* 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 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">
-                 Linked List Deletion Implementation
-               </h3>
-             </div>
-   
-             <motion.button
-               whileHover={{ scale: 1.05 }}
-               whileTap={{ scale: 0.95 }}
-               onClick={() => copyToClipboard(codeExamples[selectedLanguage])}
-               className="flex items-center gap-2 px-3 py-1.5 bg-gray-100 dark:bg-gray-600 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-500 transition-colors text-gray-800 dark:text-gray-100 text-sm font-medium"
-               aria-label="Copy code"
-             >
-               <AnimatePresence mode="wait">
-                 {copied ? (
-                   <motion.span
-                     key="check"
-                     initial={{ opacity: 0 }}
-                     animate={{ opacity: 1 }}
-                     exit={{ opacity: 0 }}
-                     className="flex items-center text-green-600 dark:text-green-400"
-                   >
-                     <FaCheck className="mr-1" /> Copied
-                   </motion.span>
-                 ) : (
-                   <motion.span
-                     key="copy"
-                     initial={{ opacity: 0 }}
-                     animate={{ opacity: 1 }}
-                     exit={{ opacity: 0 }}
-                     className="flex items-center"
-                   >
-                     <FaCopy className="mr-1" /> Copy Code
-                   </motion.span>
-                 )}
-               </AnimatePresence>
-             </motion.button>
-           </div>
-   
-           {/* Language Selector */}
-           <div className="px-4 pt-3 pb-2 flex flex-wrap gap-2 border-b border-gray-200 dark:border-gray-700">
-             {languages.map((lang) => (
-               <motion.button
-                 key={lang.id}
-                 whileHover={{ scale: 1.03 }}
-                 whileTap={{ scale: 0.97 }}
-                 onClick={() => setSelectedLanguage(lang.id)}
-                 className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-colors ${
-                   selectedLanguage === lang.id
-                     ? "bg-blue-500 text-white shadow-md"
-                     : "bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-600"
-                 }`}
-               >
-                 {lang.name}
-               </motion.button>
-             ))}
-           </div>
-   
-           {/* Code Block */}
-           <div className="relative">
-             <AnimatePresence mode="wait">
-               <motion.div
-                 key={selectedLanguage}
-                 initial={{ opacity: 0 }}
-                 animate={{ opacity: 1 }}
-                 exit={{ opacity: 0 }}
-                 transition={{ duration: 0.2 }}
-                 className="overflow-x-auto p-4 bg-gray-900 text-white"
-               >
-                 <pre className="text-sm leading-relaxed">
-                   <code
-                     className={`language-${selectedLanguage}`}
-                     dangerouslySetInnerHTML={{
-                       __html: highlightCode(
-                         codeExamples[selectedLanguage],
-                         selectedLanguage
-                       ),
-                     }}
-                   />
-                 </pre>
-               </motion.div>
-             </AnimatePresence>
-   
-             {/* Language indicator (shown on hover) */}
-             <AnimatePresence>
-               {isHovered && (
-                 <motion.div
-                   initial={{ opacity: 0, y: 10 }}
-                   animate={{ opacity: 1, y: 0 }}
-                   exit={{ opacity: 0, y: 10 }}
-                   className="absolute bottom-3 right-3 px-2 py-1 bg-gray-800 text-gray-300 text-xs rounded-md"
-                 >
-                   {selectedLanguage.toUpperCase()}
-                 </motion.div>
-               )}
-             </AnimatePresence>
-           </div>
-         </motion.div>
-       </div>
-     );
-   };
-   
-   export default CodeBlock;
\ No newline at end of file
diff --git a/app/visualizer/linkedList/operations/deletion/page.jsx b/app/visualizer/linkedList/operations/deletion/page.jsx
index 1823f67..a2d5699 100755
--- a/app/visualizer/linkedList/operations/deletion/page.jsx
+++ b/app/visualizer/linkedList/operations/deletion/page.jsx
@@ -3,6 +3,13 @@ import Navbar from "@/app/components/navbarinner";
 import ModuleHeader from "@/app/components/modules/Header";
 import Footer from "@/app/components/footer";
 import BackToTopButton from "@/app/components/ui/backtotop";
+import Content from "@/app/visualizer/linkedList/operations/deletion/content";
+import Quiz from "@/app/visualizer/linkedList/operations/deletion/quiz";
+import CodeBlock from "@/app/components/modules/CodeBlock";
+import codeExamples from "./code";
+import ModuleCard from "@/app/components/ui/ModuleCard";
+import { MODULE_MAPS } from "@/lib/modulesMap";
+import ExploreOther from "@/app/components/ui/exploreOther";
 
 export const metadata = {
     title: 'Linked List Deletion Algorithm | Interactive Visualization & Step-by-Step Guide',
@@ -47,11 +54,44 @@ export default function Page() {
       <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">
           <ModuleHeader category="Operations" title="Deletion" paths={paths} />
+          <Content />
         </section>
 
         <section>
           <Animation />
         </section>
+
+        <section className="px-6">
+          <p className="text-lg text-center text-gray-600 dark:text-gray-400 mb-2">
+            Test Your Knowledge before moving forward!
+          </p>
+          <Quiz />
+        </section>
+
+        <section className="px-6">
+          <CodeBlock title="Linked List Deletion Implementation" codeExamples={codeExamples} />
+        </section>
+
+        <section className="px-6 md:px-12 my-12">
+          <ModuleCard
+            moduleId={MODULE_MAPS.linkedListDeletion}
+            title="Deletion"
+            description="Mark Deletion as done and view it on your dashboard"
+            initialDone={false}
+          />
+        </section>
+
+        <section className="px-6">
+          <ExploreOther
+            title="Explore Other Types"
+            links={[
+              { text: "Insertion", url: "./insertion" },
+              { text: "Searching", url: "./search" },
+              { text: "Merge Lists", url: "./merge" },
+              { text: "Comparison", url: "./comparison" },
+            ]}
+          />
+        </section>
       </div>
 
       <BackToTopButton />
diff --git a/app/visualizer/linkedList/operations/deletion/quiz.jsx b/app/visualizer/linkedList/operations/deletion/quiz.jsx
index 560356c..e42af0c 100755
--- a/app/visualizer/linkedList/operations/deletion/quiz.jsx
+++ b/app/visualizer/linkedList/operations/deletion/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';
diff --git a/app/visualizer/linkedList/operations/insertion/animation.jsx b/app/visualizer/linkedList/operations/insertion/animation.jsx
index d30d2b0..778f02b 100755
--- a/app/visualizer/linkedList/operations/insertion/animation.jsx
+++ b/app/visualizer/linkedList/operations/insertion/animation.jsx
@@ -1,13 +1,6 @@
 "use client";
 import React, { useState, useRef, useEffect } from 'react';
 import { gsap } from 'gsap';
-import Footer from '@/app/components/footer';
-import ExploreOther from '@/app/components/ui/exploreOther';
-import Content from "@/app/visualizer/linkedList/operations/insertion/content";
-import Quiz from '@/app/visualizer/linkedList/operations/insertion/quiz';
-import CodeBlock from "@/app/visualizer/linkedList/operations/insertion/codeBlock";
-import BackToTop from '@/app/components/ui/backtotop';
-import GoBackButton from "@/app/components/ui/goback";
 
 const LinkedListVisualizer = () => {
   const [inputValue, setInputValue] = useState('');
@@ -113,17 +106,7 @@ const LinkedListVisualizer = () => {
   }, [list]);
 
   return (
-    <div className="min-h-screen bg-gray-100 dark:bg-zinc-950 text-gray-800 dark:text-gray-200 flex flex-col">
-      <main className="container mx-auto px-2 sm:px-6 pt-16 pb-4 flex-1">
-        <div className="mt-8 sm:mt-10">
-          <GoBackButton />
-        </div>
-
-        <h1 className="text-3xl sm:text-4xl mt-6 ml-2 sm:ml-10 font-bold text-left text-gray-900 dark:text-white mb-0">
-          Linked List Insertion
-        </h1>
-        <div className="bg-black dark:bg-gray-600 w-full h-[2px] rounded-xl mt-2 mb-5"></div>
-        <Content />
+    <div className="container mx-auto px-2 sm:px-6 pb-4">
         <p className="text-base sm:text-lg text-center text-gray-600 dark:text-gray-400 mb-8">
           Visualize Linked List Insertion
         </p>
@@ -222,28 +205,6 @@ const LinkedListVisualizer = () => {
               )}
             </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: "Traversal", url: "./traversal" },
-            { text: "Deletion", url: "./deletion" },
-            { text: "Searching", url: "./search" },
-            { text: "Merging", url: "./merge" },
-            { text: "Comparison", url: "./comparison" },
-            { text: "Reverse", url: "./reverse" },
-          ]}
-        />
-      </main>
-      <BackToTop />
-      <Footer />
     </div>
   );
 };
diff --git a/app/visualizer/linkedList/operations/insertion/data/codeExamples.json b/app/visualizer/linkedList/operations/insertion/code.js
similarity index 99%
rename from app/visualizer/linkedList/operations/insertion/data/codeExamples.json
rename to app/visualizer/linkedList/operations/insertion/code.js
index ae27d94..054f34c 100755
--- a/app/visualizer/linkedList/operations/insertion/data/codeExamples.json
+++ b/app/visualizer/linkedList/operations/insertion/code.js
@@ -1,7 +1,9 @@
-{
+const codeExamples = {
   "javascript": "class Node {\n  constructor(data) {\n    this.data = data;\n    this.next = null;\n  }\n}\n\nclass SinglyLinkedList {\n  constructor() {\n    this.head = null;\n    this.size = 0;\n  }\n\n  // 1. Insert at beginning\n  insertFirst(data) {\n    const newNode = new Node(data);\n    newNode.next = this.head;\n    this.head = newNode;\n    this.size++;\n  }\n\n  // 2. Insert at end\n  insertLast(data) {\n    const newNode = new Node(data);\n    \n    if (!this.head) {\n      this.head = newNode;\n    } else {\n      let current = this.head;\n      while (current.next) {\n        current = current.next;\n      }\n      current.next = newNode;\n    }\n    this.size++;\n  }\n\n  // 3. Insert at specific index\n  insertAt(data, index) {\n    if (index < 0 || index > this.size) {\n      console.log(\"Invalid index\");\n      return;\n    }\n    \n    if (index === 0) {\n      this.insertFirst(data);\n      return;\n    }\n    \n    const newNode = new Node(data);\n    let current = this.head;\n    let count = 0;\n    \n    while (count < index - 1) {\n      current = current.next;\n      count++;\n    }\n    \n    newNode.next = current.next;\n    current.next = newNode;\n    this.size++;\n  }\n\n  printList() {\n    let current = this.head;\n    let result = \"\";\n    while (current) {\n      result += current.data + \" -> \";\n      current = current.next;\n    }\n    result += \"null\";\n    console.log(result);\n  }\n}\n\nconst sll = new SinglyLinkedList();\nsll.insertFirst(100);\nsll.insertFirst(200);\nsll.insertLast(300);\nsll.insertAt(500, 1);\nsll.printList();",
   "python": "class Node:\n    def __init__(self, data):\n        self.data = data\n        self.next = None\n\nclass SinglyLinkedList:\n    def __init__(self):\n        self.head = None\n        self.size = 0\n    \n    # 1. Insert at beginning\n    def insert_first(self, data):\n        new_node = Node(data)\n        new_node.next = self.head\n        self.head = new_node\n        self.size += 1\n    \n    # 2. Insert at end\n    def insert_last(self, data):\n        new_node = Node(data)\n        \n        if not self.head:\n            self.head = new_node\n        else:\n            current = self.head\n            while current.next:\n                current = current.next\n            current.next = new_node\n        self.size += 1\n    \n    # 3. Insert at specific index\n    def insert_at(self, data, index):\n        if index < 0 or index > self.size:\n            print(\"Invalid index\")\n            return\n        \n        if index == 0:\n            self.insert_first(data)\n            return\n        \n        new_node = Node(data)\n        current = self.head\n        count = 0\n        \n        # Traverse to the node before the insertion point\n        while count < index - 1:\n            current = current.next\n            count += 1\n        \n        new_node.next = current.next\n        current.next = new_node\n        self.size += 1\n    \n    # Print the list\n    def print_list(self):\n        current = self.head\n        result = []\n        while current:\n            result.append(str(current.data))\n            current = current.next\n        print(\" -> \".join(result) + \" -> None\")\n\n# Usage Example\nsll = SinglyLinkedList()\nsll.insert_first(100)  # List: 100 -> None\nsll.insert_first(200)  # List: 200 -> 100 -> None\nsll.insert_last(300)   # List: 200 -> 100 -> 300 -> None\nsll.insert_at(500, 1)  # List: 200 -> 500 -> 100 -> 300 -> None\nsll.print_list()",
   "java": "public class SinglyLinkedList {\n    private class Node {\n        int data;\n        Node next;\n        \n        Node(int data) {\n            this.data = data;\n            this.next = null;\n        }\n    }\n    \n    private Node head;\n    private int size;\n    \n    public SinglyLinkedList() {\n        head = null;\n        size = 0;\n    }\n    \n    // 1. Insert at beginning\n    public void insertFirst(int data) {\n        Node newNode = new Node(data);\n        newNode.next = head;\n        head = newNode;\n        size++;\n    }\n    \n    // 2. Insert at end\n    public void insertLast(int data) {\n        Node newNode = new Node(data);\n        \n        if (head == null) {\n            head = newNode;\n        } else {\n            Node current = head;\n            while (current.next != null) {\n                current = current.next;\n            }\n            current.next = newNode;\n        }\n        size++;\n    }\n    \n    // 3. Insert at specific index\n    public void insertAt(int data, int index) {\n        if (index < 0 || index > size) {\n            System.out.println(\"Invalid index\");\n            return;\n        }\n        \n        if (index == 0) {\n            insertFirst(data);\n            return;\n        }\n        \n        Node newNode = new Node(data);\n        Node current = head;\n        int count = 0;\n        \n        // Traverse to the node before the insertion point\n        while (count < index - 1) {\n            current = current.next;\n            count++;\n        }\n        \n        newNode.next = current.next;\n        current.next = newNode;\n        size++;\n    }\n    \n    // Print the list\n    public void printList() {\n        Node current = head;\n        while (current != null) {\n            System.out.print(current.data + \" -> \");\n            current = current.next;\n        }\n        System.out.println(\"null\");\n    }\n    \n    // Usage Example\n    public static void main(String[] args) {\n        SinglyLinkedList sll = new SinglyLinkedList();\n        sll.insertFirst(100);  // List: 100 -> null\n        sll.insertFirst(200);  // List: 200 -> 100 -> null\n        sll.insertLast(300);   // List: 200 -> 100 -> 300 -> null\n        sll.insertAt(500, 1);  // List: 200 -> 500 -> 100 -> 300 -> null\n        sll.printList();\n    }\n}",
   "c": "#include <stdio.h>\n#include <stdlib.h>\n\ntypedef struct Node {\n    int data;\n    struct Node* next;\n} Node;\n\ntypedef struct {\n    Node* head;\n    int size;\n} SinglyLinkedList;\n\nvoid initList(SinglyLinkedList* list) {\n    list->head = NULL;\n    list->size = 0;\n}\n\n// 1. Insert at beginning\nvoid insertFirst(SinglyLinkedList* list, int data) {\n    Node* newNode = (Node*)malloc(sizeof(Node));\n    newNode->data = data;\n    newNode->next = list->head;\n    list->head = newNode;\n    list->size++;\n}\n\n// 2. Insert at end\nvoid insertLast(SinglyLinkedList* list, int data) {\n    Node* newNode = (Node*)malloc(sizeof(Node));\n    newNode->data = data;\n    newNode->next = NULL;\n    \n    if (list->head == NULL) {\n        list->head = newNode;\n    } else {\n        Node* current = list->head;\n        while (current->next != NULL) {\n            current = current->next;\n        }\n        current->next = newNode;\n    }\n    list->size++;\n}\n\n// 3. Insert at specific index\nvoid insertAt(SinglyLinkedList* list, int data, int index) {\n    if (index < 0 || index > list->size) {\n        printf(\"Invalid index\\n\");\n        return;\n    }\n    \n    if (index == 0) {\n        insertFirst(list, data);\n        return;\n    }\n    \n    Node* newNode = (Node*)malloc(sizeof(Node));\n    newNode->data = data;\n    \n    Node* current = list->head;\n    int count = 0;\n    \n    // Traverse to the node before the insertion point\n    while (count < index - 1) {\n        current = current->next;\n        count++;\n    }\n    \n    newNode->next = current->next;\n    current->next = newNode;\n    list->size++;\n}\n\n// Print the list\nvoid printList(SinglyLinkedList* list) {\n    Node* current = list->head;\n    while (current != NULL) {\n        printf(\"%d -> \", current->data);\n        current = current->next;\n    }\n    printf(\"NULL\\n\");\n}\n\n// Usage Example\nint main() {\n    SinglyLinkedList list;\n    initList(&list);\n    \n    insertFirst(&list, 100);  // List: 100 -> NULL\n    insertFirst(&list, 200);  // List: 200 -> 100 -> NULL\n    insertLast(&list, 300);   // List: 200 -> 100 -> 300 -> NULL\n    insertAt(&list, 500, 1);  // List: 200 -> 500 -> 100 -> 300 -> NULL\n    printList(&list);\n    \n    return 0;\n}",
   "cpp": "#include <iostream>\nusing namespace std;\n\nclass Node {\npublic:\n    int data;\n    Node* next;\n    \n    Node(int data) : data(data), next(nullptr) {}\n};\n\nclass SinglyLinkedList {\nprivate:\n    Node* head;\n    int size;\n    \npublic:\n    SinglyLinkedList() : head(nullptr), size(0) {}\n    \n    // 1. Insert at beginning\n    void insertFirst(int data) {\n        Node* newNode = new Node(data);\n        newNode->next = head;\n        head = newNode;\n        size++;\n    }\n    \n    // 2. Insert at end\n    void insertLast(int data) {\n        Node* newNode = new Node(data);\n        \n        if (head == nullptr) {\n            head = newNode;\n        } else {\n            Node* current = head;\n            while (current->next != nullptr) {\n                current = current->next;\n            }\n            current->next = newNode;\n        }\n        size++;\n    }\n    \n    // 3. Insert at specific index\n    void insertAt(int data, int index) {\n        if (index < 0 || index > size) {\n            cout << \"Invalid index\" << endl;\n            return;\n        }\n        \n        if (index == 0) {\n            insertFirst(data);\n            return;\n        }\n        \n        Node* newNode = new Node(data);\n        Node* current = head;\n        int count = 0;\n        \n        // Traverse to the node before the insertion point\n        while (count < index - 1) {\n            current = current->next;\n            count++;\n        }\n        \n        newNode->next = current->next;\n        current->next = newNode;\n        size++;\n    }\n    \n    // Print the list\n    void printList() {\n        Node* current = head;\n        while (current != nullptr) {\n            cout << current->data << \" -> \";\n            current = current->next;\n        }\n        cout << \"NULL\" << endl;\n    }\n};\n\n// Usage Example\nint main() {\n    SinglyLinkedList sll;\n    sll.insertFirst(100);  // List: 100 -> NULL\n    sll.insertFirst(200);  // List: 200 -> 100 -> NULL\n    sll.insertLast(300);   // List: 200 -> 100 -> 300 -> NULL\n    sll.insertAt(500, 1);  // List: 200 -> 500 -> 100 -> 300 -> NULL\n    sll.printList();\n    \n    return 0;\n}"
-}
\ No newline at end of file
+};
+
+export default codeExamples;
diff --git a/app/visualizer/linkedList/operations/insertion/codeBlock.jsx b/app/visualizer/linkedList/operations/insertion/codeBlock.jsx
deleted file mode 100755
index 6773c57..0000000
--- a/app/visualizer/linkedList/operations/insertion/codeBlock.jsx
+++ /dev/null
@@ -1,159 +0,0 @@
-'use client';
-import { useState, useRef } from 'react';
-import { FaCopy, FaCheck, FaCode } from 'react-icons/fa';
-import { motion, AnimatePresence } from 'framer-motion';
-import hljs from 'highlight.js';
-import 'highlight.js/styles/github.css';
-import 'highlight.js/styles/github-dark.css';
-import CodeExamples from "@/app/visualizer/linkedList/operations/insertion/data/codeExamples.json";
-
-export const highlightCode = (code, language) => {
-  const validLanguage = hljs.getLanguage(language) ? language : 'plaintext';
-  return hljs.highlight(code, { language: validLanguage }).value;
-};
-
-const CodeBlock = () => {
-  const [selectedLanguage, setSelectedLanguage] = useState("javascript");
-  const [copied, setCopied] = useState(false);
-  const [isHovered, setIsHovered] = useState(false);
-  const topRef = useRef(null);
-
-  const languages = [
-    { id: "javascript", name: "JavaScript" },
-    { id: "python", name: "Python" },
-    { id: "java", name: "Java" },
-    { id: "c", name: "C" },
-    { id: "cpp", name: "C++" },
-  ];
-
-  const copyToClipboard = async (text) => {
-    try {
-      await navigator.clipboard.writeText(text);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    } catch (err) {
-      console.error("Failed to copy text: ", err);
-    }
-  };
-  
-const codeExamples = CodeExamples;
-
-  return (
-       <div
-         className="max-w-4xl mx-auto"
-         ref={topRef}
-         onMouseEnter={() => setIsHovered(true)}
-         onMouseLeave={() => setIsHovered(false)}
-       >
-         <motion.div
-           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"
-         >
-           {/* 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 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">
-                 Linked List Insertion Implementation
-               </h3>
-             </div>
-   
-             <motion.button
-               whileHover={{ scale: 1.05 }}
-               whileTap={{ scale: 0.95 }}
-               onClick={() => copyToClipboard(codeExamples[selectedLanguage])}
-               className="flex items-center gap-2 px-3 py-1.5 bg-gray-100 dark:bg-gray-600 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-500 transition-colors text-gray-800 dark:text-gray-100 text-sm font-medium"
-               aria-label="Copy code"
-             >
-               <AnimatePresence mode="wait">
-                 {copied ? (
-                   <motion.span
-                     key="check"
-                     initial={{ opacity: 0 }}
-                     animate={{ opacity: 1 }}
-                     exit={{ opacity: 0 }}
-                     className="flex items-center text-green-600 dark:text-green-400"
-                   >
-                     <FaCheck className="mr-1" /> Copied
-                   </motion.span>
-                 ) : (
-                   <motion.span
-                     key="copy"
-                     initial={{ opacity: 0 }}
-                     animate={{ opacity: 1 }}
-                     exit={{ opacity: 0 }}
-                     className="flex items-center"
-                   >
-                     <FaCopy className="mr-1" /> Copy Code
-                   </motion.span>
-                 )}
-               </AnimatePresence>
-             </motion.button>
-           </div>
-   
-           {/* Language Selector */}
-           <div className="px-4 pt-3 pb-2 flex flex-wrap gap-2 border-b border-gray-200 dark:border-gray-700">
-             {languages.map((lang) => (
-               <motion.button
-                 key={lang.id}
-                 whileHover={{ scale: 1.03 }}
-                 whileTap={{ scale: 0.97 }}
-                 onClick={() => setSelectedLanguage(lang.id)}
-                 className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-colors ${
-                   selectedLanguage === lang.id
-                     ? "bg-blue-500 text-white shadow-md"
-                     : "bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-600"
-                 }`}
-               >
-                 {lang.name}
-               </motion.button>
-             ))}
-           </div>
-   
-           {/* Code Block */}
-           <div className="relative">
-             <AnimatePresence mode="wait">
-               <motion.div
-                 key={selectedLanguage}
-                 initial={{ opacity: 0 }}
-                 animate={{ opacity: 1 }}
-                 exit={{ opacity: 0 }}
-                 transition={{ duration: 0.2 }}
-                 className="overflow-x-auto p-4 bg-gray-900 text-white"
-               >
-                 <pre className="text-sm leading-relaxed">
-                   <code
-                     className={`language-${selectedLanguage}`}
-                     dangerouslySetInnerHTML={{
-                       __html: highlightCode(
-                         codeExamples[selectedLanguage],
-                         selectedLanguage
-                       ),
-                     }}
-                   />
-                 </pre>
-               </motion.div>
-             </AnimatePresence>
-   
-             {/* Language indicator (shown on hover) */}
-             <AnimatePresence>
-               {isHovered && (
-                 <motion.div
-                   initial={{ opacity: 0, y: 10 }}
-                   animate={{ opacity: 1, y: 0 }}
-                   exit={{ opacity: 0, y: 10 }}
-                   className="absolute bottom-3 right-3 px-2 py-1 bg-gray-800 text-gray-300 text-xs rounded-md"
-                 >
-                   {selectedLanguage.toUpperCase()}
-                 </motion.div>
-               )}
-             </AnimatePresence>
-           </div>
-         </motion.div>
-       </div>
-     );
-   };
-   
-   export default CodeBlock;
\ No newline at end of file
diff --git a/app/visualizer/linkedList/operations/insertion/page.jsx b/app/visualizer/linkedList/operations/insertion/page.jsx
index cf3629e..138087d 100755
--- a/app/visualizer/linkedList/operations/insertion/page.jsx
+++ b/app/visualizer/linkedList/operations/insertion/page.jsx
@@ -3,6 +3,13 @@ import Navbar from "@/app/components/navbarinner";
 import ModuleHeader from "@/app/components/modules/Header";
 import Footer from "@/app/components/footer";
 import BackToTopButton from "@/app/components/ui/backtotop";
+import Content from "@/app/visualizer/linkedList/operations/insertion/content";
+import Quiz from "@/app/visualizer/linkedList/operations/insertion/quiz";
+import CodeBlock from "@/app/components/modules/CodeBlock";
+import codeExamples from "./code";
+import ModuleCard from "@/app/components/ui/ModuleCard";
+import { MODULE_MAPS } from "@/lib/modulesMap";
+import ExploreOther from "@/app/components/ui/exploreOther";
 
 export const metadata = {
     title: 'Linked List Insertion Algorithm | Interactive Visualization & Step-by-Step Guide',
@@ -46,11 +53,46 @@ export default function Page() {
       <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">
           <ModuleHeader category="Operations" title="Insertion" paths={paths} />
+          <Content />
         </section>
 
         <section>
           <Animation />
         </section>
+
+        <section className="px-6">
+          <p className="text-lg text-center text-gray-600 dark:text-gray-400 mb-2">
+            Test Your Knowledge before moving forward!
+          </p>
+          <Quiz />
+        </section>
+
+        <section className="px-6">
+          <CodeBlock title="Linked List Insertion Implementation" codeExamples={codeExamples} />
+        </section>
+
+        <section className="px-6 md:px-12 my-12">
+          <ModuleCard
+            moduleId={MODULE_MAPS.linkedListInsertion}
+            title="Insertion"
+            description="Mark Insertion as done and view it on your dashboard"
+            initialDone={false}
+          />
+        </section>
+
+        <section className="px-6">
+          <ExploreOther
+            title="Explore Other Types"
+            links={[
+              { text: "Traversal", url: "./traversal" },
+              { text: "Deletion", url: "./deletion" },
+              { text: "Searching", url: "./search" },
+              { text: "Merging", url: "./merge" },
+              { text: "Comparison", url: "./comparison" },
+              { text: "Reverse", url: "./reverse" },
+            ]}
+          />
+        </section>
       </div>
 
       <BackToTopButton />
diff --git a/app/visualizer/linkedList/operations/insertion/quiz.jsx b/app/visualizer/linkedList/operations/insertion/quiz.jsx
index 1979a41..9cdb666 100755
--- a/app/visualizer/linkedList/operations/insertion/quiz.jsx
+++ b/app/visualizer/linkedList/operations/insertion/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';
diff --git a/app/visualizer/linkedList/operations/merge/._codeBlock.jsx b/app/visualizer/linkedList/operations/merge/._codeBlock.jsx
deleted file mode 100755
index c6b0cdc..0000000
Binary files a/app/visualizer/linkedList/operations/merge/._codeBlock.jsx and /dev/null differ
diff --git a/app/visualizer/linkedList/operations/merge/animation.jsx b/app/visualizer/linkedList/operations/merge/animation.jsx
index 24fda79..dddbbd8 100755
--- a/app/visualizer/linkedList/operations/merge/animation.jsx
+++ b/app/visualizer/linkedList/operations/merge/animation.jsx
@@ -1,13 +1,6 @@
 "use client";
 import React, { useState, useRef, useEffect } from 'react';
 import { gsap } from 'gsap';
-import Footer from '@/app/components/footer';
-import ExploreOther from '@/app/components/ui/exploreOther';
-import Content from "@/app/visualizer/linkedList/operations/merge/content";
-import Quiz from '@/app/visualizer/linkedList/operations/merge/quiz';
-import CodeBlock from "@/app/visualizer/linkedList/operations/merge/codeBlock";
-import BackToTop from '@/app/components/ui/backtotop';
-import GoBackButton from "@/app/components/ui/goback";
 
 const LinkedListMerge = () => {
   const [list1, setList1] = useState([]);
@@ -185,17 +178,7 @@ const LinkedListMerge = () => {
   }, [list1, list2, mergedList]);
 
   return (
-    <div className="min-h-screen bg-gray-100 dark:bg-zinc-950 text-gray-800 dark:text-gray-200 flex flex-col">
-      <main className="container mx-auto px-2 sm:px-6 pt-16 pb-4 flex-1">
-        <div className="mt-8 sm:mt-10">
-          <GoBackButton />
-        </div>
-
-        <h1 className="text-3xl sm:text-4xl mt-6 ml-2 sm:ml-10 font-bold text-left text-gray-900 dark:text-white mb-0">
-          Linked List Merge
-        </h1>
-        <div className="bg-black dark:bg-gray-600 w-full h-[2px] rounded-xl mt-2 mb-5"></div>
-        <Content />
+    <div className="container mx-auto px-2 sm:px-6 pb-4">
         <p className="text-base sm:text-lg text-center text-gray-600 dark:text-gray-400 mb-8">
           Visualize merging two sorted linked lists
         </p>
@@ -386,28 +369,6 @@ const LinkedListMerge = () => {
             </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: "Insertion", url: "./insertion" },
-            { text: "Deletion", url: "./deletion" },
-            { text: "Traversal", url: "./traversal" },
-            { text: "Comparison", url: "./comparison" },
-            { text: "Searching", url: "./search" },
-            { text: "Reverse", url: "./reverse" },
-          ]}
-        />
-      </main>
-      <BackToTop />
-      <Footer />
     </div>
   );
 };
diff --git a/app/visualizer/linkedList/operations/merge/data/codeExamples.json b/app/visualizer/linkedList/operations/merge/code.js
similarity index 97%
rename from app/visualizer/linkedList/operations/merge/data/codeExamples.json
rename to app/visualizer/linkedList/operations/merge/code.js
index e02e692..76d12b5 100755
--- a/app/visualizer/linkedList/operations/merge/data/codeExamples.json
+++ b/app/visualizer/linkedList/operations/merge/code.js
@@ -1,7 +1,9 @@
-{
+const codeExamples = {
   "javascript": "class Node {\n  constructor(data) {\n    this.data = data;\n    this.next = null;\n  }\n}\n\nfunction mergeLists(l1, l2) {\n  const dummy = new Node(0);\n  let current = dummy;\n\n  while (l1 && l2) {\n    if (l1.data < l2.data) {\n      current.next = l1;\n      l1 = l1.next;\n    } else {\n      current.next = l2;\n      l2 = l2.next;\n    }\n    current = current.next;\n  }\n\n  current.next = l1 || l2;\n  return dummy.next;\n}",
   "python": "class Node:\n    def __init__(self, data):\n        self.data = data\n        self.next = None\n\ndef merge_lists(l1, l2):\n    dummy = Node(0)\n    current = dummy\n\n    while l1 and l2:\n        if l1.data < l2.data:\n            current.next = l1\n            l1 = l1.next\n        else:\n            current.next = l2\n            l2 = l2.next\n        current = current.next\n\n    current.next = l1 or l2\n    return dummy.next",
   "java": "class Node {\n    int data;\n    Node next;\n    Node(int data) {\n        this.data = data;\n        this.next = null;\n    }\n}\n\npublic class MergeLists {\n    public static Node merge(Node l1, Node l2) {\n        Node dummy = new Node(0);\n        Node current = dummy;\n\n        while (l1 != null && l2 != null) {\n            if (l1.data < l2.data) {\n                current.next = l1;\n                l1 = l1.next;\n            } else {\n                current.next = l2;\n                l2 = l2.next;\n            }\n            current = current.next;\n        }\n\n        current.next = (l1 != null) ? l1 : l2;\n        return dummy.next;\n    }\n}",
   "c": "#include <stdio.h>\n#include <stdlib.h>\n\ntypedef struct Node {\n    int data;\n    struct Node* next;\n} Node;\n\nNode* mergeLists(Node* l1, Node* l2) {\n    Node dummy;\n    Node* current = &dummy;\n    dummy.next = NULL;\n\n    while (l1 && l2) {\n        if (l1->data < l2->data) {\n            current->next = l1;\n            l1 = l1->next;\n        } else {\n            current->next = l2;\n            l2 = l2->next;\n        }\n        current = current->next;\n    }\n\n    current->next = l1 ? l1 : l2;\n    return dummy.next;\n}",
   "cpp": "#include <iostream>\nusing namespace std;\n\nclass Node {\npublic:\n    int data;\n    Node* next;\n    Node(int d) : data(d), next(nullptr) {}\n};\n\nNode* mergeLists(Node* l1, Node* l2) {\n    Node dummy(0);\n    Node* current = &dummy;\n\n    while (l1 && l2) {\n        if (l1->data < l2->data) {\n            current->next = l1;\n            l1 = l1->next;\n        } else {\n            current->next = l2;\n            l2 = l2->next;\n        }\n        current = current->next;\n    }\n\n    current->next = l1 ? l1 : l2;\n    return dummy.next;\n}"
-}
\ No newline at end of file
+};
+
+export default codeExamples;
diff --git a/app/visualizer/linkedList/operations/merge/codeBlock.jsx b/app/visualizer/linkedList/operations/merge/codeBlock.jsx
deleted file mode 100755
index bd6a315..0000000
--- a/app/visualizer/linkedList/operations/merge/codeBlock.jsx
+++ /dev/null
@@ -1,159 +0,0 @@
-'use client';
-import { useState, useRef } from 'react';
-import { FaCopy, FaCheck, FaCode } from 'react-icons/fa';
-import { motion, AnimatePresence } from 'framer-motion';
-import hljs from 'highlight.js';
-import 'highlight.js/styles/github.css';
-import 'highlight.js/styles/github-dark.css';
-import CodeExamples from "@/app/visualizer/linkedList/operations/merge/data/codeExamples.json";
-
-export const highlightCode = (code, language) => {
-  const validLanguage = hljs.getLanguage(language) ? language : 'plaintext';
-  return hljs.highlight(code, { language: validLanguage }).value;
-};
-
-const CodeBlock = () => {
-  const [selectedLanguage, setSelectedLanguage] = useState("javascript");
-  const [copied, setCopied] = useState(false);
-  const [isHovered, setIsHovered] = useState(false);
-  const topRef = useRef(null);
-
-  const languages = [
-    { id: "javascript", name: "JavaScript" },
-    { id: "python", name: "Python" },
-    { id: "java", name: "Java" },
-    { id: "c", name: "C" },
-    { id: "cpp", name: "C++" },
-  ];
-
-  const copyToClipboard = async (text) => {
-    try {
-      await navigator.clipboard.writeText(text);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    } catch (err) {
-      console.error("Failed to copy text: ", err);
-    }
-  };
-  
-const codeExamples = CodeExamples;
-
-  return (
-       <div
-         className="max-w-4xl mx-auto"
-         ref={topRef}
-         onMouseEnter={() => setIsHovered(true)}
-         onMouseLeave={() => setIsHovered(false)}
-       >
-         <motion.div
-           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"
-         >
-           {/* 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 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">
-                 Linked List Merging Implementation
-               </h3>
-             </div>
-   
-             <motion.button
-               whileHover={{ scale: 1.05 }}
-               whileTap={{ scale: 0.95 }}
-               onClick={() => copyToClipboard(codeExamples[selectedLanguage])}
-               className="flex items-center gap-2 px-3 py-1.5 bg-gray-100 dark:bg-gray-600 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-500 transition-colors text-gray-800 dark:text-gray-100 text-sm font-medium"
-               aria-label="Copy code"
-             >
-               <AnimatePresence mode="wait">
-                 {copied ? (
-                   <motion.span
-                     key="check"
-                     initial={{ opacity: 0 }}
-                     animate={{ opacity: 1 }}
-                     exit={{ opacity: 0 }}
-                     className="flex items-center text-green-600 dark:text-green-400"
-                   >
-                     <FaCheck className="mr-1" /> Copied
-                   </motion.span>
-                 ) : (
-                   <motion.span
-                     key="copy"
-                     initial={{ opacity: 0 }}
-                     animate={{ opacity: 1 }}
-                     exit={{ opacity: 0 }}
-                     className="flex items-center"
-                   >
-                     <FaCopy className="mr-1" /> Copy Code
-                   </motion.span>
-                 )}
-               </AnimatePresence>
-             </motion.button>
-           </div>
-   
-           {/* Language Selector */}
-           <div className="px-4 pt-3 pb-2 flex flex-wrap gap-2 border-b border-gray-200 dark:border-gray-700">
-             {languages.map((lang) => (
-               <motion.button
-                 key={lang.id}
-                 whileHover={{ scale: 1.03 }}
-                 whileTap={{ scale: 0.97 }}
-                 onClick={() => setSelectedLanguage(lang.id)}
-                 className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-colors ${
-                   selectedLanguage === lang.id
-                     ? "bg-blue-500 text-white shadow-md"
-                     : "bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-600"
-                 }`}
-               >
-                 {lang.name}
-               </motion.button>
-             ))}
-           </div>
-   
-           {/* Code Block */}
-           <div className="relative">
-             <AnimatePresence mode="wait">
-               <motion.div
-                 key={selectedLanguage}
-                 initial={{ opacity: 0 }}
-                 animate={{ opacity: 1 }}
-                 exit={{ opacity: 0 }}
-                 transition={{ duration: 0.2 }}
-                 className="overflow-x-auto p-4 bg-gray-900 text-white"
-               >
-                 <pre className="text-sm leading-relaxed">
-                   <code
-                     className={`language-${selectedLanguage}`}
-                     dangerouslySetInnerHTML={{
-                       __html: highlightCode(
-                         codeExamples[selectedLanguage],
-                         selectedLanguage
-                       ),
-                     }}
-                   />
-                 </pre>
-               </motion.div>
-             </AnimatePresence>
-   
-             {/* Language indicator (shown on hover) */}
-             <AnimatePresence>
-               {isHovered && (
-                 <motion.div
-                   initial={{ opacity: 0, y: 10 }}
-                   animate={{ opacity: 1, y: 0 }}
-                   exit={{ opacity: 0, y: 10 }}
-                   className="absolute bottom-3 right-3 px-2 py-1 bg-gray-800 text-gray-300 text-xs rounded-md"
-                 >
-                   {selectedLanguage.toUpperCase()}
-                 </motion.div>
-               )}
-             </AnimatePresence>
-           </div>
-         </motion.div>
-       </div>
-     );
-   };
-   
-   export default CodeBlock;
\ No newline at end of file
diff --git a/app/visualizer/linkedList/operations/merge/page.jsx b/app/visualizer/linkedList/operations/merge/page.jsx
index aab5ede..d6a7935 100755
--- a/app/visualizer/linkedList/operations/merge/page.jsx
+++ b/app/visualizer/linkedList/operations/merge/page.jsx
@@ -3,6 +3,13 @@ import Navbar from "@/app/components/navbarinner";
 import ModuleHeader from "@/app/components/modules/Header";
 import Footer from "@/app/components/footer";
 import BackToTopButton from "@/app/components/ui/backtotop";
+import Content from "@/app/visualizer/linkedList/operations/merge/content";
+import Quiz from "@/app/visualizer/linkedList/operations/merge/quiz";
+import CodeBlock from "@/app/components/modules/CodeBlock";
+import codeExamples from "./code";
+import ModuleCard from "@/app/components/ui/ModuleCard";
+import { MODULE_MAPS } from "@/lib/modulesMap";
+import ExploreOther from "@/app/components/ui/exploreOther";
 
 export const metadata = {
     title: 'Linked List Merge Algorithm | Interactive Visualization & Step-by-Step Guide',
@@ -47,11 +54,46 @@ export default function Page() {
       <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">
           <ModuleHeader category="Operations" title="Merge" paths={paths} />
+          <Content />
         </section>
 
         <section>
           <Animation />
         </section>
+
+        <section className="px-6">
+          <p className="text-lg text-center text-gray-600 dark:text-gray-400 mb-2">
+            Test Your Knowledge Before Moving Forward!
+          </p>
+          <Quiz />
+        </section>
+
+        <section className="px-6">
+          <CodeBlock title="Linked List Merging Implementation" codeExamples={codeExamples} />
+        </section>
+
+        <section className="px-6 md:px-12 my-12">
+          <ModuleCard
+            moduleId={MODULE_MAPS.linkedListMerge}
+            title="Merge"
+            description="Mark Merge as done and view it on your dashboard"
+            initialDone={false}
+          />
+        </section>
+
+        <section className="px-6">
+          <ExploreOther
+            title="Explore Other Operations"
+            links={[
+              { text: "Insertion", url: "./insertion" },
+              { text: "Deletion", url: "./deletion" },
+              { text: "Traversal", url: "./traversal" },
+              { text: "Comparison", url: "./comparison" },
+              { text: "Searching", url: "./search" },
+              { text: "Reverse", url: "./reverse" },
+            ]}
+          />
+        </section>
       </div>
 
       <BackToTopButton />
diff --git a/app/visualizer/linkedList/operations/merge/quiz.jsx b/app/visualizer/linkedList/operations/merge/quiz.jsx
index 48ff713..3f32258 100755
--- a/app/visualizer/linkedList/operations/merge/quiz.jsx
+++ b/app/visualizer/linkedList/operations/merge/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';
diff --git a/app/visualizer/linkedList/operations/reverse/animation.jsx b/app/visualizer/linkedList/operations/reverse/animation.jsx
index d690ca5..ac1b2b4 100755
--- a/app/visualizer/linkedList/operations/reverse/animation.jsx
+++ b/app/visualizer/linkedList/operations/reverse/animation.jsx
@@ -1,13 +1,6 @@
 "use client";
 import React, { useState, useRef, useEffect } from 'react';
 import { gsap } from 'gsap';
-import Footer from '@/app/components/footer';
-import ExploreOther from '@/app/components/ui/exploreOther';
-import BackToTop from '@/app/components/ui/backtotop';
-import GoBackButton from "@/app/components/ui/goback";
-import Content from "@/app/visualizer/linkedList/operations/reverse/content";
-import Quiz from "@/app/visualizer/linkedList/operations/reverse/quiz";
-import CodeBlock from "@/app/visualizer/linkedList/operations/reverse/codeBlock";
 
 const LinkedListReverse = () => {
   const [list, setList] = useState([]);
@@ -232,18 +225,7 @@ const LinkedListReverse = () => {
   }, [list]);
 
   return (
-    <div className="min-h-screen bg-gray-100 dark:bg-zinc-950 text-gray-800 dark:text-gray-200 flex flex-col">
-      <main className="container mx-auto px-2 sm:px-6 pt-16 pb-4 flex-1">
-        <div className="mt-8 sm:mt-10">
-          <GoBackButton />
-        </div>
-
-        <h1 className="text-3xl sm:text-4xl mt-6 ml-2 sm:ml-10 font-bold text-left text-gray-900 dark:text-white mb-0">
-          Linked List Reverse
-        </h1>
-        <div className="bg-black dark:bg-gray-600 w-full h-[2px] rounded-xl mt-2 mb-5"></div>
-        <Content />
-
+    <div className="container mx-auto px-2 sm:px-6 pb-4">
         <p className="text-base sm:text-lg text-center text-gray-600 dark:text-gray-400 mb-8">
           Visualize reversing a linked list step by step
         </p>
@@ -352,27 +334,6 @@ const LinkedListReverse = () => {
             </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: "Insertion", url: "./insertion" },
-            { text: "Deletion", url: "./deletion" },
-            { text: "Traversal", url: "./traversal" },
-            { text: "Comparison", url: "./comparison" },
-            { text: "Searching", url: "./search" },
-            { text: "Merging", url: "./merge" },
-          ]}
-        />
-      </main>
-      <BackToTop />
-      <Footer />
     </div>
   );
 };
diff --git a/app/visualizer/linkedList/operations/reverse/code.js b/app/visualizer/linkedList/operations/reverse/code.js
new file mode 100755
index 0000000..9269b6e
--- /dev/null
+++ b/app/visualizer/linkedList/operations/reverse/code.js
@@ -0,0 +1,9 @@
+const codeExamples = {
+  "javascript": "class Node {\n  constructor(data) {\n    this.data = data;\n    this.next = null;\n  }\n}\n\nfunction reverseList(head) {\n  let prev = null;\n  let current = head;\n\n  while (current) {\n    let next = current.next;\n    current.next = prev;\n    prev = current;\n    current = next;\n  }\n\n  return prev;\n}",
+  "python": "class Node:\n    def __init__(self, data):\n        self.data = data\n        self.next = None\n\ndef reverse_list(head):\n    prev = None\n    current = head\n\n    while current:\n        next_node = current.next\n        current.next = prev\n        prev = current\n        current = next_node\n\n    return prev",
+  "java": "class Node {\n    int data;\n    Node next;\n    Node(int data) {\n        this.data = data;\n        this.next = null;\n    }\n}\n\npublic class ReverseList {\n    public static Node reverse(Node head) {\n        Node prev = null;\n        Node current = head;\n\n        while (current != null) {\n            Node next = current.next;\n            current.next = prev;\n            prev = current;\n            current = next;\n        }\n\n        return prev;\n    }\n}",
+  "c": "#include <stdio.h>\n#include <stdlib.h>\n\ntypedef struct Node {\n    int data;\n    struct Node* next;\n} Node;\n\nNode* reverseList(Node* head) {\n    Node* prev = NULL;\n    Node* current = head;\n\n    while (current) {\n        Node* next = current->next;\n        current->next = prev;\n        prev = current;\n        current = next;\n    }\n\n    return prev;\n}",
+  "cpp": "#include <iostream>\nusing namespace std;\n\nclass Node {\npublic:\n    int data;\n    Node* next;\n    Node(int d) : data(d), next(nullptr) {}\n};\n\nNode* reverseList(Node* head) {\n    Node* prev = nullptr;\n    Node* current = head;\n\n    while (current) {\n        Node* next = current->next;\n        current->next = prev;\n        prev = current;\n        current = next;\n    }\n\n    return prev;\n}"
+};
+
+export default codeExamples;
diff --git a/app/visualizer/linkedList/operations/reverse/codeBlock.jsx b/app/visualizer/linkedList/operations/reverse/codeBlock.jsx
deleted file mode 100755
index 3e60a92..0000000
--- a/app/visualizer/linkedList/operations/reverse/codeBlock.jsx
+++ /dev/null
@@ -1,159 +0,0 @@
-'use client';
-import { useState, useRef } from 'react';
-import { FaCopy, FaCheck, FaCode } from 'react-icons/fa';
-import { motion, AnimatePresence } from 'framer-motion';
-import hljs from 'highlight.js';
-import 'highlight.js/styles/github.css';
-import 'highlight.js/styles/github-dark.css';
-import CodeExamples from "@/app/visualizer/linkedList/operations/reverse/data/codeExamples.json";
-
-export const highlightCode = (code, language) => {
-  const validLanguage = hljs.getLanguage(language) ? language : 'plaintext';
-  return hljs.highlight(code, { language: validLanguage }).value;
-};
-
-const codeExamples = CodeExamples
-
-const CodeBlock = () => {
-  const [selectedLanguage, setSelectedLanguage] = useState("javascript");
-  const [copied, setCopied] = useState(false);
-  const [isHovered, setIsHovered] = useState(false);
-  const topRef = useRef(null);
-
-  const languages = [
-    { id: "javascript", name: "JavaScript" },
-    { id: "python", name: "Python" },
-    { id: "java", name: "Java" },
-    { id: "c", name: "C" },
-    { id: "cpp", name: "C++" },
-  ];
-
-  const copyToClipboard = async (text) => {
-    try {
-      await navigator.clipboard.writeText(text);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    } catch (err) {
-      console.error("Failed to copy text: ", err);
-    }
-  };
-
-  return (
-       <div
-         className="max-w-4xl mx-auto"
-         ref={topRef}
-         onMouseEnter={() => setIsHovered(true)}
-         onMouseLeave={() => setIsHovered(false)}
-       >
-         <motion.div
-           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"
-         >
-           {/* 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 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">
-                 Linked List Reversal Implementation
-               </h3>
-             </div>
-   
-             <motion.button
-               whileHover={{ scale: 1.05 }}
-               whileTap={{ scale: 0.95 }}
-               onClick={() => copyToClipboard(codeExamples[selectedLanguage])}
-               className="flex items-center gap-2 px-3 py-1.5 bg-gray-100 dark:bg-gray-600 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-500 transition-colors text-gray-800 dark:text-gray-100 text-sm font-medium"
-               aria-label="Copy code"
-             >
-               <AnimatePresence mode="wait">
-                 {copied ? (
-                   <motion.span
-                     key="check"
-                     initial={{ opacity: 0 }}
-                     animate={{ opacity: 1 }}
-                     exit={{ opacity: 0 }}
-                     className="flex items-center text-green-600 dark:text-green-400"
-                   >
-                     <FaCheck className="mr-1" /> Copied
-                   </motion.span>
-                 ) : (
-                   <motion.span
-                     key="copy"
-                     initial={{ opacity: 0 }}
-                     animate={{ opacity: 1 }}
-                     exit={{ opacity: 0 }}
-                     className="flex items-center"
-                   >
-                     <FaCopy className="mr-1" /> Copy Code
-                   </motion.span>
-                 )}
-               </AnimatePresence>
-             </motion.button>
-           </div>
-   
-           {/* Language Selector */}
-           <div className="px-4 pt-3 pb-2 flex flex-wrap gap-2 border-b border-gray-200 dark:border-gray-700">
-             {languages.map((lang) => (
-               <motion.button
-                 key={lang.id}
-                 whileHover={{ scale: 1.03 }}
-                 whileTap={{ scale: 0.97 }}
-                 onClick={() => setSelectedLanguage(lang.id)}
-                 className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-colors ${
-                   selectedLanguage === lang.id
-                     ? "bg-blue-500 text-white shadow-md"
-                     : "bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-600"
-                 }`}
-               >
-                 {lang.name}
-               </motion.button>
-             ))}
-           </div>
-   
-           {/* Code Block */}
-           <div className="relative">
-             <AnimatePresence mode="wait">
-               <motion.div
-                 key={selectedLanguage}
-                 initial={{ opacity: 0 }}
-                 animate={{ opacity: 1 }}
-                 exit={{ opacity: 0 }}
-                 transition={{ duration: 0.2 }}
-                 className="overflow-x-auto p-4 bg-gray-900 text-white"
-               >
-                 <pre className="text-sm leading-relaxed">
-                   <code
-                     className={`language-${selectedLanguage}`}
-                     dangerouslySetInnerHTML={{
-                       __html: highlightCode(
-                         codeExamples[selectedLanguage],
-                         selectedLanguage
-                       ),
-                     }}
-                   />
-                 </pre>
-               </motion.div>
-             </AnimatePresence>
-   
-             {/* Language indicator (shown on hover) */}
-             <AnimatePresence>
-               {isHovered && (
-                 <motion.div
-                   initial={{ opacity: 0, y: 10 }}
-                   animate={{ opacity: 1, y: 0 }}
-                   exit={{ opacity: 0, y: 10 }}
-                   className="absolute bottom-3 right-3 px-2 py-1 bg-gray-800 text-gray-300 text-xs rounded-md"
-                 >
-                   {selectedLanguage.toUpperCase()}
-                 </motion.div>
-               )}
-             </AnimatePresence>
-           </div>
-         </motion.div>
-       </div>
-     );
-   };
-   
-   export default CodeBlock;
\ No newline at end of file
diff --git a/app/visualizer/linkedList/operations/reverse/data/codeExamples.json b/app/visualizer/linkedList/operations/reverse/data/codeExamples.json
deleted file mode 100755
index a3180d1..0000000
--- a/app/visualizer/linkedList/operations/reverse/data/codeExamples.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-    "javascript": "class Node {\n  constructor(data) {\n    this.data = data;\n    this.next = null;\n  }\n}\n\nfunction reverseList(head) {\n  let prev = null;\n  let current = head;\n\n  while (current) {\n    let next = current.next;\n    current.next = prev;\n    prev = current;\n    current = next;\n  }\n\n  return prev;\n}",
-    "python": "class Node:\n    def __init__(self, data):\n        self.data = data\n        self.next = None\n\ndef reverse_list(head):\n    prev = None\n    current = head\n\n    while current:\n        next_node = current.next\n        current.next = prev\n        prev = current\n        current = next_node\n\n    return prev",
-    "java": "class Node {\n    int data;\n    Node next;\n    Node(int data) {\n        this.data = data;\n        this.next = null;\n    }\n}\n\npublic class ReverseList {\n    public static Node reverse(Node head) {\n        Node prev = null;\n        Node current = head;\n\n        while (current != null) {\n            Node next = current.next;\n            current.next = prev;\n            prev = current;\n            current = next;\n        }\n\n        return prev;\n    }\n}",
-    "c": "#include <stdio.h>\n#include <stdlib.h>\n\ntypedef struct Node {\n    int data;\n    struct Node* next;\n} Node;\n\nNode* reverseList(Node* head) {\n    Node* prev = NULL;\n    Node* current = head;\n\n    while (current) {\n        Node* next = current->next;\n        current->next = prev;\n        prev = current;\n        current = next;\n    }\n\n    return prev;\n}",
-    "cpp": "#include <iostream>\nusing namespace std;\n\nclass Node {\npublic:\n    int data;\n    Node* next;\n    Node(int d) : data(d), next(nullptr) {}\n};\n\nNode* reverseList(Node* head) {\n    Node* prev = nullptr;\n    Node* current = head;\n\n    while (current) {\n        Node* next = current->next;\n        current->next = prev;\n        prev = current;\n        current = next;\n    }\n\n    return prev;\n}"
-}
\ No newline at end of file
diff --git a/app/visualizer/linkedList/operations/reverse/page.jsx b/app/visualizer/linkedList/operations/reverse/page.jsx
index 09533e5..12b237b 100755
--- a/app/visualizer/linkedList/operations/reverse/page.jsx
+++ b/app/visualizer/linkedList/operations/reverse/page.jsx
@@ -3,6 +3,13 @@ import Navbar from "@/app/components/navbarinner";
 import ModuleHeader from "@/app/components/modules/Header";
 import Footer from "@/app/components/footer";
 import BackToTopButton from "@/app/components/ui/backtotop";
+import Content from "@/app/visualizer/linkedList/operations/reverse/content";
+import Quiz from "@/app/visualizer/linkedList/operations/reverse/quiz";
+import CodeBlock from "@/app/components/modules/CodeBlock";
+import codeExamples from "./code";
+import ModuleCard from "@/app/components/ui/ModuleCard";
+import { MODULE_MAPS } from "@/lib/modulesMap";
+import ExploreOther from "@/app/components/ui/exploreOther";
 
 export const metadata = {
     title: 'Linked List Reverse Algorithm | Interactive Visualization & Step-by-Step Guide',
@@ -47,11 +54,46 @@ export default function Page() {
       <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">
           <ModuleHeader category="Operations" title="Reverse" paths={paths} />
+          <Content />
         </section>
 
         <section>
           <Animation />
         </section>
+
+        <section className="px-6">
+          <p className="text-lg text-center text-gray-600 dark:text-gray-400 mb-2">
+            Test Your Knowledge Before Moving Forward!
+          </p>
+          <Quiz />
+        </section>
+
+        <section className="px-6">
+          <CodeBlock title="Linked List Reversal Implementation" codeExamples={codeExamples} />
+        </section>
+
+        <section className="px-6 md:px-12 my-12">
+          <ModuleCard
+            moduleId={MODULE_MAPS.linkedListReverse}
+            title="Reverse"
+            description="Mark Reverse as done and view it on your dashboard"
+            initialDone={false}
+          />
+        </section>
+
+        <section className="px-6">
+          <ExploreOther
+            title="Explore Other Operations"
+            links={[
+              { text: "Insertion", url: "./insertion" },
+              { text: "Deletion", url: "./deletion" },
+              { text: "Traversal", url: "./traversal" },
+              { text: "Comparison", url: "./comparison" },
+              { text: "Searching", url: "./search" },
+              { text: "Merging", url: "./merge" },
+            ]}
+          />
+        </section>
       </div>
 
       <BackToTopButton />
diff --git a/app/visualizer/linkedList/operations/reverse/quiz.jsx b/app/visualizer/linkedList/operations/reverse/quiz.jsx
index 35ebd0a..e932254 100755
--- a/app/visualizer/linkedList/operations/reverse/quiz.jsx
+++ b/app/visualizer/linkedList/operations/reverse/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';
diff --git a/app/visualizer/linkedList/operations/traversal/animation.jsx b/app/visualizer/linkedList/operations/traversal/animation.jsx
index b45cf7a..b13ef02 100755
--- a/app/visualizer/linkedList/operations/traversal/animation.jsx
+++ b/app/visualizer/linkedList/operations/traversal/animation.jsx
@@ -1,13 +1,6 @@
 "use client";
 import React, { useState, useRef, useEffect } from 'react';
 import { gsap } from 'gsap';
-import Footer from '@/app/components/footer';
-import ExploreOther from '@/app/components/ui/exploreOther';
-import Content from "@/app/visualizer/linkedList/operations/traversal/content";
-import Quiz from '@/app/visualizer/linkedList/operations/traversal/quiz';
-import CodeBlock from "@/app/visualizer/linkedList/operations/traversal/codeBlock";
-import BackToTop from '@/app/components/ui/backtotop';
-import GoBackButton from "@/app/components/ui/goback";
 
 const LinkedListTraversal = () => {
   const [list, setList] = useState([]);
@@ -138,17 +131,7 @@ const LinkedListTraversal = () => {
   }, [list]);
 
   return (
-    <div className="min-h-screen bg-gray-100 dark:bg-zinc-950 text-gray-800 dark:text-gray-200 flex flex-col">
-      <main className="container mx-auto px-2 sm:px-6 pt-16 pb-4 flex-1">
-        <div className="mt-8 sm:mt-10">
-          <GoBackButton />
-        </div>
-
-        <h1 className="text-3xl sm:text-4xl mt-6 ml-2 sm:ml-10 font-bold text-left text-gray-900 dark:text-white mb-0">
-          Linked List Traversal
-        </h1>
-        <div className="bg-black dark:bg-gray-600 w-full h-[2px] rounded-xl mt-2 mb-5"></div>
-        <Content />
+    <div className="container mx-auto px-2 sm:px-6 pb-4">
         <p className="text-base sm:text-lg text-center text-gray-600 dark:text-gray-400 mb-8">
           Visualize how we traverse through each node in a linked list
         </p>
@@ -277,28 +260,6 @@ const LinkedListTraversal = () => {
             )}
           </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: "Insertion", url: "./insertion" },
-            { text: "Deletion", url: "./deletion" },
-            { text: "Compare", url: "./comparison" },
-            { text: "Merge", url: "./merge" },
-            { text: "Searching", url: "./search" },
-            { text: "Reverse", url: "./reverse" },
-          ]}
-        />
-      </main>
-      <BackToTop />
-      <Footer />
     </div>
   );
 };
diff --git a/app/visualizer/linkedList/operations/traversal/data/codeExamples.json b/app/visualizer/linkedList/operations/traversal/code.js
similarity index 97%
rename from app/visualizer/linkedList/operations/traversal/data/codeExamples.json
rename to app/visualizer/linkedList/operations/traversal/code.js
index d9544fe..3b86fdd 100755
--- a/app/visualizer/linkedList/operations/traversal/data/codeExamples.json
+++ b/app/visualizer/linkedList/operations/traversal/code.js
@@ -1,7 +1,9 @@
-{
+const codeExamples = {
   "javascript": "class Node {\n  constructor(data) {\n    this.data = data;\n    this.next = null;\n  }\n}\n\nfunction traverse(head) {\n  let current = head;\n  while (current) {\n    console.log(current.data);\n    current = current.next;\n  }\n}\n\nlet head = new Node(1);\nhead.next = new Node(2);\nhead.next.next = new Node(3);\ntraverse(head);",
   "python": "class Node:\n    def __init__(self, data):\n        self.data = data\n        self.next = None\n\ndef traverse(head):\n    current = head\n    while current:\n        print(current.data)\n        current = current.next\n\nhead = Node(1)\nhead.next = Node(2)\nhead.next.next = Node(3)\ntraverse(head)",
   "java": "class Node {\n    int data;\n    Node next;\n    Node(int data) {\n        this.data = data;\n        this.next = null;\n    }\n}\n\npublic class Main {\n    public static void traverse(Node head) {\n        Node current = head;\n        while (current != null) {\n            System.out.println(current.data);\n            current = current.next;\n        }\n    }\n\n    public static void main(String[] args) {\n        Node head = new Node(1);\n        head.next = new Node(2);\n        head.next.next = new Node(3);\n        traverse(head);\n    }\n}",
   "c": "#include <stdio.h>\n#include <stdlib.h>\n\nstruct Node {\n    int data;\n    struct Node* next;\n};\n\nvoid traverse(struct Node* head) {\n    struct Node* current = head;\n    while (current != NULL) {\n        printf(\"%d\\n\", current->data);\n        current = current->next;\n    }\n}\n\nint main() {\n    struct node * head = (struct node *)malloc(sizeof(struct node));\n    struct node * second = (struct node *)malloc(sizeof(struct node));\n    struct node * third = (struct node *)malloc(sizeof(struct node));\n\n    head->data = 1;\n    head->next = second;\n    second->data = 2;\n    second->next = third;\n    third->data = 3;\n    third->next = NULL;\n\n    traverse(head);\n\n    return 0;\n}",
   "cpp": "#include <iostream>\nusing namespace std;\n\nclass Node {\npublic:\n    int data;\n    Node* next;\n    Node(int data) : data(data), next(nullptr) {}\n};\n\nvoid traverse(Node* head) {\n    Node* current = head;\n    while (current != nullptr) {\n        cout << current->data << endl;\n        current = current->next;\n    }\n}\n\nint main() {\n    Node* head = new Node(1);\n    head->next = new Node(2);\n    head->next->next = new Node(3);\n    traverse(head);\n\n    // Free memory\n    Node* temp;\n    while (head != nullptr) {\n        temp = head;\n        head = head->next;\n        delete temp;\n    }\n\n    return 0;\n}"
-}
\ No newline at end of file
+};
+
+export default codeExamples;
diff --git a/app/visualizer/linkedList/operations/traversal/codeBlock.jsx b/app/visualizer/linkedList/operations/traversal/codeBlock.jsx
deleted file mode 100755
index 2c401ea..0000000
--- a/app/visualizer/linkedList/operations/traversal/codeBlock.jsx
+++ /dev/null
@@ -1,159 +0,0 @@
-'use client';
-import { useState, useRef } from 'react';
-import { FaCopy, FaCheck, FaCode } from 'react-icons/fa';
-import { motion, AnimatePresence } from 'framer-motion';
-import hljs from 'highlight.js';
-import 'highlight.js/styles/github.css';
-import 'highlight.js/styles/github-dark.css';
-import CodeExamples from "@/app/visualizer/linkedList/operations/traversal/data/codeExamples.json"
-
-export const highlightCode = (code, language) => {
-  const validLanguage = hljs.getLanguage(language) ? language : 'plaintext';
-  return hljs.highlight(code, { language: validLanguage }).value;
-};
-
-const CodeBlock = () => {
-  const [selectedLanguage, setSelectedLanguage] = useState("javascript");
-  const [copied, setCopied] = useState(false);
-  const [isHovered, setIsHovered] = useState(false);
-  const topRef = useRef(null);
-
-  const languages = [
-    { id: "javascript", name: "JavaScript" },
-    { id: "python", name: "Python" },
-    { id: "java", name: "Java" },
-    { id: "c", name: "C" },
-    { id: "cpp", name: "C++" },
-  ];
-
-  const copyToClipboard = async (text) => {
-    try {
-      await navigator.clipboard.writeText(text);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    } catch (err) {
-      console.error("Failed to copy text: ", err);
-    }
-  };
-  
-const codeExamples = CodeExamples;
-
-  return (
-       <div
-         className="max-w-4xl mx-auto"
-         ref={topRef}
-         onMouseEnter={() => setIsHovered(true)}
-         onMouseLeave={() => setIsHovered(false)}
-       >
-         <motion.div
-           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"
-         >
-           {/* 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 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">
-                 Linked List Insertion Implementation
-               </h3>
-             </div>
-   
-             <motion.button
-               whileHover={{ scale: 1.05 }}
-               whileTap={{ scale: 0.95 }}
-               onClick={() => copyToClipboard(codeExamples[selectedLanguage])}
-               className="flex items-center gap-2 px-3 py-1.5 bg-gray-100 dark:bg-gray-600 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-500 transition-colors text-gray-800 dark:text-gray-100 text-sm font-medium"
-               aria-label="Copy code"
-             >
-               <AnimatePresence mode="wait">
-                 {copied ? (
-                   <motion.span
-                     key="check"
-                     initial={{ opacity: 0 }}
-                     animate={{ opacity: 1 }}
-                     exit={{ opacity: 0 }}
-                     className="flex items-center text-green-600 dark:text-green-400"
-                   >
-                     <FaCheck className="mr-1" /> Copied
-                   </motion.span>
-                 ) : (
-                   <motion.span
-                     key="copy"
-                     initial={{ opacity: 0 }}
-                     animate={{ opacity: 1 }}
-                     exit={{ opacity: 0 }}
-                     className="flex items-center"
-                   >
-                     <FaCopy className="mr-1" /> Copy Code
-                   </motion.span>
-                 )}
-               </AnimatePresence>
-             </motion.button>
-           </div>
-   
-           {/* Language Selector */}
-           <div className="px-4 pt-3 pb-2 flex flex-wrap gap-2 border-b border-gray-200 dark:border-gray-700">
-             {languages.map((lang) => (
-               <motion.button
-                 key={lang.id}
-                 whileHover={{ scale: 1.03 }}
-                 whileTap={{ scale: 0.97 }}
-                 onClick={() => setSelectedLanguage(lang.id)}
-                 className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-colors ${
-                   selectedLanguage === lang.id
-                     ? "bg-blue-500 text-white shadow-md"
-                     : "bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-600"
-                 }`}
-               >
-                 {lang.name}
-               </motion.button>
-             ))}
-           </div>
-   
-           {/* Code Block */}
-           <div className="relative">
-             <AnimatePresence mode="wait">
-               <motion.div
-                 key={selectedLanguage}
-                 initial={{ opacity: 0 }}
-                 animate={{ opacity: 1 }}
-                 exit={{ opacity: 0 }}
-                 transition={{ duration: 0.2 }}
-                 className="overflow-x-auto p-4 bg-gray-900 text-white"
-               >
-                 <pre className="text-sm leading-relaxed">
-                   <code
-                     className={`language-${selectedLanguage}`}
-                     dangerouslySetInnerHTML={{
-                       __html: highlightCode(
-                         codeExamples[selectedLanguage],
-                         selectedLanguage
-                       ),
-                     }}
-                   />
-                 </pre>
-               </motion.div>
-             </AnimatePresence>
-   
-             {/* Language indicator (shown on hover) */}
-             <AnimatePresence>
-               {isHovered && (
-                 <motion.div
-                   initial={{ opacity: 0, y: 10 }}
-                   animate={{ opacity: 1, y: 0 }}
-                   exit={{ opacity: 0, y: 10 }}
-                   className="absolute bottom-3 right-3 px-2 py-1 bg-gray-800 text-gray-300 text-xs rounded-md"
-                 >
-                   {selectedLanguage.toUpperCase()}
-                 </motion.div>
-               )}
-             </AnimatePresence>
-           </div>
-         </motion.div>
-       </div>
-     );
-   };
-   
-   export default CodeBlock;
\ No newline at end of file
diff --git a/app/visualizer/linkedList/operations/traversal/page.jsx b/app/visualizer/linkedList/operations/traversal/page.jsx
index 992277a..91e8880 100755
--- a/app/visualizer/linkedList/operations/traversal/page.jsx
+++ b/app/visualizer/linkedList/operations/traversal/page.jsx
@@ -3,6 +3,13 @@ import Navbar from "@/app/components/navbarinner";
 import ModuleHeader from "@/app/components/modules/Header";
 import Footer from "@/app/components/footer";
 import BackToTopButton from "@/app/components/ui/backtotop";
+import Content from "@/app/visualizer/linkedList/operations/traversal/content";
+import Quiz from "@/app/visualizer/linkedList/operations/traversal/quiz";
+import CodeBlock from "@/app/components/modules/CodeBlock";
+import codeExamples from "./code";
+import ModuleCard from "@/app/components/ui/ModuleCard";
+import { MODULE_MAPS } from "@/lib/modulesMap";
+import ExploreOther from "@/app/components/ui/exploreOther";
 
 export const metadata = {
     title: 'Linked List Traversal Algorithm | Interactive Visualization & Step-by-Step Guide',
@@ -46,11 +53,46 @@ export default function Page() {
       <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">
           <ModuleHeader category="Operations" title="Traversal" paths={paths} />
+          <Content />
         </section>
 
         <section>
           <Animation />
         </section>
+
+        <section className="px-6">
+          <p className="text-lg text-center text-gray-600 dark:text-gray-400 mb-2">
+            Test Your Knowledge before moving forward!
+          </p>
+          <Quiz />
+        </section>
+
+        <section className="px-6">
+          <CodeBlock title="Linked List Traversal Implementation" codeExamples={codeExamples} />
+        </section>
+
+        <section className="px-6 md:px-12 my-12">
+          <ModuleCard
+            moduleId={MODULE_MAPS.linkedListTraversal}
+            title="Linked List Traversal"
+            description="Mark Linked List Traversal as done and view it on your dashboard"
+            initialDone={false}
+          />
+        </section>
+
+        <section className="px-6">
+          <ExploreOther
+            title="Explore Other Operations"
+            links={[
+              { text: "Insertion", url: "./insertion" },
+              { text: "Deletion", url: "./deletion" },
+              { text: "Compare", url: "./comparison" },
+              { text: "Merge", url: "./merge" },
+              { text: "Searching", url: "./search" },
+              { text: "Reverse", url: "./reverse" },
+            ]}
+          />
+        </section>
       </div>
 
       <BackToTopButton />
diff --git a/app/visualizer/linkedList/operations/traversal/quiz.jsx b/app/visualizer/linkedList/operations/traversal/quiz.jsx
index 8508dcd..0860c22 100755
--- a/app/visualizer/linkedList/operations/traversal/quiz.jsx
+++ b/app/visualizer/linkedList/operations/traversal/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';
diff --git a/app/visualizer/linkedList/types/circular/codeBlock.jsx b/app/visualizer/linkedList/types/circular/code.js
similarity index 79%
rename from app/visualizer/linkedList/types/circular/codeBlock.jsx
rename to app/visualizer/linkedList/types/circular/code.js
index 5ebcab2..1bef04d 100755
--- a/app/visualizer/linkedList/types/circular/codeBlock.jsx
+++ b/app/visualizer/linkedList/types/circular/code.js
@@ -1,40 +1,3 @@
-'use client';
-import { useState, useRef } from 'react';
-import { FaCopy, FaCheck, FaCode } from 'react-icons/fa';
-import { motion, AnimatePresence } from 'framer-motion';
-import hljs from 'highlight.js';
-import 'highlight.js/styles/github.css';
-import 'highlight.js/styles/github-dark.css';
-
-export const highlightCode = (code, language) => {
-  const validLanguage = hljs.getLanguage(language) ? language : 'plaintext';
-  return hljs.highlight(code, { language: validLanguage }).value;
-};
-
-const CodeBlock = () => {
-  const [selectedLanguage, setSelectedLanguage] = useState("javascript");
-  const [copied, setCopied] = useState(false);
-  const [isHovered, setIsHovered] = useState(false);
-  const topRef = useRef(null);
-
-  const languages = [
-    { id: "javascript", name: "JavaScript" },
-    { id: "python", name: "Python" },
-    { id: "java", name: "Java" },
-    { id: "c", name: "C" },
-    { id: "cpp", name: "C++" },
-  ];
-
-  const copyToClipboard = async (text) => {
-    try {
-      await navigator.clipboard.writeText(text);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    } catch (err) {
-      console.error("Failed to copy text: ", err);
-    }
-  };
-  
 const codeExamples = {
   javascript: `// Circular Linked List Implementation in JavaScript
 class Node {
@@ -1031,122 +994,4 @@ int main() {
 }`
 };
 
-  return (
-       <div
-         className="max-w-4xl mx-auto"
-         ref={topRef}
-         onMouseEnter={() => setIsHovered(true)}
-         onMouseLeave={() => setIsHovered(false)}
-       >
-         <motion.div
-           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"
-         >
-           {/* 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 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">
-                 Circular Linked List Implementation
-               </h3>
-             </div>
-   
-             <motion.button
-               whileHover={{ scale: 1.05 }}
-               whileTap={{ scale: 0.95 }}
-               onClick={() => copyToClipboard(codeExamples[selectedLanguage])}
-               className="flex items-center gap-2 px-3 py-1.5 bg-gray-100 dark:bg-gray-600 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-500 transition-colors text-gray-800 dark:text-gray-100 text-sm font-medium"
-               aria-label="Copy code"
-             >
-               <AnimatePresence mode="wait">
-                 {copied ? (
-                   <motion.span
-                     key="check"
-                     initial={{ opacity: 0 }}
-                     animate={{ opacity: 1 }}
-                     exit={{ opacity: 0 }}
-                     className="flex items-center text-green-600 dark:text-green-400"
-                   >
-                     <FaCheck className="mr-1" /> Copied
-                   </motion.span>
-                 ) : (
-                   <motion.span
-                     key="copy"
-                     initial={{ opacity: 0 }}
-                     animate={{ opacity: 1 }}
-                     exit={{ opacity: 0 }}
-                     className="flex items-center"
-                   >
-                     <FaCopy className="mr-1" /> Copy Code
-                   </motion.span>
-                 )}
-               </AnimatePresence>
-             </motion.button>
-           </div>
-   
-           {/* Language Selector */}
-           <div className="px-4 pt-3 pb-2 flex flex-wrap gap-2 border-b border-gray-200 dark:border-gray-700">
-             {languages.map((lang) => (
-               <motion.button
-                 key={lang.id}
-                 whileHover={{ scale: 1.03 }}
-                 whileTap={{ scale: 0.97 }}
-                 onClick={() => setSelectedLanguage(lang.id)}
-                 className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-colors ${
-                   selectedLanguage === lang.id
-                     ? "bg-blue-500 text-white shadow-md"
-                     : "bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-600"
-                 }`}
-               >
-                 {lang.name}
-               </motion.button>
-             ))}
-           </div>
-   
-           {/* Code Block */}
-           <div className="relative">
-             <AnimatePresence mode="wait">
-               <motion.div
-                 key={selectedLanguage}
-                 initial={{ opacity: 0 }}
-                 animate={{ opacity: 1 }}
-                 exit={{ opacity: 0 }}
-                 transition={{ duration: 0.2 }}
-                 className="overflow-x-auto p-4 bg-gray-900 text-white"
-               >
-                 <pre className="text-sm leading-relaxed">
-                   <code
-                     className={`language-${selectedLanguage}`}
-                     dangerouslySetInnerHTML={{
-                       __html: highlightCode(
-                         codeExamples[selectedLanguage],
-                         selectedLanguage
-                       ),
-                     }}
-                   />
-                 </pre>
-               </motion.div>
-             </AnimatePresence>
-   
-             {/* Language indicator (shown on hover) */}
-             <AnimatePresence>
-               {isHovered && (
-                 <motion.div
-                   initial={{ opacity: 0, y: 10 }}
-                   animate={{ opacity: 1, y: 0 }}
-                   exit={{ opacity: 0, y: 10 }}
-                   className="absolute bottom-3 right-3 px-2 py-1 bg-gray-800 text-gray-300 text-xs rounded-md"
-                 >
-                   {selectedLanguage.toUpperCase()}
-                 </motion.div>
-               )}
-             </AnimatePresence>
-           </div>
-         </motion.div>
-       </div>
-     );
-   };
-   
-   export default CodeBlock;
\ No newline at end of file
+export default codeExamples;
diff --git a/app/visualizer/linkedList/types/circular/page.jsx b/app/visualizer/linkedList/types/circular/page.jsx
index 166c7ff..91553db 100755
--- a/app/visualizer/linkedList/types/circular/page.jsx
+++ b/app/visualizer/linkedList/types/circular/page.jsx
@@ -5,7 +5,8 @@ import Footer from "@/app/components/footer";
 import BackToTopButton from "@/app/components/ui/backtotop";
 import Content from "./content";
 import Quiz from "./quiz";
-import Code from "./codeBlock";
+import CodeBlock from "@/app/components/modules/CodeBlock";
+import codeExamples from "./code";
 import ModuleCard from "@/app/components/ui/ModuleCard";
 import { MODULE_MAPS } from "@/lib/modulesMap";
 import ExploreOther from "@/app/components/ui/exploreOther";
@@ -86,7 +87,7 @@ export default function Page() {
         </section>
 
         <section className="px-6">
-          <Code />
+          <CodeBlock title="Circular Linked List Implementation" codeExamples={codeExamples} />
         </section>
 
         <section className="px-6 md:px-12 my-12">
diff --git a/app/visualizer/linkedList/types/doubly/animation.jsx b/app/visualizer/linkedList/types/doubly/animation.jsx
index b36c79b..c88b3e5 100755
--- a/app/visualizer/linkedList/types/doubly/animation.jsx
+++ b/app/visualizer/linkedList/types/doubly/animation.jsx
@@ -1,13 +1,6 @@
 'use client';
 import React, { useState, useRef, useEffect } from 'react';
-import Footer from '@/app/components/footer';
 import ResetButton from '@/app/components/ui/resetButton';
-import ExploreOther from '@/app/components/ui/exploreOther';
-import Content from "@/app/visualizer/linkedList/types/doubly/content";
-import Quiz from '@/app/visualizer/linkedList/types/doubly/quiz';
-import CodeBlock from "@/app/visualizer/linkedList/types/doubly/codeBlock";
-import BackToTop from '@/app/components/ui/backtotop';
-import GoBackButton from "@/app/components/ui/goback";
 
 const DoublyLinkedListVisualizer = () => {
   const [inputValue, setInputValue] = useState('');
@@ -62,19 +55,7 @@ const DoublyLinkedListVisualizer = () => {
   }, []);
 
   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">Doubly Linked List</span>
-        </h1>
-        <div className="bg-black border border-none dark:bg-gray-600 w-full h-[2px] rounded-xl mt-2 mb-5"></div>
-        <Content />
+    <div className="container mx-auto px-2 sm:px-6 pb-4">
         <p className="text-lg text-center text-gray-600 dark:text-gray-400 mb-8">
           Visualize Singly Linked List Operations
         </p>
@@ -205,28 +186,6 @@ const DoublyLinkedListVisualizer = () => {
               </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: "Singly Linked List", url: "./singly" },
-            { text: "Circular Linked List", url: "./circular" },
-          ]}
-        />
-      </main>
-      <div>
-        <div className="bg-gray-700 z-10 h-[1px]"></div>
-      </div>
-      <div className="bg-gray-700 z-10 h-[1px]"></div>
-      <BackToTop />
-      <Footer />
     </div>
   );
 };
diff --git a/app/visualizer/linkedList/types/doubly/codeBlock.jsx b/app/visualizer/linkedList/types/doubly/code.js
similarity index 79%
rename from app/visualizer/linkedList/types/doubly/codeBlock.jsx
rename to app/visualizer/linkedList/types/doubly/code.js
index ca83d1d..0144e21 100755
--- a/app/visualizer/linkedList/types/doubly/codeBlock.jsx
+++ b/app/visualizer/linkedList/types/doubly/code.js
@@ -1,40 +1,3 @@
-'use client';
-import { useState, useRef } from 'react';
-import { FaCopy, FaCheck, FaCode } from 'react-icons/fa';
-import { motion, AnimatePresence } from 'framer-motion';
-import hljs from 'highlight.js';
-import 'highlight.js/styles/github.css';
-import 'highlight.js/styles/github-dark.css';
-
-export const highlightCode = (code, language) => {
-  const validLanguage = hljs.getLanguage(language) ? language : 'plaintext';
-  return hljs.highlight(code, { language: validLanguage }).value;
-};
-
-const CodeBlock = () => {
-  const [selectedLanguage, setSelectedLanguage] = useState("javascript");
-  const [copied, setCopied] = useState(false);
-  const [isHovered, setIsHovered] = useState(false);
-  const topRef = useRef(null);
-
-  const languages = [
-    { id: "javascript", name: "JavaScript" },
-    { id: "python", name: "Python" },
-    { id: "java", name: "Java" },
-    { id: "c", name: "C" },
-    { id: "cpp", name: "C++" },
-  ];
-
-  const copyToClipboard = async (text) => {
-    try {
-      await navigator.clipboard.writeText(text);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    } catch (err) {
-      console.error("Failed to copy text: ", err);
-    }
-  };
-  
 const codeExamples = {
   javascript: `// Doubly Linked List Implementation in JavaScript
 class Node {
@@ -1038,122 +1001,4 @@ int main() {
 }`
 };
 
-  return (
-       <div
-         className="max-w-4xl mx-auto"
-         ref={topRef}
-         onMouseEnter={() => setIsHovered(true)}
-         onMouseLeave={() => setIsHovered(false)}
-       >
-         <motion.div
-           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"
-         >
-           {/* 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 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">
-                 Doubly Linked List Implementation
-               </h3>
-             </div>
-   
-             <motion.button
-               whileHover={{ scale: 1.05 }}
-               whileTap={{ scale: 0.95 }}
-               onClick={() => copyToClipboard(codeExamples[selectedLanguage])}
-               className="flex items-center gap-2 px-3 py-1.5 bg-gray-100 dark:bg-gray-600 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-500 transition-colors text-gray-800 dark:text-gray-100 text-sm font-medium"
-               aria-label="Copy code"
-             >
-               <AnimatePresence mode="wait">
-                 {copied ? (
-                   <motion.span
-                     key="check"
-                     initial={{ opacity: 0 }}
-                     animate={{ opacity: 1 }}
-                     exit={{ opacity: 0 }}
-                     className="flex items-center text-green-600 dark:text-green-400"
-                   >
-                     <FaCheck className="mr-1" /> Copied
-                   </motion.span>
-                 ) : (
-                   <motion.span
-                     key="copy"
-                     initial={{ opacity: 0 }}
-                     animate={{ opacity: 1 }}
-                     exit={{ opacity: 0 }}
-                     className="flex items-center"
-                   >
-                     <FaCopy className="mr-1" /> Copy Code
-                   </motion.span>
-                 )}
-               </AnimatePresence>
-             </motion.button>
-           </div>
-   
-           {/* Language Selector */}
-           <div className="px-4 pt-3 pb-2 flex flex-wrap gap-2 border-b border-gray-200 dark:border-gray-700">
-             {languages.map((lang) => (
-               <motion.button
-                 key={lang.id}
-                 whileHover={{ scale: 1.03 }}
-                 whileTap={{ scale: 0.97 }}
-                 onClick={() => setSelectedLanguage(lang.id)}
-                 className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-colors ${
-                   selectedLanguage === lang.id
-                     ? "bg-blue-500 text-white shadow-md"
-                     : "bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-600"
-                 }`}
-               >
-                 {lang.name}
-               </motion.button>
-             ))}
-           </div>
-   
-           {/* Code Block */}
-           <div className="relative">
-             <AnimatePresence mode="wait">
-               <motion.div
-                 key={selectedLanguage}
-                 initial={{ opacity: 0 }}
-                 animate={{ opacity: 1 }}
-                 exit={{ opacity: 0 }}
-                 transition={{ duration: 0.2 }}
-                 className="overflow-x-auto p-4 bg-gray-900 text-white"
-               >
-                 <pre className="text-sm leading-relaxed">
-                   <code
-                     className={`language-${selectedLanguage}`}
-                     dangerouslySetInnerHTML={{
-                       __html: highlightCode(
-                         codeExamples[selectedLanguage],
-                         selectedLanguage
-                       ),
-                     }}
-                   />
-                 </pre>
-               </motion.div>
-             </AnimatePresence>
-   
-             {/* Language indicator (shown on hover) */}
-             <AnimatePresence>
-               {isHovered && (
-                 <motion.div
-                   initial={{ opacity: 0, y: 10 }}
-                   animate={{ opacity: 1, y: 0 }}
-                   exit={{ opacity: 0, y: 10 }}
-                   className="absolute bottom-3 right-3 px-2 py-1 bg-gray-800 text-gray-300 text-xs rounded-md"
-                 >
-                   {selectedLanguage.toUpperCase()}
-                 </motion.div>
-               )}
-             </AnimatePresence>
-           </div>
-         </motion.div>
-       </div>
-     );
-   };
-   
-   export default CodeBlock;
\ No newline at end of file
+export default codeExamples;
diff --git a/app/visualizer/linkedList/types/doubly/page.jsx b/app/visualizer/linkedList/types/doubly/page.jsx
index 62e8230..f0320dc 100755
--- a/app/visualizer/linkedList/types/doubly/page.jsx
+++ b/app/visualizer/linkedList/types/doubly/page.jsx
@@ -3,6 +3,13 @@ import Navbar from "@/app/components/navbarinner";
 import ModuleHeader from "@/app/components/modules/Header";
 import Footer from "@/app/components/footer";
 import BackToTopButton from "@/app/components/ui/backtotop";
+import Content from "@/app/visualizer/linkedList/types/doubly/content";
+import Quiz from "@/app/visualizer/linkedList/types/doubly/quiz";
+import CodeBlock from "@/app/components/modules/CodeBlock";
+import codeExamples from "./code";
+import ModuleCard from "@/app/components/ui/ModuleCard";
+import { MODULE_MAPS } from "@/lib/modulesMap";
+import ExploreOther from "@/app/components/ui/exploreOther";
 
 export const metadata = {
   title: 'Doubly Linked List Implementation | Visualize Doubly Linked List in JS, C, Python, Java',
@@ -42,11 +49,42 @@ export default function Page() {
       <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">
           <ModuleHeader category="Types" title="Doubly Linked List" paths={paths} />
+          <Content />
         </section>
 
         <section>
           <Animation />
         </section>
+
+        <section className="px-6">
+          <p className="text-lg text-center text-gray-600 dark:text-gray-400 mb-2">
+            Test Your Knowledge before moving forward!
+          </p>
+          <Quiz />
+        </section>
+
+        <section className="px-6">
+          <CodeBlock title="Doubly Linked List Implementation" codeExamples={codeExamples} />
+        </section>
+
+        <section className="px-6 md:px-12 my-12">
+          <ModuleCard
+            moduleId={MODULE_MAPS.doublyLinkedList}
+            title="Doubly Linked List"
+            description="Mark Doubly Linked List as done and view it on your dashboard"
+            initialDone={false}
+          />
+        </section>
+
+        <section className="px-6">
+          <ExploreOther
+            title="Explore Other Types"
+            links={[
+              { text: "Singly Linked List", url: "./singly" },
+              { text: "Circular Linked List", url: "./circular" },
+            ]}
+          />
+        </section>
       </div>
 
       <BackToTopButton />
diff --git a/app/visualizer/linkedList/types/doubly/quiz.jsx b/app/visualizer/linkedList/types/doubly/quiz.jsx
index cc07eee..2cb77dc 100755
--- a/app/visualizer/linkedList/types/doubly/quiz.jsx
+++ b/app/visualizer/linkedList/types/doubly/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';
diff --git a/app/visualizer/linkedList/types/singly/codeBlock.jsx b/app/visualizer/linkedList/types/singly/code.js
similarity index 70%
rename from app/visualizer/linkedList/types/singly/codeBlock.jsx
rename to app/visualizer/linkedList/types/singly/code.js
index c6213f8..ae4bdf1 100755
--- a/app/visualizer/linkedList/types/singly/codeBlock.jsx
+++ b/app/visualizer/linkedList/types/singly/code.js
@@ -1,40 +1,3 @@
-'use client';
-import { useState, useRef } from 'react';
-import { FaCopy, FaCheck, FaCode } from 'react-icons/fa';
-import { motion, AnimatePresence } from 'framer-motion';
-import hljs from 'highlight.js';
-import 'highlight.js/styles/github.css';
-import 'highlight.js/styles/github-dark.css';
-
-export const highlightCode = (code, language) => {
-  const validLanguage = hljs.getLanguage(language) ? language : 'plaintext';
-  return hljs.highlight(code, { language: validLanguage }).value;
-};
-
-const CodeBlock = () => {
-  const [selectedLanguage, setSelectedLanguage] = useState("javascript");
-  const [copied, setCopied] = useState(false);
-  const [isHovered, setIsHovered] = useState(false);
-  const topRef = useRef(null);
-
-  const languages = [
-    { id: "javascript", name: "JavaScript" },
-    { id: "python", name: "Python" },
-    { id: "java", name: "Java" },
-    { id: "c", name: "C" },
-    { id: "cpp", name: "C++" },
-  ];
-
-  const copyToClipboard = async (text) => {
-    try {
-      await navigator.clipboard.writeText(text);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    } catch (err) {
-      console.error("Failed to copy text: ", err);
-    }
-  };
-  
 const codeExamples = {
   javascript: `// Singly Linked List Implementation in JavaScript
 class Node {
@@ -682,122 +645,4 @@ int main() {
 }`
 };
 
-  return (
-       <div
-         className="max-w-4xl mx-auto"
-         ref={topRef}
-         onMouseEnter={() => setIsHovered(true)}
-         onMouseLeave={() => setIsHovered(false)}
-       >
-         <motion.div
-           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"
-         >
-           {/* 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 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">
-                 Singly Linked List Implementation
-               </h3>
-             </div>
-   
-             <motion.button
-               whileHover={{ scale: 1.05 }}
-               whileTap={{ scale: 0.95 }}
-               onClick={() => copyToClipboard(codeExamples[selectedLanguage])}
-               className="flex items-center gap-2 px-3 py-1.5 bg-gray-100 dark:bg-gray-600 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-500 transition-colors text-gray-800 dark:text-gray-100 text-sm font-medium"
-               aria-label="Copy code"
-             >
-               <AnimatePresence mode="wait">
-                 {copied ? (
-                   <motion.span
-                     key="check"
-                     initial={{ opacity: 0 }}
-                     animate={{ opacity: 1 }}
-                     exit={{ opacity: 0 }}
-                     className="flex items-center text-green-600 dark:text-green-400"
-                   >
-                     <FaCheck className="mr-1" /> Copied
-                   </motion.span>
-                 ) : (
-                   <motion.span
-                     key="copy"
-                     initial={{ opacity: 0 }}
-                     animate={{ opacity: 1 }}
-                     exit={{ opacity: 0 }}
-                     className="flex items-center"
-                   >
-                     <FaCopy className="mr-1" /> Copy Code
-                   </motion.span>
-                 )}
-               </AnimatePresence>
-             </motion.button>
-           </div>
-   
-           {/* Language Selector */}
-           <div className="px-4 pt-3 pb-2 flex flex-wrap gap-2 border-b border-gray-200 dark:border-gray-700">
-             {languages.map((lang) => (
-               <motion.button
-                 key={lang.id}
-                 whileHover={{ scale: 1.03 }}
-                 whileTap={{ scale: 0.97 }}
-                 onClick={() => setSelectedLanguage(lang.id)}
-                 className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-colors ${
-                   selectedLanguage === lang.id
-                     ? "bg-blue-500 text-white shadow-md"
-                     : "bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-600"
-                 }`}
-               >
-                 {lang.name}
-               </motion.button>
-             ))}
-           </div>
-   
-           {/* Code Block */}
-           <div className="relative">
-             <AnimatePresence mode="wait">
-               <motion.div
-                 key={selectedLanguage}
-                 initial={{ opacity: 0 }}
-                 animate={{ opacity: 1 }}
-                 exit={{ opacity: 0 }}
-                 transition={{ duration: 0.2 }}
-                 className="overflow-x-auto p-4 bg-gray-900 text-white"
-               >
-                 <pre className="text-sm leading-relaxed">
-                   <code
-                     className={`language-${selectedLanguage}`}
-                     dangerouslySetInnerHTML={{
-                       __html: highlightCode(
-                         codeExamples[selectedLanguage],
-                         selectedLanguage
-                       ),
-                     }}
-                   />
-                 </pre>
-               </motion.div>
-             </AnimatePresence>
-   
-             {/* Language indicator (shown on hover) */}
-             <AnimatePresence>
-               {isHovered && (
-                 <motion.div
-                   initial={{ opacity: 0, y: 10 }}
-                   animate={{ opacity: 1, y: 0 }}
-                   exit={{ opacity: 0, y: 10 }}
-                   className="absolute bottom-3 right-3 px-2 py-1 bg-gray-800 text-gray-300 text-xs rounded-md"
-                 >
-                   {selectedLanguage.toUpperCase()}
-                 </motion.div>
-               )}
-             </AnimatePresence>
-           </div>
-         </motion.div>
-       </div>
-     );
-   };
-   
-   export default CodeBlock;
\ No newline at end of file
+export default codeExamples;
diff --git a/app/visualizer/linkedList/types/singly/page.jsx b/app/visualizer/linkedList/types/singly/page.jsx
index 994358e..ae4baca 100755
--- a/app/visualizer/linkedList/types/singly/page.jsx
+++ b/app/visualizer/linkedList/types/singly/page.jsx
@@ -3,7 +3,8 @@ import Navbar from "@/app/components/navbarinner";
 import ModuleHeader from "@/app/components/modules/Header";
 import Content from "@/app/visualizer/linkedList/types/singly/content";
 import Quiz from "@/app/visualizer/linkedList/types/singly/quiz";
-import Code from "@/app/visualizer/linkedList/types/singly/codeBlock";
+import CodeBlock from "@/app/components/modules/CodeBlock";
+import codeExamples from "./code";
 import ModuleCard from "@/app/components/ui/ModuleCard";
 import { MODULE_MAPS } from "@/lib/modulesMap";
 import ExploreOther from '@/app/components/ui/exploreOther';
@@ -75,7 +76,7 @@ export default function Page() {
         </section>
 
         <section className="px-6">
-          <Code />
+          <CodeBlock title="Singly Linked List Implementation" codeExamples={codeExamples} />
         </section>
 
         <section className="px-6 md:px-12 my-12">
diff --git a/app/visualizer/queue/implementation/linkedList/codeBlock.jsx b/app/visualizer/queue/implementation/linkedList/code.js
similarity index 52%
rename from app/visualizer/queue/implementation/linkedList/codeBlock.jsx
rename to app/visualizer/queue/implementation/linkedList/code.js
index 3d0a1b3..e71b90e 100755
--- a/app/visualizer/queue/implementation/linkedList/codeBlock.jsx
+++ b/app/visualizer/queue/implementation/linkedList/code.js
@@ -1,40 +1,3 @@
-'use client';
-import { useState, useRef } from 'react';
-import { FaCopy, FaCheck, FaCode } from 'react-icons/fa';
-import { motion, AnimatePresence } from 'framer-motion';
-import hljs from 'highlight.js';
-import 'highlight.js/styles/github.css';
-import 'highlight.js/styles/github-dark.css';
-
-export const highlightCode = (code, language) => {
-  const validLanguage = hljs.getLanguage(language) ? language : 'plaintext';
-  return hljs.highlight(code, { language: validLanguage }).value;
-};
-
-const CodeBlock = () => {
-  const [selectedLanguage, setSelectedLanguage] = useState("javascript");
-  const [copied, setCopied] = useState(false);
-  const [isHovered, setIsHovered] = useState(false);
-  const topRef = useRef(null);
-
-  const languages = [
-    { id: "javascript", name: "JavaScript" },
-    { id: "python", name: "Python" },
-    { id: "java", name: "Java" },
-    { id: "c", name: "C" },
-    { id: "cpp", name: "C++" },
-  ];
-
-  const copyToClipboard = async (text) => {
-    try {
-      await navigator.clipboard.writeText(text);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    } catch (err) {
-      console.error("Failed to copy text: ", err);
-    }
-  };
-
 const codeExamples = {
   javascript: `// Queue Implementation in JavaScript (Linked List)
 class Node {
@@ -339,122 +302,4 @@ int main() {
 }`
 };
 
-  return (
-    <div
-      className="max-w-4xl mx-auto"
-      ref={topRef}
-      onMouseEnter={() => setIsHovered(true)}
-      onMouseLeave={() => setIsHovered(false)}
-    >
-      <motion.div
-        initial={{ opacity: 0, y: 20 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{ duration: 0.3 }}
-        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-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">
-              Implementation Enqueue & Dequeue
-            </h3>
-          </div>
-
-          <motion.button
-            whileHover={{ scale: 1.05 }}
-            whileTap={{ scale: 0.95 }}
-            onClick={() => copyToClipboard(codeExamples[selectedLanguage])}
-            className="flex items-center gap-2 px-3 py-1.5 bg-gray-100 dark:bg-gray-600 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-500 transition-colors text-gray-800 dark:text-gray-100 text-sm font-medium"
-            aria-label="Copy code"
-          >
-            <AnimatePresence mode="wait">
-              {copied ? (
-                <motion.span
-                  key="check"
-                  initial={{ opacity: 0 }}
-                  animate={{ opacity: 1 }}
-                  exit={{ opacity: 0 }}
-                  className="flex items-center text-green-600 dark:text-green-400"
-                >
-                  <FaCheck className="mr-1" /> Copied
-                </motion.span>
-              ) : (
-                <motion.span
-                  key="copy"
-                  initial={{ opacity: 0 }}
-                  animate={{ opacity: 1 }}
-                  exit={{ opacity: 0 }}
-                  className="flex items-center"
-                >
-                  <FaCopy className="mr-1" /> Copy Code
-                </motion.span>
-              )}
-            </AnimatePresence>
-          </motion.button>
-        </div>
-
-        {/* Language Selector */}
-        <div className="px-4 pt-3 pb-2 flex flex-wrap gap-2 border-b border-gray-200 dark:border-gray-700">
-          {languages.map((lang) => (
-            <motion.button
-              key={lang.id}
-              whileHover={{ scale: 1.03 }}
-              whileTap={{ scale: 0.97 }}
-              onClick={() => setSelectedLanguage(lang.id)}
-              className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-colors ${
-                selectedLanguage === lang.id
-                  ? "bg-blue-500 text-white shadow-md"
-                  : "bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-600"
-              }`}
-            >
-              {lang.name}
-            </motion.button>
-          ))}
-        </div>
-
-        {/* Code Block */}
-        <div className="relative">
-          <AnimatePresence mode="wait">
-            <motion.div
-              key={selectedLanguage}
-              initial={{ opacity: 0 }}
-              animate={{ opacity: 1 }}
-              exit={{ opacity: 0 }}
-              transition={{ duration: 0.2 }}
-              className="overflow-x-auto p-4 bg-gray-900 text-white"
-            >
-              <pre className="text-sm leading-relaxed">
-                <code
-                  className={`language-${selectedLanguage}`}
-                  dangerouslySetInnerHTML={{
-                    __html: highlightCode(
-                      codeExamples[selectedLanguage],
-                      selectedLanguage
-                    ),
-                  }}
-                />
-              </pre>
-            </motion.div>
-          </AnimatePresence>
-
-          {/* Language indicator (shown on hover) */}
-          <AnimatePresence>
-            {isHovered && (
-              <motion.div
-                initial={{ opacity: 0, y: 10 }}
-                animate={{ opacity: 1, y: 0 }}
-                exit={{ opacity: 0, y: 10 }}
-                className="absolute bottom-3 right-3 px-2 py-1 bg-gray-800 text-gray-300 text-xs rounded-md"
-              >
-                {selectedLanguage.toUpperCase()}
-              </motion.div>
-            )}
-          </AnimatePresence>
-        </div>
-      </motion.div>
-    </div>
-  );
-};
-
-export default CodeBlock;
\ No newline at end of file
+export default codeExamples;
diff --git a/app/visualizer/queue/implementation/linkedList/page.jsx b/app/visualizer/queue/implementation/linkedList/page.jsx
index 6adfb73..aab5285 100755
--- a/app/visualizer/queue/implementation/linkedList/page.jsx
+++ b/app/visualizer/queue/implementation/linkedList/page.jsx
@@ -1,7 +1,8 @@
 import Navbar from "@/app/components/navbarinner";
 import ModuleHeader from "@/app/components/modules/Header";
 import Content from "@/app/visualizer/queue/implementation/linkedList/content";
-import Code from "@/app/visualizer/queue/implementation/linkedList/codeBlock";
+import CodeBlock from "@/app/components/modules/CodeBlock";
+import codeExamples from "./code";
 import ModuleCard from "@/app/components/ui/ModuleCard";
 import { MODULE_MAPS } from "@/lib/modulesMap";
 import ExploreOther from "@/app/components/ui/exploreOther";
@@ -62,7 +63,7 @@ export default function Page() {
         </section>
 
         <section className="px-6">
-          <Code />
+          <CodeBlock title="Implementation Enqueue & Dequeue" codeExamples={codeExamples} />
         </section>
 
         <section className="px-6 md:px-12 my-12">
diff --git a/app/visualizer/queue/operations/enqueue-dequeue/code.js b/app/visualizer/queue/operations/enqueue-dequeue/code.js
new file mode 100755
index 0000000..807e905
--- /dev/null
+++ b/app/visualizer/queue/operations/enqueue-dequeue/code.js
@@ -0,0 +1,278 @@
+const codeExamples = {
+    javascript: `// Queue Implementation in JavaScript (Linked List)
+class Node {
+  constructor(data) {
+    this.data = data;
+    this.next = null;
+  }
+}
+
+class Queue {
+  constructor() {
+    this.front = null;
+    this.rear = null;
+  }
+  
+  // Add element to the rear (enqueue)
+  enqueue(item) {
+    const newNode = new Node(item);
+    if (this.rear === null) {
+      this.front = this.rear = newNode;
+    } else {
+      this.rear.next = newNode;
+      this.rear = newNode;
+    }
+  }
+  
+  // Remove element from front (dequeue)
+  dequeue() {
+    if (this.front === null) {
+      return "Queue Underflow";
+    }
+    const temp = this.front;
+    this.front = temp.next;
+    
+    if (this.front === null) {
+      this.rear = null;
+    }
+    return temp.data;
+  }
+}
+
+// Usage Example
+const queue = new Queue();
+queue.enqueue(10);
+queue.enqueue(20);
+queue.enqueue(30);
+console.log(queue.dequeue()); // 10
+console.log(queue.dequeue()); // 20`,
+
+    python: `# Queue Implementation in Python (Linked List)
+class Node:
+    def __init__(self, data):
+        self.data = data
+        self.next = None
+
+class Queue:
+    def __init__(self):
+        self.front = None
+        self.rear = None
+    
+    # Add element to the rear (enqueue)
+    def enqueue(self, item):
+        new_node = Node(item)
+        if self.rear is None:
+            self.front = self.rear = new_node
+        else:
+            self.rear.next = new_node
+            self.rear = new_node
+    
+    # Remove element from front (dequeue)
+    def dequeue(self):
+        if self.front is None:
+            return "Queue Underflow"
+        temp = self.front
+        self.front = temp.next
+        
+        if self.front is None:
+            self.rear = None
+        return temp.data
+
+# Usage Example
+q = Queue()
+q.enqueue(10)
+q.enqueue(20)
+q.enqueue(30)
+print(q.dequeue())  # 10
+print(q.dequeue())  # 20`,
+
+    java: `// Queue Implementation in Java (Array)
+public class ArrayQueue {
+    private int[] arr;
+    private int front, rear, capacity;
+    
+    public ArrayQueue(int size) {
+        capacity = size;
+        arr = new int[capacity];
+        front = rear = -1;
+    }
+    
+    // Add element to the rear (enqueue)
+    public void enqueue(int item) {
+        if ((rear + 1) % capacity == front) {
+            System.out.println("Queue Overflow");
+            return;
+        }
+        if (front == -1) {
+            front = rear = 0;
+        } else {
+            rear = (rear + 1) % capacity;
+        }
+        arr[rear] = item;
+    }
+    
+    // Remove element from front (dequeue)
+    public int dequeue() {
+        if (front == -1) {
+            System.out.println("Queue Underflow");
+            return -1;
+        }
+        int item = arr[front];
+        if (front == rear) {
+            front = rear = -1;
+        } else {
+            front = (front + 1) % capacity;
+        }
+        return item;
+    }
+
+    public static void main(String[] args) {
+        ArrayQueue queue = new ArrayQueue(5);
+        queue.enqueue(10);
+        queue.enqueue(20);
+        queue.enqueue(30);
+        System.out.println(queue.dequeue()); // 10
+        System.out.println(queue.dequeue()); // 20
+    }
+}`,
+
+    c: `// Queue Implementation in C (Array)
+#include <stdio.h>
+#include <stdbool.h>
+
+#define MAX_SIZE 100
+
+typedef struct {
+    int arr[MAX_SIZE];
+    int front, rear;
+} Queue;
+
+void initialize(Queue *q) {
+    q->front = q->rear = -1;
+}
+
+bool isEmpty(Queue *q) {
+    return q->front == -1;
+}
+
+bool isFull(Queue *q) {
+    return (q->rear + 1) % MAX_SIZE == q->front;
+}
+
+// Add element to the rear (enqueue)
+void enqueue(Queue *q, int item) {
+    if (isFull(q)) {
+        printf("Queue Overflow\\n");
+        return;
+    }
+    if (isEmpty(q)) {
+        q->front = q->rear = 0;
+    } else {
+        q->rear = (q->rear + 1) % MAX_SIZE;
+    }
+    q->arr[q->rear] = item;
+}
+
+// Remove element from front (dequeue)
+int dequeue(Queue *q) {
+    if (isEmpty(q)) {
+        printf("Queue Underflow\\n");
+        return -1;
+    }
+    int item = q->arr[q->front];
+    if (q->front == q->rear) {
+        q->front = q->rear = -1;
+    } else {
+        q->front = (q->front + 1) % MAX_SIZE;
+    }
+    return item;
+}
+
+int main() {
+    Queue q;
+    initialize(&q);
+    
+    enqueue(&q, 10);
+    enqueue(&q, 20);
+    enqueue(&q, 30);
+    
+    printf("%d\\n", dequeue(&q)); // 10
+    printf("%d\\n", dequeue(&q)); // 20
+    
+    return 0;
+}`,
+
+    cpp: `// Queue Implementation in C++ (Linked List)
+#include <iostream>
+using namespace std;
+
+class Node {
+public:
+    int data;
+    Node* next;
+    
+    Node(int val) : data(val), next(nullptr) {}
+};
+
+class Queue {
+private:
+    Node* front;
+    Node* rear;
+    
+public:
+    Queue() : front(nullptr), rear(nullptr) {}
+    
+    ~Queue() {
+        while (!isEmpty()) {
+            dequeue();
+        }
+    }
+    
+    // Add element to the rear (enqueue)
+    void enqueue(int item) {
+        Node* newNode = new Node(item);
+        if (rear == nullptr) {
+            front = rear = newNode;
+        } else {
+            rear->next = newNode;
+            rear = newNode;
+        }
+    }
+    
+    // Remove element from front (dequeue)
+    int dequeue() {
+        if (front == nullptr) {
+            cout << "Queue Underflow" << endl;
+            return -1;
+        }
+        Node* temp = front;
+        int item = temp->data;
+        front = front->next;
+        
+        if (front == nullptr) {
+            rear = nullptr;
+        }
+        
+        delete temp;
+        return item;
+    }
+    
+    bool isEmpty() const {
+        return front == nullptr;
+    }
+};
+
+int main() {
+    Queue q;
+    q.enqueue(10);
+    q.enqueue(20);
+    q.enqueue(30);
+    
+    cout << q.dequeue() << endl; // 10
+    cout << q.dequeue() << endl; // 20
+    
+    return 0;
+}`,
+  };
+
+export default codeExamples;
diff --git a/app/visualizer/queue/operations/enqueue-dequeue/codeBlock.jsx b/app/visualizer/queue/operations/enqueue-dequeue/codeBlock.jsx
deleted file mode 100755
index 261ddf2..0000000
--- a/app/visualizer/queue/operations/enqueue-dequeue/codeBlock.jsx
+++ /dev/null
@@ -1,433 +0,0 @@
-'use client';
-import { useState, useRef } from 'react';
-import { FaCopy, FaCheck, FaCode } from 'react-icons/fa';
-import { motion, AnimatePresence } from 'framer-motion';
-import hljs from 'highlight.js';
-import 'highlight.js/styles/github.css';
-import 'highlight.js/styles/github-dark.css';
-
-export const highlightCode = (code, language) => {
-  const validLanguage = hljs.getLanguage(language) ? language : 'plaintext';
-  return hljs.highlight(code, { language: validLanguage }).value;
-};
-
-const CodeBlock = () => {
-  const [selectedLanguage, setSelectedLanguage] = useState("javascript");
-  const [copied, setCopied] = useState(false);
-  const [isHovered, setIsHovered] = useState(false);
-  const topRef = useRef(null);
-
-  const languages = [
-    { id: "javascript", name: "JavaScript" },
-    { id: "python", name: "Python" },
-    { id: "java", name: "Java" },
-    { id: "c", name: "C" },
-    { id: "cpp", name: "C++" },
-  ];
-
-  const copyToClipboard = async (text) => {
-    try {
-      await navigator.clipboard.writeText(text);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    } catch (err) {
-      console.error("Failed to copy text: ", err);
-    }
-  };
-
-  const codeExamples = {
-    javascript: `// Queue Implementation in JavaScript (Linked List)
-class Node {
-  constructor(data) {
-    this.data = data;
-    this.next = null;
-  }
-}
-
-class Queue {
-  constructor() {
-    this.front = null;
-    this.rear = null;
-  }
-  
-  // Add element to the rear (enqueue)
-  enqueue(item) {
-    const newNode = new Node(item);
-    if (this.rear === null) {
-      this.front = this.rear = newNode;
-    } else {
-      this.rear.next = newNode;
-      this.rear = newNode;
-    }
-  }
-  
-  // Remove element from front (dequeue)
-  dequeue() {
-    if (this.front === null) {
-      return "Queue Underflow";
-    }
-    const temp = this.front;
-    this.front = temp.next;
-    
-    if (this.front === null) {
-      this.rear = null;
-    }
-    return temp.data;
-  }
-}
-
-// Usage Example
-const queue = new Queue();
-queue.enqueue(10);
-queue.enqueue(20);
-queue.enqueue(30);
-console.log(queue.dequeue()); // 10
-console.log(queue.dequeue()); // 20`,
-
-    python: `# Queue Implementation in Python (Linked List)
-class Node:
-    def __init__(self, data):
-        self.data = data
-        self.next = None
-
-class Queue:
-    def __init__(self):
-        self.front = None
-        self.rear = None
-    
-    # Add element to the rear (enqueue)
-    def enqueue(self, item):
-        new_node = Node(item)
-        if self.rear is None:
-            self.front = self.rear = new_node
-        else:
-            self.rear.next = new_node
-            self.rear = new_node
-    
-    # Remove element from front (dequeue)
-    def dequeue(self):
-        if self.front is None:
-            return "Queue Underflow"
-        temp = self.front
-        self.front = temp.next
-        
-        if self.front is None:
-            self.rear = None
-        return temp.data
-
-# Usage Example
-q = Queue()
-q.enqueue(10)
-q.enqueue(20)
-q.enqueue(30)
-print(q.dequeue())  # 10
-print(q.dequeue())  # 20`,
-
-    java: `// Queue Implementation in Java (Array)
-public class ArrayQueue {
-    private int[] arr;
-    private int front, rear, capacity;
-    
-    public ArrayQueue(int size) {
-        capacity = size;
-        arr = new int[capacity];
-        front = rear = -1;
-    }
-    
-    // Add element to the rear (enqueue)
-    public void enqueue(int item) {
-        if ((rear + 1) % capacity == front) {
-            System.out.println("Queue Overflow");
-            return;
-        }
-        if (front == -1) {
-            front = rear = 0;
-        } else {
-            rear = (rear + 1) % capacity;
-        }
-        arr[rear] = item;
-    }
-    
-    // Remove element from front (dequeue)
-    public int dequeue() {
-        if (front == -1) {
-            System.out.println("Queue Underflow");
-            return -1;
-        }
-        int item = arr[front];
-        if (front == rear) {
-            front = rear = -1;
-        } else {
-            front = (front + 1) % capacity;
-        }
-        return item;
-    }
-
-    public static void main(String[] args) {
-        ArrayQueue queue = new ArrayQueue(5);
-        queue.enqueue(10);
-        queue.enqueue(20);
-        queue.enqueue(30);
-        System.out.println(queue.dequeue()); // 10
-        System.out.println(queue.dequeue()); // 20
-    }
-}`,
-
-    c: `// Queue Implementation in C (Array)
-#include <stdio.h>
-#include <stdbool.h>
-
-#define MAX_SIZE 100
-
-typedef struct {
-    int arr[MAX_SIZE];
-    int front, rear;
-} Queue;
-
-void initialize(Queue *q) {
-    q->front = q->rear = -1;
-}
-
-bool isEmpty(Queue *q) {
-    return q->front == -1;
-}
-
-bool isFull(Queue *q) {
-    return (q->rear + 1) % MAX_SIZE == q->front;
-}
-
-// Add element to the rear (enqueue)
-void enqueue(Queue *q, int item) {
-    if (isFull(q)) {
-        printf("Queue Overflow\\n");
-        return;
-    }
-    if (isEmpty(q)) {
-        q->front = q->rear = 0;
-    } else {
-        q->rear = (q->rear + 1) % MAX_SIZE;
-    }
-    q->arr[q->rear] = item;
-}
-
-// Remove element from front (dequeue)
-int dequeue(Queue *q) {
-    if (isEmpty(q)) {
-        printf("Queue Underflow\\n");
-        return -1;
-    }
-    int item = q->arr[q->front];
-    if (q->front == q->rear) {
-        q->front = q->rear = -1;
-    } else {
-        q->front = (q->front + 1) % MAX_SIZE;
-    }
-    return item;
-}
-
-int main() {
-    Queue q;
-    initialize(&q);
-    
-    enqueue(&q, 10);
-    enqueue(&q, 20);
-    enqueue(&q, 30);
-    
-    printf("%d\\n", dequeue(&q)); // 10
-    printf("%d\\n", dequeue(&q)); // 20
-    
-    return 0;
-}`,
-
-    cpp: `// Queue Implementation in C++ (Linked List)
-#include <iostream>
-using namespace std;
-
-class Node {
-public:
-    int data;
-    Node* next;
-    
-    Node(int val) : data(val), next(nullptr) {}
-};
-
-class Queue {
-private:
-    Node* front;
-    Node* rear;
-    
-public:
-    Queue() : front(nullptr), rear(nullptr) {}
-    
-    ~Queue() {
-        while (!isEmpty()) {
-            dequeue();
-        }
-    }
-    
-    // Add element to the rear (enqueue)
-    void enqueue(int item) {
-        Node* newNode = new Node(item);
-        if (rear == nullptr) {
-            front = rear = newNode;
-        } else {
-            rear->next = newNode;
-            rear = newNode;
-        }
-    }
-    
-    // Remove element from front (dequeue)
-    int dequeue() {
-        if (front == nullptr) {
-            cout << "Queue Underflow" << endl;
-            return -1;
-        }
-        Node* temp = front;
-        int item = temp->data;
-        front = front->next;
-        
-        if (front == nullptr) {
-            rear = nullptr;
-        }
-        
-        delete temp;
-        return item;
-    }
-    
-    bool isEmpty() const {
-        return front == nullptr;
-    }
-};
-
-int main() {
-    Queue q;
-    q.enqueue(10);
-    q.enqueue(20);
-    q.enqueue(30);
-    
-    cout << q.dequeue() << endl; // 10
-    cout << q.dequeue() << endl; // 20
-    
-    return 0;
-}`,
-  };
-
-  return (
-    <div
-      className="max-w-4xl mx-auto"
-      ref={topRef}
-      onMouseEnter={() => setIsHovered(true)}
-      onMouseLeave={() => setIsHovered(false)}
-    >
-      <motion.div
-        initial={{ opacity: 0, y: 20 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{ duration: 0.3 }}
-        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-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 (Enqueue & Dequeue)
-            </h3>
-          </div>
-
-          <motion.button
-            whileHover={{ scale: 1.05 }}
-            whileTap={{ scale: 0.95 }}
-            onClick={() => copyToClipboard(codeExamples[selectedLanguage])}
-            className="flex items-center gap-2 px-3 py-1.5 bg-gray-100 dark:bg-gray-600 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-500 transition-colors text-gray-800 dark:text-gray-100 text-sm font-medium"
-            aria-label="Copy code"
-          >
-            <AnimatePresence mode="wait">
-              {copied ? (
-                <motion.span
-                  key="check"
-                  initial={{ opacity: 0 }}
-                  animate={{ opacity: 1 }}
-                  exit={{ opacity: 0 }}
-                  className="flex items-center text-green-600 dark:text-green-400"
-                >
-                  <FaCheck className="mr-1" /> Copied
-                </motion.span>
-              ) : (
-                <motion.span
-                  key="copy"
-                  initial={{ opacity: 0 }}
-                  animate={{ opacity: 1 }}
-                  exit={{ opacity: 0 }}
-                  className="flex items-center"
-                >
-                  <FaCopy className="mr-1" /> Copy Code
-                </motion.span>
-              )}
-            </AnimatePresence>
-          </motion.button>
-        </div>
-
-        {/* Language Selector */}
-        <div className="px-4 pt-3 pb-2 flex flex-wrap gap-2 border-b border-gray-200 dark:border-gray-700">
-          {languages.map((lang) => (
-            <motion.button
-              key={lang.id}
-              whileHover={{ scale: 1.03 }}
-              whileTap={{ scale: 0.97 }}
-              onClick={() => setSelectedLanguage(lang.id)}
-              className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-colors ${
-                selectedLanguage === lang.id
-                  ? "bg-blue-500 text-white shadow-md"
-                  : "bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-600"
-              }`}
-            >
-              {lang.name}
-            </motion.button>
-          ))}
-        </div>
-
-        {/* Code Block */}
-        <div className="relative">
-          <AnimatePresence mode="wait">
-            <motion.div
-              key={selectedLanguage}
-              initial={{ opacity: 0 }}
-              animate={{ opacity: 1 }}
-              exit={{ opacity: 0 }}
-              transition={{ duration: 0.2 }}
-              className="overflow-x-auto p-4 bg-gray-900 text-white"
-            >
-              <pre className="text-sm leading-relaxed">
-                <code
-                  className={`language-${selectedLanguage}`}
-                  dangerouslySetInnerHTML={{
-                    __html: highlightCode(
-                      codeExamples[selectedLanguage],
-                      selectedLanguage
-                    ),
-                  }}
-                />
-              </pre>
-            </motion.div>
-          </AnimatePresence>
-
-          {/* Language indicator (shown on hover) */}
-          <AnimatePresence>
-            {isHovered && (
-              <motion.div
-                initial={{ opacity: 0, y: 10 }}
-                animate={{ opacity: 1, y: 0 }}
-                exit={{ opacity: 0, y: 10 }}
-                className="absolute bottom-3 right-3 px-2 py-1 bg-gray-800 text-gray-300 text-xs rounded-md"
-              >
-                {selectedLanguage.toUpperCase()}
-              </motion.div>
-            )}
-          </AnimatePresence>
-        </div>
-      </motion.div>
-    </div>
-  );
-};
-
-export default CodeBlock;
\ No newline at end of file
diff --git a/app/visualizer/queue/operations/enqueue-dequeue/page.jsx b/app/visualizer/queue/operations/enqueue-dequeue/page.jsx
index 138ea46..c77b235 100755
--- a/app/visualizer/queue/operations/enqueue-dequeue/page.jsx
+++ b/app/visualizer/queue/operations/enqueue-dequeue/page.jsx
@@ -3,7 +3,8 @@ import Navbar from "@/app/components/navbarinner";
 import ModuleHeader from "@/app/components/modules/Header";
 import Content from "@/app/visualizer/queue/operations/enqueue-dequeue/content";
 import Quiz from "@/app/visualizer/queue/operations/enqueue-dequeue/quiz";
-import Code from "@/app/visualizer/queue/operations/enqueue-dequeue/codeBlock";
+import CodeBlock from "@/app/components/modules/CodeBlock";
+import codeExamples from "./code";
 import ModuleCard from "@/app/components/ui/ModuleCard";
 import { MODULE_MAPS } from "@/lib/modulesMap";
 import ExploreOther from "@/app/components/ui/exploreOther";
@@ -74,7 +75,7 @@ export default function Page() {
         </section>
 
         <section className="px-6">
-          <Code />
+          <CodeBlock title="Queue (Enqueue & Dequeue)" codeExamples={codeExamples} />
         </section>
 
         <section className="px-6 md:px-12 my-12">
diff --git a/app/visualizer/queue/operations/isempty/code.js b/app/visualizer/queue/operations/isempty/code.js
new file mode 100755
index 0000000..bcd0668
--- /dev/null
+++ b/app/visualizer/queue/operations/isempty/code.js
@@ -0,0 +1,89 @@
+const codeExamples = {
+    javascript: `// Queue Implementation in JavaScript (Linked List)
+class Queue {
+  constructor() {
+    this.front = null;
+    this.rear = null;
+  }
+
+  // Check if queue is empty
+  isEmpty() {
+    return this.front === null;
+  }
+}`,
+  
+    python: `# Queue Implementation in Python (Linked List)
+class Queue:
+    def __init__(self):
+        self.front = None
+        self.rear = None
+    
+    # Check if queue is empty
+    def is_empty(self):
+        return self.front is None`,
+  
+    java: `// Queue Implementation in Java (Array)
+public class ArrayQueue {
+    private int front, rear;
+    private int[] arr;
+    
+    public ArrayQueue(int size) {
+        arr = new int[size];
+        front = rear = -1;
+    }
+    
+    // Check if queue is empty
+    public boolean isEmpty() {
+        return front == -1;
+    }
+}`,
+  
+    c: `// Queue Implementation in C (Array)
+#include <stdbool.h>
+#define MAX_SIZE 100
+
+typedef struct {
+    int arr[MAX_SIZE];
+    int front, rear;
+} Queue;
+
+// Check if queue is empty
+bool isEmpty(Queue *q) {
+    return q->front == -1;
+}`,
+
+    cpp: `// Queue Implementation in C++ (Linked List)
+#include <iostream>
+
+class Node {
+public:
+    int data;
+    Node* next;
+    
+    Node(int val) : data(val), next(nullptr) {}
+};
+
+class Queue {
+private:
+    Node* front;
+    Node* rear;
+    
+public:
+    Queue() : front(nullptr), rear(nullptr) {}
+    
+    ~Queue() {
+        while (front != nullptr) {
+            Node* temp = front;
+            front = front->next;
+            delete temp;
+        }
+    }
+    
+    // Check if queue is empty
+    bool isEmpty() const {
+        return front == nullptr;
+    }
+};`
+  };
+
+export default codeExamples;
diff --git a/app/visualizer/queue/operations/isempty/codeBlock.jsx b/app/visualizer/queue/operations/isempty/codeBlock.jsx
deleted file mode 100755
index c839aee..0000000
--- a/app/visualizer/queue/operations/isempty/codeBlock.jsx
+++ /dev/null
@@ -1,244 +0,0 @@
-'use client';
-import { useState, useRef } from 'react';
-import { FaCopy, FaCheck, FaCode } from 'react-icons/fa';
-import { motion, AnimatePresence } from 'framer-motion';
-import hljs from 'highlight.js';
-import 'highlight.js/styles/github.css';
-import 'highlight.js/styles/github-dark.css';
-
-export const highlightCode = (code, language) => {
-  const validLanguage = hljs.getLanguage(language) ? language : 'plaintext';
-  return hljs.highlight(code, { language: validLanguage }).value;
-};
-
-const CodeBlock = () => {
-  const [selectedLanguage, setSelectedLanguage] = useState("javascript");
-  const [copied, setCopied] = useState(false);
-  const [isHovered, setIsHovered] = useState(false);
-  const topRef = useRef(null);
-
-  const languages = [
-    { id: "javascript", name: "JavaScript" },
-    { id: "python", name: "Python" },
-    { id: "java", name: "Java" },
-    { id: "c", name: "C" },
-    { id: "cpp", name: "C++" },
-  ];
-
-  const copyToClipboard = async (text) => {
-    try {
-      await navigator.clipboard.writeText(text);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    } catch (err) {
-      console.error("Failed to copy text: ", err);
-    }
-  };
-
-  const codeExamples = {
-    javascript: `// Queue Implementation in JavaScript (Linked List)
-class Queue {
-  constructor() {
-    this.front = null;
-    this.rear = null;
-  }
-
-  // Check if queue is empty
-  isEmpty() {
-    return this.front === null;
-  }
-}`,
-  
-    python: `# Queue Implementation in Python (Linked List)
-class Queue:
-    def __init__(self):
-        self.front = None
-        self.rear = None
-    
-    # Check if queue is empty
-    def is_empty(self):
-        return self.front is None`,
-  
-    java: `// Queue Implementation in Java (Array)
-public class ArrayQueue {
-    private int front, rear;
-    private int[] arr;
-    
-    public ArrayQueue(int size) {
-        arr = new int[size];
-        front = rear = -1;
-    }
-    
-    // Check if queue is empty
-    public boolean isEmpty() {
-        return front == -1;
-    }
-}`,
-  
-    c: `// Queue Implementation in C (Array)
-#include <stdbool.h>
-#define MAX_SIZE 100
-
-typedef struct {
-    int arr[MAX_SIZE];
-    int front, rear;
-} Queue;
-
-// Check if queue is empty
-bool isEmpty(Queue *q) {
-    return q->front == -1;
-}`,
-
-    cpp: `// Queue Implementation in C++ (Linked List)
-#include <iostream>
-
-class Node {
-public:
-    int data;
-    Node* next;
-    
-    Node(int val) : data(val), next(nullptr) {}
-};
-
-class Queue {
-private:
-    Node* front;
-    Node* rear;
-    
-public:
-    Queue() : front(nullptr), rear(nullptr) {}
-    
-    ~Queue() {
-        while (front != nullptr) {
-            Node* temp = front;
-            front = front->next;
-            delete temp;
-        }
-    }
-    
-    // Check if queue is empty
-    bool isEmpty() const {
-        return front == nullptr;
-    }
-};`
-  };
-
-  return (
-        <div
-          className="max-w-4xl mx-auto"
-          ref={topRef}
-          onMouseEnter={() => setIsHovered(true)}
-          onMouseLeave={() => setIsHovered(false)}
-        >
-          <motion.div
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.3 }}
-            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-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 (IsEmpty)
-                </h3>
-              </div>
-    
-              <motion.button
-                whileHover={{ scale: 1.05 }}
-                whileTap={{ scale: 0.95 }}
-                onClick={() => copyToClipboard(codeExamples[selectedLanguage])}
-                className="flex items-center gap-2 px-3 py-1.5 bg-gray-100 dark:bg-gray-600 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-500 transition-colors text-gray-800 dark:text-gray-100 text-sm font-medium"
-                aria-label="Copy code"
-              >
-                <AnimatePresence mode="wait">
-                  {copied ? (
-                    <motion.span
-                      key="check"
-                      initial={{ opacity: 0 }}
-                      animate={{ opacity: 1 }}
-                      exit={{ opacity: 0 }}
-                      className="flex items-center text-green-600 dark:text-green-400"
-                    >
-                      <FaCheck className="mr-1" /> Copied
-                    </motion.span>
-                  ) : (
-                    <motion.span
-                      key="copy"
-                      initial={{ opacity: 0 }}
-                      animate={{ opacity: 1 }}
-                      exit={{ opacity: 0 }}
-                      className="flex items-center"
-                    >
-                      <FaCopy className="mr-1" /> Copy Code
-                    </motion.span>
-                  )}
-                </AnimatePresence>
-              </motion.button>
-            </div>
-    
-            {/* Language Selector */}
-            <div className="px-4 pt-3 pb-2 flex flex-wrap gap-2 border-b border-gray-200 dark:border-gray-700">
-              {languages.map((lang) => (
-                <motion.button
-                  key={lang.id}
-                  whileHover={{ scale: 1.03 }}
-                  whileTap={{ scale: 0.97 }}
-                  onClick={() => setSelectedLanguage(lang.id)}
-                  className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-colors ${
-                    selectedLanguage === lang.id
-                      ? "bg-blue-500 text-white shadow-md"
-                      : "bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-600"
-                  }`}
-                >
-                  {lang.name}
-                </motion.button>
-              ))}
-            </div>
-    
-            {/* Code Block */}
-            <div className="relative">
-              <AnimatePresence mode="wait">
-                <motion.div
-                  key={selectedLanguage}
-                  initial={{ opacity: 0 }}
-                  animate={{ opacity: 1 }}
-                  exit={{ opacity: 0 }}
-                  transition={{ duration: 0.2 }}
-                  className="overflow-x-auto p-4 bg-gray-900 text-white"
-                >
-                  <pre className="text-sm leading-relaxed">
-                    <code
-                      className={`language-${selectedLanguage}`}
-                      dangerouslySetInnerHTML={{
-                        __html: highlightCode(
-                          codeExamples[selectedLanguage],
-                          selectedLanguage
-                        ),
-                      }}
-                    />
-                  </pre>
-                </motion.div>
-              </AnimatePresence>
-    
-              {/* Language indicator (shown on hover) */}
-              <AnimatePresence>
-                {isHovered && (
-                  <motion.div
-                    initial={{ opacity: 0, y: 10 }}
-                    animate={{ opacity: 1, y: 0 }}
-                    exit={{ opacity: 0, y: 10 }}
-                    className="absolute bottom-3 right-3 px-2 py-1 bg-gray-800 text-gray-300 text-xs rounded-md"
-                  >
-                    {selectedLanguage.toUpperCase()}
-                  </motion.div>
-                )}
-              </AnimatePresence>
-            </div>
-          </motion.div>
-        </div>
-      );
-    };
-    
-    export default CodeBlock;
\ No newline at end of file
diff --git a/app/visualizer/queue/operations/isempty/page.jsx b/app/visualizer/queue/operations/isempty/page.jsx
index 66f0b54..0023311 100755
--- a/app/visualizer/queue/operations/isempty/page.jsx
+++ b/app/visualizer/queue/operations/isempty/page.jsx
@@ -3,7 +3,8 @@ import Navbar from "@/app/components/navbarinner";
 import ModuleHeader from "@/app/components/modules/Header";
 import Content from "@/app/visualizer/queue/operations/isempty/content";
 import Quiz from "@/app/visualizer/queue/operations/isempty/quiz";
-import Code from "@/app/visualizer/queue/operations/isempty/codeBlock";
+import CodeBlock from "@/app/components/modules/CodeBlock";
+import codeExamples from "./code";
 import ModuleCard from "@/app/components/ui/ModuleCard";
 import { MODULE_MAPS } from "@/lib/modulesMap";
 import ExploreOther from '@/app/components/ui/exploreOther';
@@ -71,7 +72,7 @@ export default function Page() {
         </section>
 
         <section className="px-6">
-          <Code />
+          <CodeBlock title="Queue Implementation (IsEmpty)" codeExamples={codeExamples} />
         </section>
 
         <section className="px-6 md:px-12 my-12">
diff --git a/app/visualizer/queue/operations/isfull/code.js b/app/visualizer/queue/operations/isfull/code.js
new file mode 100755
index 0000000..0886823
--- /dev/null
+++ b/app/visualizer/queue/operations/isfull/code.js
@@ -0,0 +1,81 @@
+const codeExamples = {
+    javascript: `// Array Queue isFull in JavaScript
+class ArrayQueue {
+  constructor(capacity) {
+    this.arr = new Array(capacity);
+    this.front = -1;
+    this.rear = -1;
+    this.capacity = capacity;
+  }
+
+  isFull() {
+    return (this.rear + 1) % this.capacity === this.front;
+  }
+}`,
+
+    python: `# Array Queue isFull in Python
+class ArrayQueue:
+    def __init__(self, capacity):
+        self.arr = [None] * capacity
+        self.front = -1
+        self.rear = -1
+        self.capacity = capacity
+    
+    def is_full(self):
+        return (self.rear + 1) % self.capacity == self.front`,
+
+    java: `// Array Queue isFull in Java
+public class ArrayQueue {
+    private int[] arr;
+    private int front, rear, capacity;
+    
+    public ArrayQueue(int size) {
+        capacity = size;
+        arr = new int[capacity];
+        front = rear = -1;
+    }
+    
+    public boolean isFull() {
+        return (rear + 1) % capacity == front;
+    }
+}`,
+
+    c: `// Array Queue isFull in C
+#include <stdbool.h>
+#define MAX_SIZE 100
+
+typedef struct {
+    int arr[MAX_SIZE];
+    int front, rear;
+} Queue;
+
+bool isFull(Queue *q) {
+    return (q->rear + 1) % MAX_SIZE == q->front;
+}`,
+
+    cpp: `// Array Queue isFull in C++
+#include <iostream>
+
+class ArrayQueue {
+private:
+    int* arr;
+    int front;
+    int rear;
+    int capacity;
+    
+public:
+    ArrayQueue(int size) : front(-1), rear(-1), capacity(size) {
+        arr = new int[capacity];
+    }
+    
+    ~ArrayQueue() {
+        delete[] arr;
+    }
+    
+    bool isFull() const {
+        return (rear + 1) % capacity == front;
+    }
+};`
+  };
+
+export default codeExamples;
diff --git a/app/visualizer/queue/operations/isfull/codeBlock.jsx b/app/visualizer/queue/operations/isfull/codeBlock.jsx
deleted file mode 100755
index e11b578..0000000
--- a/app/visualizer/queue/operations/isfull/codeBlock.jsx
+++ /dev/null
@@ -1,236 +0,0 @@
-'use client';
-import { useState, useRef } from 'react';
-import { FaCopy, FaCheck, FaCode } from 'react-icons/fa';
-import { motion, AnimatePresence } from 'framer-motion';
-import hljs from 'highlight.js';
-import 'highlight.js/styles/github.css';
-import 'highlight.js/styles/github-dark.css';
-
-export const highlightCode = (code, language) => {
-  const validLanguage = hljs.getLanguage(language) ? language : 'plaintext';
-  return hljs.highlight(code, { language: validLanguage }).value;
-};
-
-const CodeBlock = () => {
-  const [selectedLanguage, setSelectedLanguage] = useState("javascript");
-  const [copied, setCopied] = useState(false);
-  const [isHovered, setIsHovered] = useState(false);
-  const topRef = useRef(null);
-
-  const languages = [
-    { id: "javascript", name: "JavaScript" },
-    { id: "python", name: "Python" },
-    { id: "java", name: "Java" },
-    { id: "c", name: "C" },
-    { id: "cpp", name: "C++" },
-  ];
-
-  const copyToClipboard = async (text) => {
-    try {
-      await navigator.clipboard.writeText(text);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    } catch (err) {
-      console.error("Failed to copy text: ", err);
-    }
-  };
-
-  const codeExamples = {
-    javascript: `// Array Queue isFull in JavaScript
-class ArrayQueue {
-  constructor(capacity) {
-    this.arr = new Array(capacity);
-    this.front = -1;
-    this.rear = -1;
-    this.capacity = capacity;
-  }
-
-  isFull() {
-    return (this.rear + 1) % this.capacity === this.front;
-  }
-}`,
-
-    python: `# Array Queue isFull in Python
-class ArrayQueue:
-    def __init__(self, capacity):
-        self.arr = [None] * capacity
-        self.front = -1
-        self.rear = -1
-        self.capacity = capacity
-    
-    def is_full(self):
-        return (self.rear + 1) % self.capacity == self.front`,
-
-    java: `// Array Queue isFull in Java
-public class ArrayQueue {
-    private int[] arr;
-    private int front, rear, capacity;
-    
-    public ArrayQueue(int size) {
-        capacity = size;
-        arr = new int[capacity];
-        front = rear = -1;
-    }
-    
-    public boolean isFull() {
-        return (rear + 1) % capacity == front;
-    }
-}`,
-
-    c: `// Array Queue isFull in C
-#include <stdbool.h>
-#define MAX_SIZE 100
-
-typedef struct {
-    int arr[MAX_SIZE];
-    int front, rear;
-} Queue;
-
-bool isFull(Queue *q) {
-    return (q->rear + 1) % MAX_SIZE == q->front;
-}`,
-
-    cpp: `// Array Queue isFull in C++
-#include <iostream>
-
-class ArrayQueue {
-private:
-    int* arr;
-    int front;
-    int rear;
-    int capacity;
-    
-public:
-    ArrayQueue(int size) : front(-1), rear(-1), capacity(size) {
-        arr = new int[capacity];
-    }
-    
-    ~ArrayQueue() {
-        delete[] arr;
-    }
-    
-    bool isFull() const {
-        return (rear + 1) % capacity == front;
-    }
-};`
-  };
-
-  return (
-       <div
-         className="max-w-4xl mx-auto"
-         ref={topRef}
-         onMouseEnter={() => setIsHovered(true)}
-         onMouseLeave={() => setIsHovered(false)}
-       >
-         <motion.div
-           initial={{ opacity: 0, y: 20 }}
-           animate={{ opacity: 1, y: 0 }}
-           transition={{ duration: 0.3 }}
-           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-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 IsFull Operation
-               </h3>
-             </div>
-   
-             <motion.button
-               whileHover={{ scale: 1.05 }}
-               whileTap={{ scale: 0.95 }}
-               onClick={() => copyToClipboard(codeExamples[selectedLanguage])}
-               className="flex items-center gap-2 px-3 py-1.5 bg-gray-100 dark:bg-gray-600 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-500 transition-colors text-gray-800 dark:text-gray-100 text-sm font-medium"
-               aria-label="Copy code"
-             >
-               <AnimatePresence mode="wait">
-                 {copied ? (
-                   <motion.span
-                     key="check"
-                     initial={{ opacity: 0 }}
-                     animate={{ opacity: 1 }}
-                     exit={{ opacity: 0 }}
-                     className="flex items-center text-green-600 dark:text-green-400"
-                   >
-                     <FaCheck className="mr-1" /> Copied
-                   </motion.span>
-                 ) : (
-                   <motion.span
-                     key="copy"
-                     initial={{ opacity: 0 }}
-                     animate={{ opacity: 1 }}
-                     exit={{ opacity: 0 }}
-                     className="flex items-center"
-                   >
-                     <FaCopy className="mr-1" /> Copy Code
-                   </motion.span>
-                 )}
-               </AnimatePresence>
-             </motion.button>
-           </div>
-   
-           {/* Language Selector */}
-           <div className="px-4 pt-3 pb-2 flex flex-wrap gap-2 border-b border-gray-200 dark:border-gray-700">
-             {languages.map((lang) => (
-               <motion.button
-                 key={lang.id}
-                 whileHover={{ scale: 1.03 }}
-                 whileTap={{ scale: 0.97 }}
-                 onClick={() => setSelectedLanguage(lang.id)}
-                 className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-colors ${
-                   selectedLanguage === lang.id
-                     ? "bg-blue-500 text-white shadow-md"
-                     : "bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-600"
-                 }`}
-               >
-                 {lang.name}
-               </motion.button>
-             ))}
-           </div>
-   
-           {/* Code Block */}
-           <div className="relative">
-             <AnimatePresence mode="wait">
-               <motion.div
-                 key={selectedLanguage}
-                 initial={{ opacity: 0 }}
-                 animate={{ opacity: 1 }}
-                 exit={{ opacity: 0 }}
-                 transition={{ duration: 0.2 }}
-                 className="overflow-x-auto p-4 bg-gray-900 text-white"
-               >
-                 <pre className="text-sm leading-relaxed">
-                   <code
-                     className={`language-${selectedLanguage}`}
-                     dangerouslySetInnerHTML={{
-                       __html: highlightCode(
-                         codeExamples[selectedLanguage],
-                         selectedLanguage
-                       ),
-                     }}
-                   />
-                 </pre>
-               </motion.div>
-             </AnimatePresence>
-   
-             {/* Language indicator (shown on hover) */}
-             <AnimatePresence>
-               {isHovered && (
-                 <motion.div
-                   initial={{ opacity: 0, y: 10 }}
-                   animate={{ opacity: 1, y: 0 }}
-                   exit={{ opacity: 0, y: 10 }}
-                   className="absolute bottom-3 right-3 px-2 py-1 bg-gray-800 text-gray-300 text-xs rounded-md"
-                 >
-                   {selectedLanguage.toUpperCase()}
-                 </motion.div>
-               )}
-             </AnimatePresence>
-           </div>
-         </motion.div>
-       </div>
-     );
-   };
-   
-   export default CodeBlock;
\ No newline at end of file
diff --git a/app/visualizer/queue/operations/isfull/page.jsx b/app/visualizer/queue/operations/isfull/page.jsx
index 0b018d5..b8e14bd 100755
--- a/app/visualizer/queue/operations/isfull/page.jsx
+++ b/app/visualizer/queue/operations/isfull/page.jsx
@@ -3,7 +3,8 @@ import Navbar from "@/app/components/navbarinner";
 import ModuleHeader from "@/app/components/modules/Header";
 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 CodeBlock from "@/app/components/modules/CodeBlock";
+import codeExamples from "./code";
 import ModuleCard from "@/app/components/ui/ModuleCard";
 import { MODULE_MAPS } from "@/lib/modulesMap";
 import ExploreOther from '@/app/components/ui/exploreOther';
@@ -71,7 +72,7 @@ export default function page() {
         </section>
 
         <section className="px-6">
-          <Code />
+          <CodeBlock title="Queue IsFull Operation" codeExamples={codeExamples} />
         </section>
 
         <section className="px-6 md:px-12 my-12">
diff --git a/app/visualizer/queue/operations/peek-front/code.js b/app/visualizer/queue/operations/peek-front/code.js
new file mode 100755
index 0000000..f26a6c1
--- /dev/null
+++ b/app/visualizer/queue/operations/peek-front/code.js
@@ -0,0 +1,124 @@
+const codeExamples = {
+    javascript: `// Queue peek (front) in JavaScript
+class Queue {
+  constructor() {
+    this.items = [];
+  }
+
+  // Get front element without removing
+  peek() {
+    if (this.isEmpty()) {
+      return "Queue is empty";
+    }
+    return this.items[0];
+  }
+
+  // Helper method
+  isEmpty() {
+    return this.items.length === 0;
+  }
+}`,
+
+    python: `# Queue peek (front) in Python
+class Queue:
+    def __init__(self):
+        self.items = []
+    
+    # Get front element without removing
+    def peek(self):
+        if self.is_empty():
+            return "Queue is empty"
+        return self.items[0]
+    
+    # Helper method
+    def is_empty(self):
+        return len(self.items) == 0`,
+
+    java: `// Queue peek (front) in Java
+import java.util.LinkedList;
+import java.util.Queue;
+
+public class Main {
+    public static void main(String[] args) {
+        Queue<Integer> queue = new LinkedList<>();
+        
+        // Peek at front element
+        Integer front = queue.peek();
+        System.out.println("Front element: " + front);
+    }
+}`,
+
+    c: `// Queue peek (front) in C
+#include <stdio.h>
+#define MAX_SIZE 100
+
+typedef struct {
+    int items[MAX_SIZE];
+    int front, rear;
+} Queue;
+
+int peek(Queue *q) {
+    if (q->front == -1) {
+        printf("Queue is empty\n");
+        return -1;
+    }
+    return q->items[q->front];
+}`,
+
+    cpp: `// Queue peek (front) in C++
+#include <iostream>
+#include <queue>
+
+int main() {
+    std::queue<int> q;
+    
+    // Using STL queue's front() method
+    if (!q.empty()) {
+        std::cout << "Front element: " << q.front() << std::endl;
+    } else {
+        std::cout << "Queue is empty" << std::endl;
+    }
+
+    // Custom queue implementation
+    class CustomQueue {
+    private:
+        struct Node {
+            int data;
+            Node* next;
+            Node(int val) : data(val), next(nullptr) {}
+        };
+        Node* front;
+        Node* rear;
+        
+    public:
+        CustomQueue() : front(nullptr), rear(nullptr) {}
+        
+        ~CustomQueue() {
+            while (front != nullptr) {
+                Node* temp = front;
+                front = front->next;
+                delete temp;
+            }
+        }
+        
+        int peek() const {
+            if (front == nullptr) {
+                std::cout << "Queue is empty" << std::endl;
+                return -1;
+            }
+            return front->data;
+        }
+        
+        bool isEmpty() const {
+            return front == nullptr;
+        }
+    };
+    
+    CustomQueue customQ;
+    std::cout << "Custom queue front: " << customQ.peek() << std::endl;
+    
+    return 0;
+}`
+  };
+
+export default codeExamples;
diff --git a/app/visualizer/queue/operations/peek-front/codeBlock.jsx b/app/visualizer/queue/operations/peek-front/codeBlock.jsx
deleted file mode 100755
index 882d98d..0000000
--- a/app/visualizer/queue/operations/peek-front/codeBlock.jsx
+++ /dev/null
@@ -1,279 +0,0 @@
-'use client';
-import { useState, useRef } from 'react';
-import { FaCopy, FaCheck, FaCode } from 'react-icons/fa';
-import { motion, AnimatePresence } from 'framer-motion';
-import hljs from 'highlight.js';
-import 'highlight.js/styles/github.css';
-import 'highlight.js/styles/github-dark.css';
-
-export const highlightCode = (code, language) => {
-  const validLanguage = hljs.getLanguage(language) ? language : 'plaintext';
-  return hljs.highlight(code, { language: validLanguage }).value;
-};
-
-const CodeBlock = () => {
-  const [selectedLanguage, setSelectedLanguage] = useState("javascript");
-  const [copied, setCopied] = useState(false);
-  const [isHovered, setIsHovered] = useState(false);
-  const topRef = useRef(null);
-
-  const languages = [
-    { id: "javascript", name: "JavaScript" },
-    { id: "python", name: "Python" },
-    { id: "java", name: "Java" },
-    { id: "c", name: "C" },
-    { id: "cpp", name: "C++" },
-  ];
-
-  const copyToClipboard = async (text) => {
-    try {
-      await navigator.clipboard.writeText(text);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    } catch (err) {
-      console.error("Failed to copy text: ", err);
-    }
-  };
-
-  const codeExamples = {
-    javascript: `// Queue peek (front) in JavaScript
-class Queue {
-  constructor() {
-    this.items = [];
-  }
-
-  // Get front element without removing
-  peek() {
-    if (this.isEmpty()) {
-      return "Queue is empty";
-    }
-    return this.items[0];
-  }
-
-  // Helper method
-  isEmpty() {
-    return this.items.length === 0;
-  }
-}`,
-
-    python: `# Queue peek (front) in Python
-class Queue:
-    def __init__(self):
-        self.items = []
-    
-    # Get front element without removing
-    def peek(self):
-        if self.is_empty():
-            return "Queue is empty"
-        return self.items[0]
-    
-    # Helper method
-    def is_empty(self):
-        return len(self.items) == 0`,
-
-    java: `// Queue peek (front) in Java
-import java.util.LinkedList;
-import java.util.Queue;
-
-public class Main {
-    public static void main(String[] args) {
-        Queue<Integer> queue = new LinkedList<>();
-        
-        // Peek at front element
-        Integer front = queue.peek();
-        System.out.println("Front element: " + front);
-    }
-}`,
-
-    c: `// Queue peek (front) in C
-#include <stdio.h>
-#define MAX_SIZE 100
-
-typedef struct {
-    int items[MAX_SIZE];
-    int front, rear;
-} Queue;
-
-int peek(Queue *q) {
-    if (q->front == -1) {
-        printf("Queue is empty\n");
-        return -1;
-    }
-    return q->items[q->front];
-}`,
-
-    cpp: `// Queue peek (front) in C++
-#include <iostream>
-#include <queue>
-
-int main() {
-    std::queue<int> q;
-    
-    // Using STL queue's front() method
-    if (!q.empty()) {
-        std::cout << "Front element: " << q.front() << std::endl;
-    } else {
-        std::cout << "Queue is empty" << std::endl;
-    }
-
-    // Custom queue implementation
-    class CustomQueue {
-    private:
-        struct Node {
-            int data;
-            Node* next;
-            Node(int val) : data(val), next(nullptr) {}
-        };
-        Node* front;
-        Node* rear;
-        
-    public:
-        CustomQueue() : front(nullptr), rear(nullptr) {}
-        
-        ~CustomQueue() {
-            while (front != nullptr) {
-                Node* temp = front;
-                front = front->next;
-                delete temp;
-            }
-        }
-        
-        int peek() const {
-            if (front == nullptr) {
-                std::cout << "Queue is empty" << std::endl;
-                return -1;
-            }
-            return front->data;
-        }
-        
-        bool isEmpty() const {
-            return front == nullptr;
-        }
-    };
-    
-    CustomQueue customQ;
-    std::cout << "Custom queue front: " << customQ.peek() << std::endl;
-    
-    return 0;
-}`
-  };
-
- return (
-     <div
-       className="max-w-4xl mx-auto"
-       ref={topRef}
-       onMouseEnter={() => setIsHovered(true)}
-       onMouseLeave={() => setIsHovered(false)}
-     >
-       <motion.div
-         initial={{ opacity: 0, y: 20 }}
-         animate={{ opacity: 1, y: 0 }}
-         transition={{ duration: 0.3 }}
-         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-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 Peek Front
-             </h3>
-           </div>
- 
-           <motion.button
-             whileHover={{ scale: 1.05 }}
-             whileTap={{ scale: 0.95 }}
-             onClick={() => copyToClipboard(codeExamples[selectedLanguage])}
-             className="flex items-center gap-2 px-3 py-1.5 bg-gray-100 dark:bg-gray-600 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-500 transition-colors text-gray-800 dark:text-gray-100 text-sm font-medium"
-             aria-label="Copy code"
-           >
-             <AnimatePresence mode="wait">
-               {copied ? (
-                 <motion.span
-                   key="check"
-                   initial={{ opacity: 0 }}
-                   animate={{ opacity: 1 }}
-                   exit={{ opacity: 0 }}
-                   className="flex items-center text-green-600 dark:text-green-400"
-                 >
-                   <FaCheck className="mr-1" /> Copied
-                 </motion.span>
-               ) : (
-                 <motion.span
-                   key="copy"
-                   initial={{ opacity: 0 }}
-                   animate={{ opacity: 1 }}
-                   exit={{ opacity: 0 }}
-                   className="flex items-center"
-                 >
-                   <FaCopy className="mr-1" /> Copy Code
-                 </motion.span>
-               )}
-             </AnimatePresence>
-           </motion.button>
-         </div>
- 
-         {/* Language Selector */}
-         <div className="px-4 pt-3 pb-2 flex flex-wrap gap-2 border-b border-gray-200 dark:border-gray-700">
-           {languages.map((lang) => (
-             <motion.button
-               key={lang.id}
-               whileHover={{ scale: 1.03 }}
-               whileTap={{ scale: 0.97 }}
-               onClick={() => setSelectedLanguage(lang.id)}
-               className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-colors ${
-                 selectedLanguage === lang.id
-                   ? "bg-blue-500 text-white shadow-md"
-                   : "bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-600"
-               }`}
-             >
-               {lang.name}
-             </motion.button>
-           ))}
-         </div>
- 
-         {/* Code Block */}
-         <div className="relative">
-           <AnimatePresence mode="wait">
-             <motion.div
-               key={selectedLanguage}
-               initial={{ opacity: 0 }}
-               animate={{ opacity: 1 }}
-               exit={{ opacity: 0 }}
-               transition={{ duration: 0.2 }}
-               className="overflow-x-auto p-4 bg-gray-900 text-white"
-             >
-               <pre className="text-sm leading-relaxed">
-                 <code
-                   className={`language-${selectedLanguage}`}
-                   dangerouslySetInnerHTML={{
-                     __html: highlightCode(
-                       codeExamples[selectedLanguage],
-                       selectedLanguage
-                     ),
-                   }}
-                 />
-               </pre>
-             </motion.div>
-           </AnimatePresence>
- 
-           {/* Language indicator (shown on hover) */}
-           <AnimatePresence>
-             {isHovered && (
-               <motion.div
-                 initial={{ opacity: 0, y: 10 }}
-                 animate={{ opacity: 1, y: 0 }}
-                 exit={{ opacity: 0, y: 10 }}
-                 className="absolute bottom-3 right-3 px-2 py-1 bg-gray-800 text-gray-300 text-xs rounded-md"
-               >
-                 {selectedLanguage.toUpperCase()}
-               </motion.div>
-             )}
-           </AnimatePresence>
-         </div>
-       </motion.div>
-     </div>
-   );
- };
- 
- export default CodeBlock;
\ No newline at end of file
diff --git a/app/visualizer/queue/operations/peek-front/page.jsx b/app/visualizer/queue/operations/peek-front/page.jsx
index 6417065..ca95270 100755
--- a/app/visualizer/queue/operations/peek-front/page.jsx
+++ b/app/visualizer/queue/operations/peek-front/page.jsx
@@ -3,7 +3,8 @@ import Navbar from "@/app/components/navbarinner";
 import ModuleHeader from "@/app/components/modules/Header";
 import Content from "@/app/visualizer/queue/operations/peek-front/content";
 import Quiz from "@/app/visualizer/queue/operations/peek-front/quiz";
-import Code from "@/app/visualizer/queue/operations/peek-front/codeBlock";
+import CodeBlock from "@/app/components/modules/CodeBlock";
+import codeExamples from "./code";
 import ModuleCard from "@/app/components/ui/ModuleCard";
 import { MODULE_MAPS } from "@/lib/modulesMap";
 import ExploreOther from '@/app/components/ui/exploreOther';
@@ -73,7 +74,7 @@ export default function Page() {
         </section>
 
         <section className="px-6">
-          <Code />
+          <CodeBlock title="Queue Peek Front" codeExamples={codeExamples} />
         </section>
 
         <section className="px-6 md:px-12 my-12">
diff --git a/app/visualizer/queue/types/circular/codeBlock.jsx b/app/visualizer/queue/types/circular/code.js
similarity index 64%
rename from app/visualizer/queue/types/circular/codeBlock.jsx
rename to app/visualizer/queue/types/circular/code.js
index cc8da12..7e7612a 100755
--- a/app/visualizer/queue/types/circular/codeBlock.jsx
+++ b/app/visualizer/queue/types/circular/code.js
@@ -1,41 +1,4 @@
-'use client';
-import { useState, useRef } from 'react';
-import { FaCopy, FaCheck, FaCode } from 'react-icons/fa';
-import { motion, AnimatePresence } from 'framer-motion';
-import hljs from 'highlight.js';
-import 'highlight.js/styles/github.css';
-import 'highlight.js/styles/github-dark.css';
-
-export const highlightCode = (code, language) => {
-  const validLanguage = hljs.getLanguage(language) ? language : 'plaintext';
-  return hljs.highlight(code, { language: validLanguage }).value;
-};
-
-const CodeBlock = () => {
-  const [selectedLanguage, setSelectedLanguage] = useState("javascript");
-  const [copied, setCopied] = useState(false);
-  const [isHovered, setIsHovered] = useState(false);
-  const topRef = useRef(null);
-
-  const languages = [
-    { id: "javascript", name: "JavaScript" },
-    { id: "python", name: "Python" },
-    { id: "java", name: "Java" },
-    { id: "c", name: "C" },
-    { id: "cpp", name: "C++" },
-  ];
-
-  const copyToClipboard = async (text) => {
-    try {
-      await navigator.clipboard.writeText(text);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    } catch (err) {
-      console.error("Failed to copy text: ", err);
-    }
-  };
-  
-  const codeExamples = {
+const codeExamples = {
     javascript: `// Circular Queue Implementation (JavaScript)
 class CircularQueue {
   constructor(capacity) {
@@ -543,122 +506,4 @@ int main() {
 }`
   };
 
-  return (
-       <div
-         className="max-w-4xl mx-auto"
-         ref={topRef}
-         onMouseEnter={() => setIsHovered(true)}
-         onMouseLeave={() => setIsHovered(false)}
-       >
-         <motion.div
-           initial={{ opacity: 0, y: 20 }}
-           animate={{ opacity: 1, y: 0 }}
-           transition={{ duration: 0.3 }}
-           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-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">
-                 Double Ended Queue Implementation
-               </h3>
-             </div>
-   
-             <motion.button
-               whileHover={{ scale: 1.05 }}
-               whileTap={{ scale: 0.95 }}
-               onClick={() => copyToClipboard(codeExamples[selectedLanguage])}
-               className="flex items-center gap-2 px-3 py-1.5 bg-gray-100 dark:bg-gray-600 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-500 transition-colors text-gray-800 dark:text-gray-100 text-sm font-medium"
-               aria-label="Copy code"
-             >
-               <AnimatePresence mode="wait">
-                 {copied ? (
-                   <motion.span
-                     key="check"
-                     initial={{ opacity: 0 }}
-                     animate={{ opacity: 1 }}
-                     exit={{ opacity: 0 }}
-                     className="flex items-center text-green-600 dark:text-green-400"
-                   >
-                     <FaCheck className="mr-1" /> Copied
-                   </motion.span>
-                 ) : (
-                   <motion.span
-                     key="copy"
-                     initial={{ opacity: 0 }}
-                     animate={{ opacity: 1 }}
-                     exit={{ opacity: 0 }}
-                     className="flex items-center"
-                   >
-                     <FaCopy className="mr-1" /> Copy Code
-                   </motion.span>
-                 )}
-               </AnimatePresence>
-             </motion.button>
-           </div>
-   
-           {/* Language Selector */}
-           <div className="px-4 pt-3 pb-2 flex flex-wrap gap-2 border-b border-gray-200 dark:border-gray-700">
-             {languages.map((lang) => (
-               <motion.button
-                 key={lang.id}
-                 whileHover={{ scale: 1.03 }}
-                 whileTap={{ scale: 0.97 }}
-                 onClick={() => setSelectedLanguage(lang.id)}
-                 className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-colors ${
-                   selectedLanguage === lang.id
-                     ? "bg-blue-500 text-white shadow-md"
-                     : "bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-600"
-                 }`}
-               >
-                 {lang.name}
-               </motion.button>
-             ))}
-           </div>
-   
-           {/* Code Block */}
-           <div className="relative">
-             <AnimatePresence mode="wait">
-               <motion.div
-                 key={selectedLanguage}
-                 initial={{ opacity: 0 }}
-                 animate={{ opacity: 1 }}
-                 exit={{ opacity: 0 }}
-                 transition={{ duration: 0.2 }}
-                 className="overflow-x-auto p-4 bg-gray-900 text-white"
-               >
-                 <pre className="text-sm leading-relaxed">
-                   <code
-                     className={`language-${selectedLanguage}`}
-                     dangerouslySetInnerHTML={{
-                       __html: highlightCode(
-                         codeExamples[selectedLanguage],
-                         selectedLanguage
-                       ),
-                     }}
-                   />
-                 </pre>
-               </motion.div>
-             </AnimatePresence>
-   
-             {/* Language indicator (shown on hover) */}
-             <AnimatePresence>
-               {isHovered && (
-                 <motion.div
-                   initial={{ opacity: 0, y: 10 }}
-                   animate={{ opacity: 1, y: 0 }}
-                   exit={{ opacity: 0, y: 10 }}
-                   className="absolute bottom-3 right-3 px-2 py-1 bg-gray-800 text-gray-300 text-xs rounded-md"
-                 >
-                   {selectedLanguage.toUpperCase()}
-                 </motion.div>
-               )}
-             </AnimatePresence>
-           </div>
-         </motion.div>
-       </div>
-     );
-   };
-   
-   export default CodeBlock;
\ No newline at end of file
+export default codeExamples;
diff --git a/app/visualizer/queue/types/circular/page.jsx b/app/visualizer/queue/types/circular/page.jsx
index 0b78e8e..001bb9b 100755
--- a/app/visualizer/queue/types/circular/page.jsx
+++ b/app/visualizer/queue/types/circular/page.jsx
@@ -3,7 +3,8 @@ import Navbar from "@/app/components/navbarinner";
 import ModuleHeader from "@/app/components/modules/Header";
 import Content from "@/app/visualizer/queue/types/circular/content";
 import Quiz from "@/app/visualizer/queue/types/circular/quiz";
-import Code from "@/app/visualizer/queue/types/circular/codeBlock";
+import CodeBlock from "@/app/components/modules/CodeBlock";
+import codeExamples from "./code";
 import ModuleCard from "@/app/components/ui/ModuleCard";
 import { MODULE_MAPS } from "@/lib/modulesMap";
 import ExploreOther from "@/app/components/ui/exploreOther";
@@ -71,7 +72,7 @@ export default function Page() {
         </section>
 
         <section className="px-6">
-          <Code />
+          <CodeBlock title="Circular Queue Implementation" codeExamples={codeExamples} />
         </section>
 
         <section className="px-6 md:px-12 my-12">
diff --git a/app/visualizer/queue/types/deque/codeBlock.jsx b/app/visualizer/queue/types/deque/code.js
similarity index 72%
rename from app/visualizer/queue/types/deque/codeBlock.jsx
rename to app/visualizer/queue/types/deque/code.js
index 2820970..2862fb5 100755
--- a/app/visualizer/queue/types/deque/codeBlock.jsx
+++ b/app/visualizer/queue/types/deque/code.js
@@ -1,41 +1,4 @@
-'use client';
-import { useState, useRef } from 'react';
-import { FaCopy, FaCheck, FaCode } from 'react-icons/fa';
-import { motion, AnimatePresence } from 'framer-motion';
-import hljs from 'highlight.js';
-import 'highlight.js/styles/github.css';
-import 'highlight.js/styles/github-dark.css';
-
-export const highlightCode = (code, language) => {
-  const validLanguage = hljs.getLanguage(language) ? language : 'plaintext';
-  return hljs.highlight(code, { language: validLanguage }).value;
-};
-
-const CodeBlock = () => {
-  const [selectedLanguage, setSelectedLanguage] = useState("javascript");
-  const [copied, setCopied] = useState(false);
-  const [isHovered, setIsHovered] = useState(false);
-  const topRef = useRef(null);
-
-  const languages = [
-    { id: "javascript", name: "JavaScript" },
-    { id: "python", name: "Python" },
-    { id: "java", name: "Java" },
-    { id: "c", name: "C" },
-    { id: "cpp", name: "C++" },
-  ];
-
-  const copyToClipboard = async (text) => {
-    try {
-      await navigator.clipboard.writeText(text);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    } catch (err) {
-      console.error("Failed to copy text: ", err);
-    }
-  };
-  
-  const codeExamples = {
+const codeExamples = {
     javascript: `// Double-Ended Queue Implementation (JavaScript)
 class Deque {
   constructor(size = 10) {
@@ -748,122 +711,4 @@ int main() {
 }`
   };
 
-  return (
-     <div
-       className="max-w-4xl mx-auto"
-       ref={topRef}
-       onMouseEnter={() => setIsHovered(true)}
-       onMouseLeave={() => setIsHovered(false)}
-     >
-       <motion.div
-         initial={{ opacity: 0, y: 20 }}
-         animate={{ opacity: 1, y: 0 }}
-         transition={{ duration: 0.3 }}
-         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-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">
-               Double Ended Queue Implementation
-             </h3>
-           </div>
- 
-           <motion.button
-             whileHover={{ scale: 1.05 }}
-             whileTap={{ scale: 0.95 }}
-             onClick={() => copyToClipboard(codeExamples[selectedLanguage])}
-             className="flex items-center gap-2 px-3 py-1.5 bg-gray-100 dark:bg-gray-600 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-500 transition-colors text-gray-800 dark:text-gray-100 text-sm font-medium"
-             aria-label="Copy code"
-           >
-             <AnimatePresence mode="wait">
-               {copied ? (
-                 <motion.span
-                   key="check"
-                   initial={{ opacity: 0 }}
-                   animate={{ opacity: 1 }}
-                   exit={{ opacity: 0 }}
-                   className="flex items-center text-green-600 dark:text-green-400"
-                 >
-                   <FaCheck className="mr-1" /> Copied
-                 </motion.span>
-               ) : (
-                 <motion.span
-                   key="copy"
-                   initial={{ opacity: 0 }}
-                   animate={{ opacity: 1 }}
-                   exit={{ opacity: 0 }}
-                   className="flex items-center"
-                 >
-                   <FaCopy className="mr-1" /> Copy Code
-                 </motion.span>
-               )}
-             </AnimatePresence>
-           </motion.button>
-         </div>
- 
-         {/* Language Selector */}
-         <div className="px-4 pt-3 pb-2 flex flex-wrap gap-2 border-b border-gray-200 dark:border-gray-700">
-           {languages.map((lang) => (
-             <motion.button
-               key={lang.id}
-               whileHover={{ scale: 1.03 }}
-               whileTap={{ scale: 0.97 }}
-               onClick={() => setSelectedLanguage(lang.id)}
-               className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-colors ${
-                 selectedLanguage === lang.id
-                   ? "bg-blue-500 text-white shadow-md"
-                   : "bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-600"
-               }`}
-             >
-               {lang.name}
-             </motion.button>
-           ))}
-         </div>
- 
-         {/* Code Block */}
-         <div className="relative">
-           <AnimatePresence mode="wait">
-             <motion.div
-               key={selectedLanguage}
-               initial={{ opacity: 0 }}
-               animate={{ opacity: 1 }}
-               exit={{ opacity: 0 }}
-               transition={{ duration: 0.2 }}
-               className="overflow-x-auto p-4 bg-gray-900 text-white"
-             >
-               <pre className="text-sm leading-relaxed">
-                 <code
-                   className={`language-${selectedLanguage}`}
-                   dangerouslySetInnerHTML={{
-                     __html: highlightCode(
-                       codeExamples[selectedLanguage],
-                       selectedLanguage
-                     ),
-                   }}
-                 />
-               </pre>
-             </motion.div>
-           </AnimatePresence>
- 
-           {/* Language indicator (shown on hover) */}
-           <AnimatePresence>
-             {isHovered && (
-               <motion.div
-                 initial={{ opacity: 0, y: 10 }}
-                 animate={{ opacity: 1, y: 0 }}
-                 exit={{ opacity: 0, y: 10 }}
-                 className="absolute bottom-3 right-3 px-2 py-1 bg-gray-800 text-gray-300 text-xs rounded-md"
-               >
-                 {selectedLanguage.toUpperCase()}
-               </motion.div>
-             )}
-           </AnimatePresence>
-         </div>
-       </motion.div>
-     </div>
-   );
- };
- 
- export default CodeBlock;
\ No newline at end of file
+export default codeExamples;
diff --git a/app/visualizer/queue/types/deque/page.jsx b/app/visualizer/queue/types/deque/page.jsx
index 309639a..7f1c726 100755
--- a/app/visualizer/queue/types/deque/page.jsx
+++ b/app/visualizer/queue/types/deque/page.jsx
@@ -3,7 +3,8 @@ import Navbar from "@/app/components/navbarinner";
 import ModuleHeader from "@/app/components/modules/Header";
 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 CodeBlock from "@/app/components/modules/CodeBlock";
+import codeExamples from "./code";
 import ModuleCard from "@/app/components/ui/ModuleCard";
 import { MODULE_MAPS } from "@/lib/modulesMap";
 import ExploreOther from '@/app/components/ui/exploreOther';
@@ -71,7 +72,7 @@ export default function Page() {
         </section>
 
         <section className="px-6">
-          <Code />
+          <CodeBlock title="Double Ended Queue Implementation" codeExamples={codeExamples} />
         </section>
 
         <section className="px-6 md:px-12 my-12">
diff --git a/app/visualizer/queue/types/priority/codeBlock.jsx b/app/visualizer/queue/types/priority/code.js
similarity index 62%
rename from app/visualizer/queue/types/priority/codeBlock.jsx
rename to app/visualizer/queue/types/priority/code.js
index be83f38..dc1a629 100755
--- a/app/visualizer/queue/types/priority/codeBlock.jsx
+++ b/app/visualizer/queue/types/priority/code.js
@@ -1,41 +1,4 @@
-'use client';
-import { useState, useRef } from 'react';
-import { FaCopy, FaCheck, FaCode } from 'react-icons/fa';
-import { motion, AnimatePresence } from 'framer-motion';
-import hljs from 'highlight.js';
-import 'highlight.js/styles/github.css';
-import 'highlight.js/styles/github-dark.css';
-
-export const highlightCode = (code, language) => {
-  const validLanguage = hljs.getLanguage(language) ? language : 'plaintext';
-  return hljs.highlight(code, { language: validLanguage }).value;
-};
-
-const CodeBlock = () => {
-  const [selectedLanguage, setSelectedLanguage] = useState("javascript");
-  const [copied, setCopied] = useState(false);
-  const [isHovered, setIsHovered] = useState(false);
-  const topRef = useRef(null);
-
-  const languages = [
-    { id: "javascript", name: "JavaScript" },
-    { id: "python", name: "Python" },
-    { id: "java", name: "Java" },
-    { id: "c", name: "C" },
-    { id: "cpp", name: "C++" },
-  ];
-
-  const copyToClipboard = async (text) => {
-    try {
-      await navigator.clipboard.writeText(text);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    } catch (err) {
-      console.error("Failed to copy text: ", err);
-    }
-  };
-
-  const codeExamples = {
+const codeExamples = {
     javascript: `// Priority Queue Implementation in JavaScript (Min-Heap)
 class PriorityQueue {
   constructor(comparator = (a, b) => a.priority - b.priority) {
@@ -402,122 +365,4 @@ int main() {
 }`
   };
 
-  return (
-     <div
-       className="max-w-4xl mx-auto"
-       ref={topRef}
-       onMouseEnter={() => setIsHovered(true)}
-       onMouseLeave={() => setIsHovered(false)}
-     >
-       <motion.div
-         initial={{ opacity: 0, y: 20 }}
-         animate={{ opacity: 1, y: 0 }}
-         transition={{ duration: 0.3 }}
-         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-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">
-               Double Ended Queue Implementation
-             </h3>
-           </div>
- 
-           <motion.button
-             whileHover={{ scale: 1.05 }}
-             whileTap={{ scale: 0.95 }}
-             onClick={() => copyToClipboard(codeExamples[selectedLanguage])}
-             className="flex items-center gap-2 px-3 py-1.5 bg-gray-100 dark:bg-gray-600 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-500 transition-colors text-gray-800 dark:text-gray-100 text-sm font-medium"
-             aria-label="Copy code"
-           >
-             <AnimatePresence mode="wait">
-               {copied ? (
-                 <motion.span
-                   key="check"
-                   initial={{ opacity: 0 }}
-                   animate={{ opacity: 1 }}
-                   exit={{ opacity: 0 }}
-                   className="flex items-center text-green-600 dark:text-green-400"
-                 >
-                   <FaCheck className="mr-1" /> Copied
-                 </motion.span>
-               ) : (
-                 <motion.span
-                   key="copy"
-                   initial={{ opacity: 0 }}
-                   animate={{ opacity: 1 }}
-                   exit={{ opacity: 0 }}
-                   className="flex items-center"
-                 >
-                   <FaCopy className="mr-1" /> Copy Code
-                 </motion.span>
-               )}
-             </AnimatePresence>
-           </motion.button>
-         </div>
- 
-         {/* Language Selector */}
-         <div className="px-4 pt-3 pb-2 flex flex-wrap gap-2 border-b border-gray-200 dark:border-gray-700">
-           {languages.map((lang) => (
-             <motion.button
-               key={lang.id}
-               whileHover={{ scale: 1.03 }}
-               whileTap={{ scale: 0.97 }}
-               onClick={() => setSelectedLanguage(lang.id)}
-               className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-colors ${
-                 selectedLanguage === lang.id
-                   ? "bg-blue-500 text-white shadow-md"
-                   : "bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-600"
-               }`}
-             >
-               {lang.name}
-             </motion.button>
-           ))}
-         </div>
- 
-         {/* Code Block */}
-         <div className="relative">
-           <AnimatePresence mode="wait">
-             <motion.div
-               key={selectedLanguage}
-               initial={{ opacity: 0 }}
-               animate={{ opacity: 1 }}
-               exit={{ opacity: 0 }}
-               transition={{ duration: 0.2 }}
-               className="overflow-x-auto p-4 bg-gray-900 text-white"
-             >
-               <pre className="text-sm leading-relaxed">
-                 <code
-                   className={`language-${selectedLanguage}`}
-                   dangerouslySetInnerHTML={{
-                     __html: highlightCode(
-                       codeExamples[selectedLanguage],
-                       selectedLanguage
-                     ),
-                   }}
-                 />
-               </pre>
-             </motion.div>
-           </AnimatePresence>
- 
-           {/* Language indicator (shown on hover) */}
-           <AnimatePresence>
-             {isHovered && (
-               <motion.div
-                 initial={{ opacity: 0, y: 10 }}
-                 animate={{ opacity: 1, y: 0 }}
-                 exit={{ opacity: 0, y: 10 }}
-                 className="absolute bottom-3 right-3 px-2 py-1 bg-gray-800 text-gray-300 text-xs rounded-md"
-               >
-                 {selectedLanguage.toUpperCase()}
-               </motion.div>
-             )}
-           </AnimatePresence>
-         </div>
-       </motion.div>
-     </div>
-   );
- };
- 
- export default CodeBlock;
\ No newline at end of file
+export default codeExamples;
diff --git a/app/visualizer/queue/types/priority/page.jsx b/app/visualizer/queue/types/priority/page.jsx
index 8332b79..733e8ea 100755
--- a/app/visualizer/queue/types/priority/page.jsx
+++ b/app/visualizer/queue/types/priority/page.jsx
@@ -3,7 +3,8 @@ import Navbar from "@/app/components/navbarinner";
 import ModuleHeader from "@/app/components/modules/Header";
 import Content from "@/app/visualizer/queue/types/priority/content";
 import Quiz from "@/app/visualizer/queue/types/priority/quiz";
-import Code from "@/app/visualizer/queue/types/priority/codeBlock";
+import CodeBlock from "@/app/components/modules/CodeBlock";
+import codeExamples from "./code";
 import ModuleCard from "@/app/components/ui/ModuleCard";
 import { MODULE_MAPS } from "@/lib/modulesMap";
 import ExploreOther from "@/app/components/ui/exploreOther";
@@ -75,7 +76,7 @@ export default function Page() {
         </section>
 
         <section className="px-6">
-          <Code />
+          <CodeBlock title="Priority Queue Implementation" codeExamples={codeExamples} />
         </section>
 
         <section className="px-6 md:px-12 my-12">
diff --git a/app/visualizer/queue/types/singleEnded/codeBlock.jsx b/app/visualizer/queue/types/singleEnded/code.js
similarity index 60%
rename from app/visualizer/queue/types/singleEnded/codeBlock.jsx
rename to app/visualizer/queue/types/singleEnded/code.js
index cfce87f..31a75ba 100755
--- a/app/visualizer/queue/types/singleEnded/codeBlock.jsx
+++ b/app/visualizer/queue/types/singleEnded/code.js
@@ -1,41 +1,4 @@
-'use client';
-import { useState, useRef } from 'react';
-import { FaCopy, FaCheck, FaCode } from 'react-icons/fa';
-import { motion, AnimatePresence } from 'framer-motion';
-import hljs from 'highlight.js';
-import 'highlight.js/styles/github.css';
-import 'highlight.js/styles/github-dark.css';
-
-export const highlightCode = (code, language) => {
-  const validLanguage = hljs.getLanguage(language) ? language : 'plaintext';
-  return hljs.highlight(code, { language: validLanguage }).value;
-};
-
-const CodeBlock = () => {
-  const [selectedLanguage, setSelectedLanguage] = useState("javascript");
-  const [copied, setCopied] = useState(false);
-  const [isHovered, setIsHovered] = useState(false);
-  const topRef = useRef(null);
-
-  const languages = [
-    { id: "javascript", name: "JavaScript" },
-    { id: "python", name: "Python" },
-    { id: "java", name: "Java" },
-    { id: "c", name: "C" },
-    { id: "cpp", name: "C++" },
-  ];
-
-  const copyToClipboard = async (text) => {
-    try {
-      await navigator.clipboard.writeText(text);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    } catch (err) {
-      console.error("Failed to copy text: ", err);
-    }
-  };
-
-  const codeExamples = {
+const codeExamples = {
     javascript: `// Queue Implementation (JavaScript)
 class Queue {
   constructor(size = 10) {
@@ -450,122 +413,4 @@ int main() {
 }`
   };
 
- return (
-     <div
-       className="max-w-4xl mx-auto"
-       ref={topRef}
-       onMouseEnter={() => setIsHovered(true)}
-       onMouseLeave={() => setIsHovered(false)}
-     >
-       <motion.div
-         initial={{ opacity: 0, y: 20 }}
-         animate={{ opacity: 1, y: 0 }}
-         transition={{ duration: 0.3 }}
-         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-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">
-               Single Ended Queue Implementation
-             </h3>
-           </div>
- 
-           <motion.button
-             whileHover={{ scale: 1.05 }}
-             whileTap={{ scale: 0.95 }}
-             onClick={() => copyToClipboard(codeExamples[selectedLanguage])}
-             className="flex items-center gap-2 px-3 py-1.5 bg-gray-100 dark:bg-gray-600 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-500 transition-colors text-gray-800 dark:text-gray-100 text-sm font-medium"
-             aria-label="Copy code"
-           >
-             <AnimatePresence mode="wait">
-               {copied ? (
-                 <motion.span
-                   key="check"
-                   initial={{ opacity: 0 }}
-                   animate={{ opacity: 1 }}
-                   exit={{ opacity: 0 }}
-                   className="flex items-center text-green-600 dark:text-green-400"
-                 >
-                   <FaCheck className="mr-1" /> Copied
-                 </motion.span>
-               ) : (
-                 <motion.span
-                   key="copy"
-                   initial={{ opacity: 0 }}
-                   animate={{ opacity: 1 }}
-                   exit={{ opacity: 0 }}
-                   className="flex items-center"
-                 >
-                   <FaCopy className="mr-1" /> Copy Code
-                 </motion.span>
-               )}
-             </AnimatePresence>
-           </motion.button>
-         </div>
- 
-         {/* Language Selector */}
-         <div className="px-4 pt-3 pb-2 flex flex-wrap gap-2 border-b border-gray-200 dark:border-gray-700">
-           {languages.map((lang) => (
-             <motion.button
-               key={lang.id}
-               whileHover={{ scale: 1.03 }}
-               whileTap={{ scale: 0.97 }}
-               onClick={() => setSelectedLanguage(lang.id)}
-               className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-colors ${
-                 selectedLanguage === lang.id
-                   ? "bg-blue-500 text-white shadow-md"
-                   : "bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-600"
-               }`}
-             >
-               {lang.name}
-             </motion.button>
-           ))}
-         </div>
- 
-         {/* Code Block */}
-         <div className="relative">
-           <AnimatePresence mode="wait">
-             <motion.div
-               key={selectedLanguage}
-               initial={{ opacity: 0 }}
-               animate={{ opacity: 1 }}
-               exit={{ opacity: 0 }}
-               transition={{ duration: 0.2 }}
-               className="overflow-x-auto p-4 bg-gray-900 text-white"
-             >
-               <pre className="text-sm leading-relaxed">
-                 <code
-                   className={`language-${selectedLanguage}`}
-                   dangerouslySetInnerHTML={{
-                     __html: highlightCode(
-                       codeExamples[selectedLanguage],
-                       selectedLanguage
-                     ),
-                   }}
-                 />
-               </pre>
-             </motion.div>
-           </AnimatePresence>
- 
-           {/* Language indicator (shown on hover) */}
-           <AnimatePresence>
-             {isHovered && (
-               <motion.div
-                 initial={{ opacity: 0, y: 10 }}
-                 animate={{ opacity: 1, y: 0 }}
-                 exit={{ opacity: 0, y: 10 }}
-                 className="absolute bottom-3 right-3 px-2 py-1 bg-gray-800 text-gray-300 text-xs rounded-md"
-               >
-                 {selectedLanguage.toUpperCase()}
-               </motion.div>
-             )}
-           </AnimatePresence>
-         </div>
-       </motion.div>
-     </div>
-   );
- };
- 
- export default CodeBlock;
\ No newline at end of file
+export default codeExamples;
diff --git a/app/visualizer/queue/types/singleEnded/page.jsx b/app/visualizer/queue/types/singleEnded/page.jsx
index 506c68c..57ea6af 100755
--- a/app/visualizer/queue/types/singleEnded/page.jsx
+++ b/app/visualizer/queue/types/singleEnded/page.jsx
@@ -3,7 +3,8 @@ import Navbar from "@/app/components/navbarinner";
 import ModuleHeader from "@/app/components/modules/Header";
 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 CodeBlock from "@/app/components/modules/CodeBlock";
+import codeExamples from "./code";
 import ModuleCard from "@/app/components/ui/ModuleCard";
 import { MODULE_MAPS } from "@/lib/modulesMap";
 import ExploreOther from '@/app/components/ui/exploreOther';
@@ -70,7 +71,7 @@ export default function Page() {
         </section>
 
         <section className="px-6">
-          <Code />
+          <CodeBlock title="Single Ended Queue Implementation" codeExamples={codeExamples} />
         </section>
 
         <section className="px-6 md:px-12 my-12">
diff --git a/app/visualizer/searching/binarysearch/code.js b/app/visualizer/searching/binarysearch/code.js
new file mode 100755
index 0000000..7e7d338
--- /dev/null
+++ b/app/visualizer/searching/binarysearch/code.js
@@ -0,0 +1,171 @@
+const codeExamples = {
+    javascript: `// Binary Search in JavaScript (Iterative)
+function binarySearch(arr, target) {
+  let left = 0;
+  let right = arr.length - 1;
+
+  while (left <= right) {
+    const mid = Math.floor((left + right) / 2);
+    
+    if (arr[mid] === target) {
+      return mid; // Target found
+    } else if (arr[mid] < target) {
+      left = mid + 1; // Search right half
+    } else {
+      right = mid - 1; // Search left half
+    }
+  }
+  
+  return -1; // Target not found
+}
+
+// Usage example
+const sortedNumbers = [10, 20, 30, 40, 50, 60, 70];
+const target = 40;
+const result = binarySearch(sortedNumbers, target);
+
+if (result !== -1) {
+  console.log(\`Element found at index: \${result}\`);
+} else {
+  console.log("Element not found");
+}`,
+
+    python: `# Binary Search in Python (Iterative)
+def binary_search(arr, target):
+    left, right = 0, len(arr) - 1
+    
+    while left <= right:
+        mid = (left + right) // 2
+        
+        if arr[mid] == target:
+            return mid  # Target found
+        elif arr[mid] < target:
+            left = mid + 1  # Search right half
+        else:
+            right = mid - 1  # Search left half
+    
+    return -1  # Target not found
+
+# Usage example
+sorted_numbers = [10, 20, 30, 40, 50, 60, 70]
+target = 40
+result = binary_search(sorted_numbers, target)
+
+if result != -1:
+    print(f"Element found at index: {result}")
+else:
+    print("Element not found")`,
+
+    java: `// Binary Search in Java (Iterative)
+public class BinarySearch {
+    public static int binarySearch(int[] arr, int target) {
+        int left = 0;
+        int right = arr.length - 1;
+        
+        while (left <= right) {
+            int mid = left + (right - left) / 2;
+            
+            if (arr[mid] == target) {
+                return mid; // Target found
+            } else if (arr[mid] < target) {
+                left = mid + 1; // Search right half
+            } else {
+                right = mid - 1; // Search left half
+            }
+        }
+        
+        return -1; // Target not found
+    }
+
+    public static void main(String[] args) {
+        int[] sortedNumbers = {10, 20, 30, 40, 50, 60, 70};
+        int target = 40;
+        int result = binarySearch(sortedNumbers, target);
+        
+        if (result != -1) {
+            System.out.println("Element found at index: " + result);
+        } else {
+            System.out.println("Element not found");
+        }
+    }
+}`,
+
+    c: `// Binary Search in C (Iterative)
+#include <stdio.h>
+
+int binarySearch(int arr[], int size, int target) {
+    int left = 0;
+    int right = size - 1;
+    
+    while (left <= right) {
+        int mid = left + (right - left) / 2;
+        
+        if (arr[mid] == target) {
+            return mid; // Target found
+        } else if (arr[mid] < target) {
+            left = mid + 1; // Search right half
+        } else {
+            right = mid - 1; // Search left half
+        }
+    }
+    
+    return -1; // Target not found
+}
+
+int main() {
+    int sortedNumbers[] = {10, 20, 30, 40, 50, 60, 70};
+    int size = sizeof(sortedNumbers) / sizeof(sortedNumbers[0]);
+    int target = 40;
+    
+    int result = binarySearch(sortedNumbers, size, target);
+    
+    if (result != -1) {
+        printf("Element found at index: %d\\n", result);
+    } else {
+        printf("Element not found\\n");
+    }
+    
+    return 0;
+}`,
+
+    cpp: `// Binary Search in C++ (Iterative)
+#include <iostream>
+#include <vector>
+using namespace std;
+
+int binarySearch(const vector<int>& arr, int target) {
+    int left = 0;
+    int right = arr.size() - 1;
+    
+    while (left <= right) {
+        int mid = left + (right - left) / 2;
+        
+        if (arr[mid] == target) {
+            return mid; // Target found
+        } else if (arr[mid] < target) {
+            left = mid + 1; // Search right half
+        } else {
+            right = mid - 1; // Search left half
+        }
+    }
+    
+    return -1; // Target not found
+}
+
+int main() {
+    vector<int> sortedNumbers = {10, 20, 30, 40, 50, 60, 70};
+    int target = 40;
+    
+    int result = binarySearch(sortedNumbers, target);
+    
+    if (result != -1) {
+        cout << "Element found at index: " << result << endl;
+    } else {
+        cout << "Element not found" << endl;
+    }
+    
+    return 0;
+}`
+  };
+
+export default codeExamples;
diff --git a/app/visualizer/searching/binarysearch/codeBlock.jsx b/app/visualizer/searching/binarysearch/codeBlock.jsx
deleted file mode 100755
index e19c199..0000000
--- a/app/visualizer/searching/binarysearch/codeBlock.jsx
+++ /dev/null
@@ -1,323 +0,0 @@
-'use client';
-import { useState, useRef } from 'react';
-import { FaCopy, FaCheck, FaCode } from 'react-icons/fa';
-import { motion, AnimatePresence } from 'framer-motion';
-import hljs from 'highlight.js';
-import 'highlight.js/styles/github.css';
-import 'highlight.js/styles/github-dark.css';
-
-export const highlightCode = (code, language) => {
-  const validLanguage = hljs.getLanguage(language) ? language : 'plaintext';
-  return hljs.highlight(code, { language: validLanguage }).value;
-};
-
-const CodeBlock = () => {
-  const [selectedLanguage, setSelectedLanguage] = useState('javascript');
-  const [copied, setCopied] = useState(false);
-  const [isHovered, setIsHovered] = useState(false);
-  const topRef = useRef(null);
-
-  const languages = [
-    { id: 'javascript', name: 'JavaScript' },
-    { id: 'python', name: 'Python' },
-    { id: 'java', name: 'Java' },
-    { id: 'c', name: 'C' },
-    { id: 'cpp', name: 'C++' }
-  ];
-
-  const copyToClipboard = async (text) => {
-    try {
-      await navigator.clipboard.writeText(text);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    } catch (err) {
-      console.error('Failed to copy text: ', err);
-    }
-  };
-
-  const codeExamples = {
-    javascript: `// Binary Search in JavaScript (Iterative)
-function binarySearch(arr, target) {
-  let left = 0;
-  let right = arr.length - 1;
-
-  while (left <= right) {
-    const mid = Math.floor((left + right) / 2);
-    
-    if (arr[mid] === target) {
-      return mid; // Target found
-    } else if (arr[mid] < target) {
-      left = mid + 1; // Search right half
-    } else {
-      right = mid - 1; // Search left half
-    }
-  }
-  
-  return -1; // Target not found
-}
-
-// Usage example
-const sortedNumbers = [10, 20, 30, 40, 50, 60, 70];
-const target = 40;
-const result = binarySearch(sortedNumbers, target);
-
-if (result !== -1) {
-  console.log(\`Element found at index: \${result}\`);
-} else {
-  console.log("Element not found");
-}`,
-
-    python: `# Binary Search in Python (Iterative)
-def binary_search(arr, target):
-    left, right = 0, len(arr) - 1
-    
-    while left <= right:
-        mid = (left + right) // 2
-        
-        if arr[mid] == target:
-            return mid  # Target found
-        elif arr[mid] < target:
-            left = mid + 1  # Search right half
-        else:
-            right = mid - 1  # Search left half
-    
-    return -1  # Target not found
-
-# Usage example
-sorted_numbers = [10, 20, 30, 40, 50, 60, 70]
-target = 40
-result = binary_search(sorted_numbers, target)
-
-if result != -1:
-    print(f"Element found at index: {result}")
-else:
-    print("Element not found")`,
-
-    java: `// Binary Search in Java (Iterative)
-public class BinarySearch {
-    public static int binarySearch(int[] arr, int target) {
-        int left = 0;
-        int right = arr.length - 1;
-        
-        while (left <= right) {
-            int mid = left + (right - left) / 2;
-            
-            if (arr[mid] == target) {
-                return mid; // Target found
-            } else if (arr[mid] < target) {
-                left = mid + 1; // Search right half
-            } else {
-                right = mid - 1; // Search left half
-            }
-        }
-        
-        return -1; // Target not found
-    }
-
-    public static void main(String[] args) {
-        int[] sortedNumbers = {10, 20, 30, 40, 50, 60, 70};
-        int target = 40;
-        int result = binarySearch(sortedNumbers, target);
-        
-        if (result != -1) {
-            System.out.println("Element found at index: " + result);
-        } else {
-            System.out.println("Element not found");
-        }
-    }
-}`,
-
-    c: `// Binary Search in C (Iterative)
-#include <stdio.h>
-
-int binarySearch(int arr[], int size, int target) {
-    int left = 0;
-    int right = size - 1;
-    
-    while (left <= right) {
-        int mid = left + (right - left) / 2;
-        
-        if (arr[mid] == target) {
-            return mid; // Target found
-        } else if (arr[mid] < target) {
-            left = mid + 1; // Search right half
-        } else {
-            right = mid - 1; // Search left half
-        }
-    }
-    
-    return -1; // Target not found
-}
-
-int main() {
-    int sortedNumbers[] = {10, 20, 30, 40, 50, 60, 70};
-    int size = sizeof(sortedNumbers) / sizeof(sortedNumbers[0]);
-    int target = 40;
-    
-    int result = binarySearch(sortedNumbers, size, target);
-    
-    if (result != -1) {
-        printf("Element found at index: %d\\n", result);
-    } else {
-        printf("Element not found\\n");
-    }
-    
-    return 0;
-}`,
-
-    cpp: `// Binary Search in C++ (Iterative)
-#include <iostream>
-#include <vector>
-using namespace std;
-
-int binarySearch(const vector<int>& arr, int target) {
-    int left = 0;
-    int right = arr.size() - 1;
-    
-    while (left <= right) {
-        int mid = left + (right - left) / 2;
-        
-        if (arr[mid] == target) {
-            return mid; // Target found
-        } else if (arr[mid] < target) {
-            left = mid + 1; // Search right half
-        } else {
-            right = mid - 1; // Search left half
-        }
-    }
-    
-    return -1; // Target not found
-}
-
-int main() {
-    vector<int> sortedNumbers = {10, 20, 30, 40, 50, 60, 70};
-    int target = 40;
-    
-    int result = binarySearch(sortedNumbers, target);
-    
-    if (result != -1) {
-        cout << "Element found at index: " << result << endl;
-    } else {
-        cout << "Element not found" << endl;
-    }
-    
-    return 0;
-}`
-  };
-
-  return (
-     <div 
-      className="max-w-4xl mx-auto"
-      ref={topRef}
-      onMouseEnter={() => setIsHovered(true)}
-      onMouseLeave={() => setIsHovered(false)}
-    >
-      <motion.div 
-        initial={{ opacity: 0, y: 20 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{ duration: 0.3 }}
-        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-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">
-              Binary Search Implementation
-            </h3>
-          </div>
-          
-          <motion.button
-            whileHover={{ scale: 1.05 }}
-            whileTap={{ scale: 0.95 }}
-            onClick={() => copyToClipboard(codeExamples[selectedLanguage])}
-            className="flex items-center gap-2 px-3 py-1.5 bg-gray-100 dark:bg-gray-600 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-500 transition-colors text-gray-800 dark:text-gray-100 text-sm font-medium"
-            aria-label="Copy code"
-          >
-            <AnimatePresence mode="wait">
-              {copied ? (
-                <motion.span
-                  key="check"
-                  initial={{ opacity: 0 }}
-                  animate={{ opacity: 1 }}
-                  exit={{ opacity: 0 }}
-                  className="flex items-center text-green-600 dark:text-green-400"
-                >
-                  <FaCheck className="mr-1" /> Copied
-                </motion.span>
-              ) : (
-                <motion.span
-                  key="copy"
-                  initial={{ opacity: 0 }}
-                  animate={{ opacity: 1 }}
-                  exit={{ opacity: 0 }}
-                  className="flex items-center"
-                >
-                  <FaCopy className="mr-1" /> Copy Code
-                </motion.span>
-              )}
-            </AnimatePresence>
-          </motion.button>
-        </div>
-
-        {/* Language Selector */}
-        <div className="px-4 pt-3 pb-2 flex flex-wrap gap-2 border-b border-gray-200 dark:border-gray-700">
-          {languages.map((lang) => (
-            <motion.button
-              key={lang.id}
-              whileHover={{ scale: 1.03 }}
-              whileTap={{ scale: 0.97 }}
-              onClick={() => setSelectedLanguage(lang.id)}
-              className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-colors ${
-                selectedLanguage === lang.id
-                  ? 'bg-blue-500 text-white shadow-md'
-                  : 'bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-600'
-              }`}
-            >
-              {lang.name}
-            </motion.button>
-          ))}
-        </div>
-
-        {/* Code Block */}
-        <div className="relative">
-          <AnimatePresence mode="wait">
-            <motion.div
-              key={selectedLanguage}
-              initial={{ opacity: 0 }}
-              animate={{ opacity: 1 }}
-              exit={{ opacity: 0 }}
-              transition={{ duration: 0.2 }}
-              className="overflow-x-auto p-4 bg-gray-900 text-white"
-            >
-              <pre className="text-sm leading-relaxed">
-                <code 
-                  className={`language-${selectedLanguage}`}
-                  dangerouslySetInnerHTML={{ 
-                    __html: highlightCode(codeExamples[selectedLanguage], selectedLanguage) 
-                  }} 
-                />
-              </pre>
-            </motion.div>
-          </AnimatePresence>
-
-          {/* Language indicator (shown on hover) */}
-          <AnimatePresence>
-            {isHovered && (
-              <motion.div
-                initial={{ opacity: 0, y: 10 }}
-                animate={{ opacity: 1, y: 0 }}
-                exit={{ opacity: 0, y: 10 }}
-                className="absolute bottom-3 right-3 px-2 py-1 bg-gray-800 text-gray-300 text-xs rounded-md"
-              >
-                {selectedLanguage.toUpperCase()}
-              </motion.div>
-            )}
-          </AnimatePresence>
-        </div>
-      </motion.div>
-    </div>
-  );
-};
-
-export default CodeBlock;
\ No newline at end of file
diff --git a/app/visualizer/searching/binarysearch/content.jsx b/app/visualizer/searching/binarysearch/content.jsx
index c368cb4..80fc794 100755
--- a/app/visualizer/searching/binarysearch/content.jsx
+++ b/app/visualizer/searching/binarysearch/content.jsx
@@ -5,6 +5,99 @@ import { useTheme } from "@/app/contexts/ThemeContext";
 import NewsletterEmbed from "@/app/components/ui/NewsletterEmbed";
 import { useEffect, useState } from "react";
 import InContentAd from "@/app/components/ads/InContentAd";
+
+const RangeDiagram = ({ values, low, high, mid, found, keyPrefix }) => {
+  const boxSize = 40;
+  const gap = 8;
+  const paddingX = 8;
+  const topPadding = 26;
+  const width = values.length * (boxSize + gap) - gap + paddingX * 2;
+  const height = boxSize + topPadding + 22;
+
+  const boxX = (idx) => paddingX + idx * (boxSize + gap);
+  const boxY = topPadding;
+  const cx = (idx) => boxX(idx) + boxSize / 2;
+
+  const inRange = (idx) => idx >= low && idx <= high;
+
+  const fillFor = (idx) => {
+    if (idx === mid) return found ? "#10b981" : "#f59e0b";
+    if (inRange(idx)) return "#3b82f6";
+    return "#94a3b8";
+  };
+
+  const opacityFor = (idx) => {
+    if (idx === mid) return "0.9";
+    if (inRange(idx)) return "0.35";
+    return "0.15";
+  };
+
+  const labelFor = (idx) => {
+    if (idx === mid) return "mid";
+    if (idx === low) return "low";
+    if (idx === high) return "high";
+    return null;
+  };
+
+  return (
+    <svg
+      viewBox={`0 0 ${width} ${height}`}
+      className="mx-auto"
+      style={{ width: `${width}px`, maxWidth: "100%" }}
+    >
+      {values.map((val, idx) => {
+        const label = labelFor(idx);
+        return (
+          <g key={`${keyPrefix}-box-${idx}`}>
+            {label && (
+              <text
+                x={cx(idx)}
+                y={boxY - 8}
+                textAnchor="middle"
+                fill={idx === mid ? (found ? "#10b981" : "#f59e0b") : "#64748b"}
+                fontSize="9"
+                fontWeight="700"
+              >
+                {label}
+              </text>
+            )}
+            <rect
+              x={boxX(idx)}
+              y={boxY}
+              width={boxSize}
+              height={boxSize}
+              rx="6"
+              fill={fillFor(idx)}
+              opacity={opacityFor(idx)}
+              stroke={fillFor(idx)}
+              strokeWidth="2"
+            />
+            <text
+              x={cx(idx)}
+              y={boxY + boxSize / 2 + 5}
+              textAnchor="middle"
+              className="fill-gray-800 dark:fill-gray-100"
+              fontSize="14"
+              fontWeight="700"
+            >
+              {val}
+            </text>
+            <text
+              x={cx(idx)}
+              y={boxY + boxSize + 16}
+              textAnchor="middle"
+              className="fill-gray-400 dark:fill-gray-500"
+              fontSize="9"
+            >
+              {idx}
+            </text>
+          </g>
+        );
+      })}
+    </svg>
+  );
+};
+
 const Content = () => {
   const { theme } = useTheme();
 
@@ -14,12 +107,14 @@ const Content = () => {
     `Binary Search is extremely fast for large datasets but requires the list to be sorted beforehand. It's much more efficient than Linear Search for sorted data.`,
   ];
 
+  const sortedArray = [1, 3, 5, 7, 9, 11, 13];
+
   const searching = [
-    { points: "First middle is 7 (too high)" },
-    { points: "Search left half: [1, 3, 5]" },
-    { points: "New middle is 3 (too low)" },
-    { points: "Search right portion: [5]" },
-    { points: "Found at position 2" },
+    { points: "First middle is 7 (too high)", low: 0, high: 6, mid: 3, found: false },
+    { points: "Search left half: [1, 3, 5]", low: 0, high: 2, mid: null, found: false },
+    { points: "New middle is 3 (too low)", low: 0, high: 2, mid: 1, found: false },
+    { points: "Search right portion: [5]", low: 2, high: 2, mid: null, found: false },
+    { points: "Found at position 2", low: 2, high: 2, mid: 2, found: true },
   ];
 
   const steps = [
@@ -76,26 +171,65 @@ const Content = () => {
               and you want to find the number 7.
             </p>
 
-            <ol className="space-y-3 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+            <ol className="space-y-5 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
               <li className="text-gray-700 dark:text-gray-300 pl-2">
                 Compare 7 with the middle element (7). It matches! Return the
                 position.
+                <div className="mt-3 not-prose">
+                  <RangeDiagram
+                    keyPrefix="bs-intro"
+                    values={sortedArray}
+                    low={0}
+                    high={6}
+                    mid={3}
+                    found={true}
+                  />
+                </div>
               </li>
               <li className="text-gray-700 dark:text-gray-300 pl-2">
                 If searching for 5:
-                <ul className="mt-2 space-y-2 list-disc pl-5 marker:text-gray-400 dark:marker:text-gray-500">
+                <ul className="mt-2 space-y-4 list-disc pl-5 marker:text-gray-400 dark:marker:text-gray-500">
                   {searching.map((item, index) => (
                     <li
                       key={index}
                       className="text-gray-600 dark:text-gray-400"
                     >
                       {item.points}
+                      <div className="mt-3 not-prose">
+                        <RangeDiagram
+                          keyPrefix={`bs-step${index}`}
+                          values={sortedArray}
+                          low={item.low}
+                          high={item.high}
+                          mid={item.mid}
+                          found={item.found}
+                        />
+                      </div>
                     </li>
                   ))}
                 </ul>
               </li>
             </ol>
 
+            <div className="mt-4 flex flex-wrap items-center gap-3 text-xs text-gray-500 dark:text-gray-400">
+              <span className="flex items-center gap-1.5">
+                <span className="w-3 h-3 rounded-sm bg-amber-500 inline-block"></span>
+                Middle element
+              </span>
+              <span className="flex items-center gap-1.5">
+                <span className="w-3 h-3 rounded-sm bg-blue-500 inline-block"></span>
+                Active search range
+              </span>
+              <span className="flex items-center gap-1.5">
+                <span className="w-3 h-3 rounded-sm bg-slate-400 inline-block"></span>
+                Eliminated
+              </span>
+              <span className="flex items-center gap-1.5">
+                <span className="w-3 h-3 rounded-sm bg-emerald-500 inline-block"></span>
+                Match found
+              </span>
+            </div>
+
             <p className="text-gray-700 dark:text-gray-300 mt-4 leading-relaxed">
               {paragraphs[1]}
             </p>
diff --git a/app/visualizer/searching/binarysearch/page.jsx b/app/visualizer/searching/binarysearch/page.jsx
index 485ccfd..4d9bbfd 100755
--- a/app/visualizer/searching/binarysearch/page.jsx
+++ b/app/visualizer/searching/binarysearch/page.jsx
@@ -4,7 +4,8 @@ import ModuleHeader from "@/app/components/modules/Header";
 import Footer from "@/app/components/footer";
 import BackToTop from "@/app/components/ui/backtotop";
 import ExploreOther from "@/app/components/ui/exploreOther";
-import Code from "@/app/visualizer/searching/binarysearch/codeBlock";
+import CodeBlock from "@/app/components/modules/CodeBlock";
+import codeExamples from "./code";
 import Quiz from "@/app/visualizer/searching/binarysearch/quiz";
 import Content from '@/app/visualizer/searching/binarysearch/content';
 import ModuleCard from "@/app/components/ui/ModuleCard";
@@ -83,7 +84,7 @@ export default function Page() {
         </section>
 
         <section className="px-6">
-          <Code />
+          <CodeBlock title="Binary Search Implementation" codeExamples={codeExamples} />
         </section>
 
         <section className="px-6 md:px-12 my-12">
diff --git a/app/visualizer/searching/linearsearch/code.js b/app/visualizer/searching/linearsearch/code.js
new file mode 100755
index 0000000..6d1865c
--- /dev/null
+++ b/app/visualizer/searching/linearsearch/code.js
@@ -0,0 +1,122 @@
+const codeExamples = {
+    javascript: `// Linear Search in JavaScript
+function linearSearch(arr, target) {
+  for (let i = 0; i < arr.length; i++) {
+    if (arr[i] === target) {
+      return i; // Return index if found
+    }
+  }
+  return -1; // Return -1 if not found
+}
+
+// Usage example
+const numbers = [10, 20, 30, 40, 50];
+const target = 30;
+const result = linearSearch(numbers, target);
+
+if (result !== -1) {
+  console.log(\`Element found at index: \${result}\`);
+} else {
+  console.log("Element not found");
+}`,
+
+    python: `# Linear Search in Python
+def linear_search(arr, target):
+    for i in range(len(arr)):
+        if arr[i] == target:
+            return i  # Return index if found
+    return -1  # Return -1 if not found
+
+# Usage example
+numbers = [10, 20, 30, 40, 50]
+target = 30
+result = linear_search(numbers, target)
+
+if result != -1:
+    print(f"Element found at index: {result}")
+else:
+    print("Element not found")`,
+
+    java: `// Linear Search in Java
+public class LinearSearch {
+    public static int linearSearch(int[] arr, int target) {
+        for (int i = 0; i < arr.length; i++) {
+            if (arr[i] == target) {
+                return i; // Return index if found
+            }
+        }
+        return -1; // Return -1 if not found
+    }
+
+    public static void main(String[] args) {
+        int[] numbers = {10, 20, 30, 40, 50};
+        int target = 30;
+        int result = linearSearch(numbers, target);
+        
+        if (result != -1) {
+            System.out.println("Element found at index: " + result);
+        } else {
+            System.out.println("Element not found");
+        }
+    }
+}`,
+
+    c: `// Linear Search in C
+#include <stdio.h>
+
+int linearSearch(int arr[], int size, int target) {
+    for (int i = 0; i < size; i++) {
+        if (arr[i] == target) {
+            return i; // Return index if found
+        }
+    }
+    return -1; // Return -1 if not found
+}
+
+int main() {
+    int numbers[] = {10, 20, 30, 40, 50};
+    int size = sizeof(numbers) / sizeof(numbers[0]);
+    int target = 30;
+    
+    int result = linearSearch(numbers, size, target);
+    
+    if (result != -1) {
+        printf("Element found at index: %d\\n", result);
+    } else {
+        printf("Element not found\\n");
+    }
+    
+    return 0;
+}`,
+
+    cpp: `// Linear Search in C++
+#include <iostream>
+#include <vector>
+using namespace std;
+
+int linearSearch(const vector<int>& arr, int target) {
+    for (int i = 0; i < arr.size(); i++) {
+        if (arr[i] == target) {
+            return i; // Return index if found
+        }
+    }
+    return -1; // Return -1 if not found
+}
+
+int main() {
+    vector<int> numbers = {10, 20, 30, 40, 50};
+    int target = 30;
+    
+    int result = linearSearch(numbers, target);
+    
+    if (result != -1) {
+        cout << "Element found at index: " << result << endl;
+    } else {
+        cout << "Element not found" << endl;
+    }
+    
+    return 0;
+}`
+  };
+
+export default codeExamples;
diff --git a/app/visualizer/searching/linearsearch/codeBlock.jsx b/app/visualizer/searching/linearsearch/codeBlock.jsx
deleted file mode 100755
index 380a676..0000000
--- a/app/visualizer/searching/linearsearch/codeBlock.jsx
+++ /dev/null
@@ -1,274 +0,0 @@
-'use client';
-import { useState, useRef } from 'react';
-import { FaCopy, FaCheck, FaCode } from 'react-icons/fa';
-import { motion, AnimatePresence } from 'framer-motion';
-import hljs from 'highlight.js';
-import 'highlight.js/styles/github.css';
-import 'highlight.js/styles/github-dark.css';
-
-export const highlightCode = (code, language) => {
-  const validLanguage = hljs.getLanguage(language) ? language : 'plaintext';
-  return hljs.highlight(code, { language: validLanguage }).value;
-};
-
-const CodeBlock = () => {
-  const [selectedLanguage, setSelectedLanguage] = useState('javascript');
-  const [copied, setCopied] = useState(false);
-  const [isHovered, setIsHovered] = useState(false);
-  const topRef = useRef(null);
-
-  const languages = [
-    { id: 'javascript', name: 'JavaScript' },
-    { id: 'python', name: 'Python' },
-    { id: 'java', name: 'Java' },
-    { id: 'c', name: 'C' },
-    { id: 'cpp', name: 'C++' }
-  ];
-
-  const copyToClipboard = async (text) => {
-    try {
-      await navigator.clipboard.writeText(text);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    } catch (err) {
-      console.error('Failed to copy text: ', err);
-    }
-  };
-
-  const codeExamples = {
-    javascript: `// Linear Search in JavaScript
-function linearSearch(arr, target) {
-  for (let i = 0; i < arr.length; i++) {
-    if (arr[i] === target) {
-      return i; // Return index if found
-    }
-  }
-  return -1; // Return -1 if not found
-}
-
-// Usage example
-const numbers = [10, 20, 30, 40, 50];
-const target = 30;
-const result = linearSearch(numbers, target);
-
-if (result !== -1) {
-  console.log(\`Element found at index: \${result}\`);
-} else {
-  console.log("Element not found");
-}`,
-
-    python: `# Linear Search in Python
-def linear_search(arr, target):
-    for i in range(len(arr)):
-        if arr[i] == target:
-            return i  # Return index if found
-    return -1  # Return -1 if not found
-
-# Usage example
-numbers = [10, 20, 30, 40, 50]
-target = 30
-result = linear_search(numbers, target)
-
-if result != -1:
-    print(f"Element found at index: {result}")
-else:
-    print("Element not found")`,
-
-    java: `// Linear Search in Java
-public class LinearSearch {
-    public static int linearSearch(int[] arr, int target) {
-        for (int i = 0; i < arr.length; i++) {
-            if (arr[i] == target) {
-                return i; // Return index if found
-            }
-        }
-        return -1; // Return -1 if not found
-    }
-
-    public static void main(String[] args) {
-        int[] numbers = {10, 20, 30, 40, 50};
-        int target = 30;
-        int result = linearSearch(numbers, target);
-        
-        if (result != -1) {
-            System.out.println("Element found at index: " + result);
-        } else {
-            System.out.println("Element not found");
-        }
-    }
-}`,
-
-    c: `// Linear Search in C
-#include <stdio.h>
-
-int linearSearch(int arr[], int size, int target) {
-    for (int i = 0; i < size; i++) {
-        if (arr[i] == target) {
-            return i; // Return index if found
-        }
-    }
-    return -1; // Return -1 if not found
-}
-
-int main() {
-    int numbers[] = {10, 20, 30, 40, 50};
-    int size = sizeof(numbers) / sizeof(numbers[0]);
-    int target = 30;
-    
-    int result = linearSearch(numbers, size, target);
-    
-    if (result != -1) {
-        printf("Element found at index: %d\\n", result);
-    } else {
-        printf("Element not found\\n");
-    }
-    
-    return 0;
-}`,
-
-    cpp: `// Linear Search in C++
-#include <iostream>
-#include <vector>
-using namespace std;
-
-int linearSearch(const vector<int>& arr, int target) {
-    for (int i = 0; i < arr.size(); i++) {
-        if (arr[i] == target) {
-            return i; // Return index if found
-        }
-    }
-    return -1; // Return -1 if not found
-}
-
-int main() {
-    vector<int> numbers = {10, 20, 30, 40, 50};
-    int target = 30;
-    
-    int result = linearSearch(numbers, target);
-    
-    if (result != -1) {
-        cout << "Element found at index: " << result << endl;
-    } else {
-        cout << "Element not found" << endl;
-    }
-    
-    return 0;
-}`
-  };
-
-  return (
-    <div 
-      className="max-w-4xl mx-auto"
-      ref={topRef}
-      onMouseEnter={() => setIsHovered(true)}
-      onMouseLeave={() => setIsHovered(false)}
-    >
-      <motion.div 
-        initial={{ opacity: 0, y: 20 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{ duration: 0.3 }}
-        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-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">
-              Linear Search Implementation
-            </h3>
-          </div>
-          
-          <motion.button
-            whileHover={{ scale: 1.05 }}
-            whileTap={{ scale: 0.95 }}
-            onClick={() => copyToClipboard(codeExamples[selectedLanguage])}
-            className="flex items-center gap-2 px-3 py-1.5 bg-gray-100 dark:bg-gray-600 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-500 transition-colors text-gray-800 dark:text-gray-100 text-sm font-medium"
-            aria-label="Copy code"
-          >
-            <AnimatePresence mode="wait">
-              {copied ? (
-                <motion.span
-                  key="check"
-                  initial={{ opacity: 0 }}
-                  animate={{ opacity: 1 }}
-                  exit={{ opacity: 0 }}
-                  className="flex items-center text-green-600 dark:text-green-400"
-                >
-                  <FaCheck className="mr-1" /> Copied
-                </motion.span>
-              ) : (
-                <motion.span
-                  key="copy"
-                  initial={{ opacity: 0 }}
-                  animate={{ opacity: 1 }}
-                  exit={{ opacity: 0 }}
-                  className="flex items-center"
-                >
-                  <FaCopy className="mr-1" /> Copy Code
-                </motion.span>
-              )}
-            </AnimatePresence>
-          </motion.button>
-        </div>
-
-        {/* Language Selector */}
-        <div className="px-4 pt-3 pb-2 flex flex-wrap gap-2 border-b border-gray-200 dark:border-gray-700">
-          {languages.map((lang) => (
-            <motion.button
-              key={lang.id}
-              whileHover={{ scale: 1.03 }}
-              whileTap={{ scale: 0.97 }}
-              onClick={() => setSelectedLanguage(lang.id)}
-              className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-colors ${
-                selectedLanguage === lang.id
-                  ? 'bg-blue-500 text-white shadow-md'
-                  : 'bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-600'
-              }`}
-            >
-              {lang.name}
-            </motion.button>
-          ))}
-        </div>
-
-        {/* Code Block */}
-        <div className="relative">
-          <AnimatePresence mode="wait">
-            <motion.div
-              key={selectedLanguage}
-              initial={{ opacity: 0 }}
-              animate={{ opacity: 1 }}
-              exit={{ opacity: 0 }}
-              transition={{ duration: 0.2 }}
-              className="overflow-x-auto p-4 bg-gray-900 text-white"
-            >
-              <pre className="text-sm leading-relaxed">
-                <code 
-                  className={`language-${selectedLanguage}`}
-                  dangerouslySetInnerHTML={{ 
-                    __html: highlightCode(codeExamples[selectedLanguage], selectedLanguage) 
-                  }} 
-                />
-              </pre>
-            </motion.div>
-          </AnimatePresence>
-
-          {/* Language indicator (shown on hover) */}
-          <AnimatePresence>
-            {isHovered && (
-              <motion.div
-                initial={{ opacity: 0, y: 10 }}
-                animate={{ opacity: 1, y: 0 }}
-                exit={{ opacity: 0, y: 10 }}
-                className="absolute bottom-3 right-3 px-2 py-1 bg-gray-800 text-gray-300 text-xs rounded-md"
-              >
-                {selectedLanguage.toUpperCase()}
-              </motion.div>
-            )}
-          </AnimatePresence>
-        </div>
-      </motion.div>
-    </div>
-  );
-};
-
-export default CodeBlock;
\ No newline at end of file
diff --git a/app/visualizer/searching/linearsearch/content.jsx b/app/visualizer/searching/linearsearch/content.jsx
index 8addcd9..dca0f8e 100755
--- a/app/visualizer/searching/linearsearch/content.jsx
+++ b/app/visualizer/searching/linearsearch/content.jsx
@@ -5,6 +5,95 @@ import { useTheme } from "@/app/contexts/ThemeContext";
 import NewsletterEmbed from "@/app/components/ui/NewsletterEmbed";
 import { useEffect, useState } from "react";
 import InContentAd from "@/app/components/ads/InContentAd";
+
+const ArrayCheckDiagram = ({ values, current, checked, found, keyPrefix }) => {
+  const boxSize = 40;
+  const gap = 8;
+  const paddingX = 8;
+  const topPadding = 26;
+  const width = values.length * (boxSize + gap) - gap + paddingX * 2;
+  const height = boxSize + topPadding + 22;
+
+  const boxX = (idx) => paddingX + idx * (boxSize + gap);
+  const boxY = topPadding;
+  const cx = (idx) => boxX(idx) + boxSize / 2;
+
+  const fillFor = (idx) => {
+    if (idx === current) return found ? "#10b981" : "#f59e0b";
+    if (checked.includes(idx)) return "#94a3b8";
+    return "#3b82f6";
+  };
+
+  const opacityFor = (idx) =>
+    idx === current || checked.includes(idx) ? "0.9" : "0.25";
+
+  return (
+    <svg
+      viewBox={`0 0 ${width} ${height}`}
+      className="mx-auto"
+      style={{ width: `${width}px`, maxWidth: "100%" }}
+    >
+      <defs>
+        <marker
+          id={`${keyPrefix}-ptr-arrow`}
+          markerWidth="7"
+          markerHeight="7"
+          refX="6"
+          refY="3.5"
+          orient="auto"
+        >
+          <path d="M0,0 L7,3.5 L0,7 Z" fill={found ? "#10b981" : "#f59e0b"} />
+        </marker>
+      </defs>
+
+      <line
+        x1={cx(current)}
+        y1={boxY - 14}
+        x2={cx(current)}
+        y2={boxY - 4}
+        stroke={found ? "#10b981" : "#f59e0b"}
+        strokeWidth="1.5"
+        markerEnd={`url(#${keyPrefix}-ptr-arrow)`}
+      />
+
+      {values.map((val, idx) => (
+        <g key={`${keyPrefix}-box-${idx}`}>
+          <rect
+            x={boxX(idx)}
+            y={boxY}
+            width={boxSize}
+            height={boxSize}
+            rx="6"
+            fill={fillFor(idx)}
+            opacity={opacityFor(idx)}
+            stroke={fillFor(idx)}
+            strokeWidth="2"
+          />
+          <text
+            x={cx(idx)}
+            y={boxY + boxSize / 2 + 5}
+            textAnchor="middle"
+            className="fill-gray-800 dark:fill-gray-100"
+            fontSize="14"
+            fontWeight="700"
+          >
+            {val}
+          </text>
+          <text
+            x={cx(idx)}
+            y={boxY + boxSize + 16}
+            textAnchor="middle"
+            className="fill-gray-400 dark:fill-gray-500"
+            fontSize="9"
+          >
+            {idx}
+          </text>
+        </g>
+      ))}
+    </svg>
+  );
+};
+
 const Content = () => {
   const { theme } = useTheme();
 
@@ -15,12 +104,27 @@ const Content = () => {
     `Linear Search is easy to understand but can be slow for large lists compared to faster methods like Binary Search.`,
   ];
 
+  const searchArray = [5, 3, 8, 1, 9];
+
   const working = [
-    { points: "Start from the first number (5). Is 5 equal to 8? No." },
-    { points: "Move to the next number (3). Is 3 equal to 8? No." },
+    {
+      points: "Start from the first number (5). Is 5 equal to 8? No.",
+      current: 0,
+      checked: [],
+      found: false,
+    },
+    {
+      points: "Move to the next number (3). Is 3 equal to 8? No.",
+      current: 1,
+      checked: [0],
+      found: false,
+    },
     {
       points:
         "Move to the next number (8). Is 8 equal to 8? Yes! Stop here. The position is 2 (or 3 if counting starts from 1).",
+      current: 2,
+      checked: [0, 1],
+      found: true,
     },
   ];
 
@@ -75,17 +179,41 @@ const Content = () => {
               {paragraphs[1]}
             </p>
 
-            <ol className="space-y-3 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+            <ol className="space-y-5 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
               {working.map((item, index) => (
                 <li
                   key={index}
                   className="text-gray-700 dark:text-gray-300 pl-2"
                 >
                   {item.points}
+                  <div className="mt-3 not-prose">
+                    <ArrayCheckDiagram
+                      keyPrefix={`ls-step${index}`}
+                      values={searchArray}
+                      current={item.current}
+                      checked={item.checked}
+                      found={item.found}
+                    />
+                  </div>
                 </li>
               ))}
             </ol>
 
+            <div className="mt-4 flex flex-wrap items-center gap-3 text-xs text-gray-500 dark:text-gray-400">
+              <span className="flex items-center gap-1.5">
+                <span className="w-3 h-3 rounded-sm bg-amber-500 inline-block"></span>
+                Currently checking
+              </span>
+              <span className="flex items-center gap-1.5">
+                <span className="w-3 h-3 rounded-sm bg-slate-400 inline-block"></span>
+                Checked, no match
+              </span>
+              <span className="flex items-center gap-1.5">
+                <span className="w-3 h-3 rounded-sm bg-emerald-500 inline-block"></span>
+                Match found
+              </span>
+            </div>
+
             <p className="text-gray-700 dark:text-gray-300 mt-4 leading-relaxed">
               {paragraphs[2]}
             </p>
diff --git a/app/visualizer/searching/linearsearch/page.jsx b/app/visualizer/searching/linearsearch/page.jsx
index 7550214..3deb5b8 100755
--- a/app/visualizer/searching/linearsearch/page.jsx
+++ b/app/visualizer/searching/linearsearch/page.jsx
@@ -4,7 +4,8 @@ import ModuleHeader from "@/app/components/modules/Header";
 import BackToTopButton from "@/app/components/ui/backtotop";
 import Footer from "@/app/components/footer";
 import ExploreOther from "@/app/components/ui/exploreOther";
-import Code from "@/app/visualizer/searching/linearsearch/codeBlock";
+import CodeBlock from "@/app/components/modules/CodeBlock";
+import codeExamples from "./code";
 import Quiz from "@/app/visualizer/searching/linearsearch/quiz";
 import Content from "@/app/visualizer/searching/linearsearch/content";
 import ModuleCard from "@/app/components/ui/ModuleCard";
@@ -82,7 +83,7 @@ export default function Page() {
         </section>
 
         <section className="px-6">
-          <Code />
+          <CodeBlock title="Linear Search Implementation" codeExamples={codeExamples} />
         </section>
 
         <section className="px-6 md:px-12 my-12">
diff --git a/app/visualizer/sorting/bubblesort/code.js b/app/visualizer/sorting/bubblesort/code.js
new file mode 100755
index 0000000..b38c95d
--- /dev/null
+++ b/app/visualizer/sorting/bubblesort/code.js
@@ -0,0 +1,172 @@
+const codeExamples = {
+    javascript: `// Bubble Sort in JavaScript
+function bubbleSort(arr) {
+  let n = arr.length;
+  
+  // Outer loop for passes
+  for (let i = 0; i < n - 1; i++) {
+    // Inner loop for comparisons
+    for (let j = 0; j < n - i - 1; j++) {
+      // Swap if current element is greater than next
+      if (arr[j] > arr[j + 1]) {
+        // ES6 destructuring assignment for swap
+        [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]];
+      }
+    }
+  }
+  return arr;
+}
+
+// Usage example
+const unsortedArray = [64, 34, 25, 12, 22, 11, 90];
+console.log("Unsorted array:", unsortedArray);
+const sortedArray = bubbleSort(unsortedArray);
+console.log("Sorted array:", sortedArray);`,
+
+    python: `# Bubble Sort in Python
+def bubble_sort(arr):
+    n = len(arr)
+    
+    # Outer loop for passes
+    for i in range(n - 1):
+        # Inner loop for comparisons
+        for j in range(n - i - 1):
+            # Swap if current element is greater than next
+            if arr[j] > arr[j + 1]:
+                # Python tuple unpacking for swap
+                arr[j], arr[j + 1] = arr[j + 1], arr[j]
+    return arr
+
+# Usage example
+unsorted_array = [64, 34, 25, 12, 22, 11, 90]
+print("Unsorted array:", unsorted_array)
+sorted_array = bubble_sort(unsorted_array)
+print("Sorted array:", sorted_array)`,
+
+    java: `// Bubble Sort in Java
+public class BubbleSort {
+    public static void bubbleSort(int[] arr) {
+        int n = arr.length;
+        
+        // Outer loop for passes
+        for (int i = 0; i < n - 1; i++) {
+            // Inner loop for comparisons
+            for (int j = 0; j < n - i - 1; j++) {
+                // Swap if current element is greater than next
+                if (arr[j] > arr[j + 1]) {
+                    // Traditional swap using temp variable
+                    int temp = arr[j];
+                    arr[j] = arr[j + 1];
+                    arr[j + 1] = temp;
+                }
+            }
+        }
+    }
+
+    public static void main(String[] args) {
+        int[] unsortedArray = {64, 34, 25, 12, 22, 11, 90};
+        System.out.print("Unsorted array: ");
+        printArray(unsortedArray);
+        
+        bubbleSort(unsortedArray);
+        
+        System.out.print("Sorted array: ");
+        printArray(unsortedArray);
+    }
+    
+    // Helper method to print array
+    private static void printArray(int[] arr) {
+        for (int num : arr) {
+            System.out.print(num + " ");
+        }
+        System.out.println();
+    }
+}`,
+
+    c: `// Bubble Sort in C
+#include <stdio.h>
+
+void bubbleSort(int arr[], int n) {
+    // Outer loop for passes
+    for (int i = 0; i < n - 1; i++) {
+        // Inner loop for comparisons
+        for (int j = 0; j < n - i - 1; j++) {
+            // Swap if current element is greater than next
+            if (arr[j] > arr[j + 1]) {
+                // Traditional swap using temp variable
+                int temp = arr[j];
+                arr[j] = arr[j + 1];
+                arr[j + 1] = temp;
+            }
+        }
+    }
+}
+
+// Function to print an array
+void printArray(int arr[], int size) {
+    for (int i = 0; i < size; i++) {
+        printf("%d ", arr[i]);
+    }
+    printf("\\n");
+}
+
+int main() {
+    int unsortedArray[] = {64, 34, 25, 12, 22, 11, 90};
+    int n = sizeof(unsortedArray) / sizeof(unsortedArray[0]);
+    
+    printf("Unsorted array: ");
+    printArray(unsortedArray, n);
+    
+    bubbleSort(unsortedArray, n);
+    
+    printf("Sorted array: ");
+    printArray(unsortedArray, n);
+    
+    return 0;
+}`,
+
+    cpp: `// Bubble Sort in C++
+#include <iostream>
+#include <vector>
+using namespace std;
+
+void bubbleSort(vector<int>& arr) {
+    int n = arr.size();
+    
+    // Outer loop for passes
+    for (int i = 0; i < n - 1; i++) {
+        // Inner loop for comparisons
+        for (int j = 0; j < n - i - 1; j++) {
+            // Swap if current element is greater than next
+            if (arr[j] > arr[j + 1]) {
+                // Using std::swap for cleaner code
+                swap(arr[j], arr[j + 1]);
+            }
+        }
+    }
+}
+
+// Function to print an array
+void printArray(const vector<int>& arr) {
+    for (int num : arr) {
+        cout << num << " ";
+    }
+    cout << endl;
+}
+
+int main() {
+    vector<int> unsortedArray = {64, 34, 25, 12, 22, 11, 90};
+    
+    cout << "Unsorted array: ";
+    printArray(unsortedArray);
+    
+    bubbleSort(unsortedArray);
+    
+    cout << "Sorted array: ";
+    printArray(unsortedArray);
+    
+    return 0;
+}`
+  };
+
+export default codeExamples;
diff --git a/app/visualizer/sorting/bubblesort/codeBlock.jsx b/app/visualizer/sorting/bubblesort/codeBlock.jsx
deleted file mode 100755
index 7a65e0e..0000000
--- a/app/visualizer/sorting/bubblesort/codeBlock.jsx
+++ /dev/null
@@ -1,324 +0,0 @@
-'use client';
-import { useState, useRef } from 'react';
-import { FaCopy, FaCheck, FaCode } from 'react-icons/fa';
-import { motion, AnimatePresence } from 'framer-motion';
-import hljs from 'highlight.js';
-import 'highlight.js/styles/github.css';
-import 'highlight.js/styles/github-dark.css';
-
-export const highlightCode = (code, language) => {
-  const validLanguage = hljs.getLanguage(language) ? language : 'plaintext';
-  return hljs.highlight(code, { language: validLanguage }).value;
-};
-
-const CodeBlock = () => {
-  const [selectedLanguage, setSelectedLanguage] = useState('javascript');
-  const [copied, setCopied] = useState(false);
-  const [isHovered, setIsHovered] = useState(false);
-  const topRef = useRef(null);
-
-  const languages = [
-    { id: 'javascript', name: 'JavaScript' },
-    { id: 'python', name: 'Python' },
-    { id: 'java', name: 'Java' },
-    { id: 'c', name: 'C' },
-    { id: 'cpp', name: 'C++' }
-  ];
-
-  const copyToClipboard = async (text) => {
-    try {
-      await navigator.clipboard.writeText(text);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    } catch (err) {
-      console.error('Failed to copy text: ', err);
-    }
-  };
-
-  const codeExamples = {
-    javascript: `// Bubble Sort in JavaScript
-function bubbleSort(arr) {
-  let n = arr.length;
-  
-  // Outer loop for passes
-  for (let i = 0; i < n - 1; i++) {
-    // Inner loop for comparisons
-    for (let j = 0; j < n - i - 1; j++) {
-      // Swap if current element is greater than next
-      if (arr[j] > arr[j + 1]) {
-        // ES6 destructuring assignment for swap
-        [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]];
-      }
-    }
-  }
-  return arr;
-}
-
-// Usage example
-const unsortedArray = [64, 34, 25, 12, 22, 11, 90];
-console.log("Unsorted array:", unsortedArray);
-const sortedArray = bubbleSort(unsortedArray);
-console.log("Sorted array:", sortedArray);`,
-
-    python: `# Bubble Sort in Python
-def bubble_sort(arr):
-    n = len(arr)
-    
-    # Outer loop for passes
-    for i in range(n - 1):
-        # Inner loop for comparisons
-        for j in range(n - i - 1):
-            # Swap if current element is greater than next
-            if arr[j] > arr[j + 1]:
-                # Python tuple unpacking for swap
-                arr[j], arr[j + 1] = arr[j + 1], arr[j]
-    return arr
-
-# Usage example
-unsorted_array = [64, 34, 25, 12, 22, 11, 90]
-print("Unsorted array:", unsorted_array)
-sorted_array = bubble_sort(unsorted_array)
-print("Sorted array:", sorted_array)`,
-
-    java: `// Bubble Sort in Java
-public class BubbleSort {
-    public static void bubbleSort(int[] arr) {
-        int n = arr.length;
-        
-        // Outer loop for passes
-        for (int i = 0; i < n - 1; i++) {
-            // Inner loop for comparisons
-            for (int j = 0; j < n - i - 1; j++) {
-                // Swap if current element is greater than next
-                if (arr[j] > arr[j + 1]) {
-                    // Traditional swap using temp variable
-                    int temp = arr[j];
-                    arr[j] = arr[j + 1];
-                    arr[j + 1] = temp;
-                }
-            }
-        }
-    }
-
-    public static void main(String[] args) {
-        int[] unsortedArray = {64, 34, 25, 12, 22, 11, 90};
-        System.out.print("Unsorted array: ");
-        printArray(unsortedArray);
-        
-        bubbleSort(unsortedArray);
-        
-        System.out.print("Sorted array: ");
-        printArray(unsortedArray);
-    }
-    
-    // Helper method to print array
-    private static void printArray(int[] arr) {
-        for (int num : arr) {
-            System.out.print(num + " ");
-        }
-        System.out.println();
-    }
-}`,
-
-    c: `// Bubble Sort in C
-#include <stdio.h>
-
-void bubbleSort(int arr[], int n) {
-    // Outer loop for passes
-    for (int i = 0; i < n - 1; i++) {
-        // Inner loop for comparisons
-        for (int j = 0; j < n - i - 1; j++) {
-            // Swap if current element is greater than next
-            if (arr[j] > arr[j + 1]) {
-                // Traditional swap using temp variable
-                int temp = arr[j];
-                arr[j] = arr[j + 1];
-                arr[j + 1] = temp;
-            }
-        }
-    }
-}
-
-// Function to print an array
-void printArray(int arr[], int size) {
-    for (int i = 0; i < size; i++) {
-        printf("%d ", arr[i]);
-    }
-    printf("\\n");
-}
-
-int main() {
-    int unsortedArray[] = {64, 34, 25, 12, 22, 11, 90};
-    int n = sizeof(unsortedArray) / sizeof(unsortedArray[0]);
-    
-    printf("Unsorted array: ");
-    printArray(unsortedArray, n);
-    
-    bubbleSort(unsortedArray, n);
-    
-    printf("Sorted array: ");
-    printArray(unsortedArray, n);
-    
-    return 0;
-}`,
-
-    cpp: `// Bubble Sort in C++
-#include <iostream>
-#include <vector>
-using namespace std;
-
-void bubbleSort(vector<int>& arr) {
-    int n = arr.size();
-    
-    // Outer loop for passes
-    for (int i = 0; i < n - 1; i++) {
-        // Inner loop for comparisons
-        for (int j = 0; j < n - i - 1; j++) {
-            // Swap if current element is greater than next
-            if (arr[j] > arr[j + 1]) {
-                // Using std::swap for cleaner code
-                swap(arr[j], arr[j + 1]);
-            }
-        }
-    }
-}
-
-// Function to print an array
-void printArray(const vector<int>& arr) {
-    for (int num : arr) {
-        cout << num << " ";
-    }
-    cout << endl;
-}
-
-int main() {
-    vector<int> unsortedArray = {64, 34, 25, 12, 22, 11, 90};
-    
-    cout << "Unsorted array: ";
-    printArray(unsortedArray);
-    
-    bubbleSort(unsortedArray);
-    
-    cout << "Sorted array: ";
-    printArray(unsortedArray);
-    
-    return 0;
-}`
-  };
-
-  return (
-     <div 
-          className="max-w-4xl mx-auto"
-          ref={topRef}
-          onMouseEnter={() => setIsHovered(true)}
-          onMouseLeave={() => setIsHovered(false)}
-        >
-          <motion.div 
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.3 }}
-            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-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">
-                  Bubble Sort Implementation
-                </h3>
-              </div>
-              
-              <motion.button
-                whileHover={{ scale: 1.05 }}
-                whileTap={{ scale: 0.95 }}
-                onClick={() => copyToClipboard(codeExamples[selectedLanguage])}
-                className="flex items-center gap-2 px-3 py-1.5 bg-gray-100 dark:bg-gray-600 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-500 transition-colors text-gray-800 dark:text-gray-100 text-sm font-medium"
-                aria-label="Copy code"
-              >
-                <AnimatePresence mode="wait">
-                  {copied ? (
-                    <motion.span
-                      key="check"
-                      initial={{ opacity: 0 }}
-                      animate={{ opacity: 1 }}
-                      exit={{ opacity: 0 }}
-                      className="flex items-center text-green-600 dark:text-green-400"
-                    >
-                      <FaCheck className="mr-1" /> Copied
-                    </motion.span>
-                  ) : (
-                    <motion.span
-                      key="copy"
-                      initial={{ opacity: 0 }}
-                      animate={{ opacity: 1 }}
-                      exit={{ opacity: 0 }}
-                      className="flex items-center"
-                    >
-                      <FaCopy className="mr-1" /> Copy Code
-                    </motion.span>
-                  )}
-                </AnimatePresence>
-              </motion.button>
-            </div>
-    
-            {/* Language Selector */}
-            <div className="px-4 pt-3 pb-2 flex flex-wrap gap-2 border-b border-gray-200 dark:border-gray-700">
-              {languages.map((lang) => (
-                <motion.button
-                  key={lang.id}
-                  whileHover={{ scale: 1.03 }}
-                  whileTap={{ scale: 0.97 }}
-                  onClick={() => setSelectedLanguage(lang.id)}
-                  className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-colors ${
-                    selectedLanguage === lang.id
-                      ? 'bg-blue-500 text-white shadow-md'
-                      : 'bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-600'
-                  }`}
-                >
-                  {lang.name}
-                </motion.button>
-              ))}
-            </div>
-    
-            {/* Code Block */}
-            <div className="relative">
-              <AnimatePresence mode="wait">
-                <motion.div
-                  key={selectedLanguage}
-                  initial={{ opacity: 0 }}
-                  animate={{ opacity: 1 }}
-                  exit={{ opacity: 0 }}
-                  transition={{ duration: 0.2 }}
-                  className="overflow-x-auto p-4 bg-gray-900 text-white"
-                >
-                  <pre className="text-sm leading-relaxed">
-                    <code 
-                      className={`language-${selectedLanguage}`}
-                      dangerouslySetInnerHTML={{ 
-                        __html: highlightCode(codeExamples[selectedLanguage], selectedLanguage) 
-                      }} 
-                    />
-                  </pre>
-                </motion.div>
-              </AnimatePresence>
-    
-              {/* Language indicator (shown on hover) */}
-              <AnimatePresence>
-                {isHovered && (
-                  <motion.div
-                    initial={{ opacity: 0, y: 10 }}
-                    animate={{ opacity: 1, y: 0 }}
-                    exit={{ opacity: 0, y: 10 }}
-                    className="absolute bottom-3 right-3 px-2 py-1 bg-gray-800 text-gray-300 text-xs rounded-md"
-                  >
-                    {selectedLanguage.toUpperCase()}
-                  </motion.div>
-                )}
-              </AnimatePresence>
-            </div>
-          </motion.div>
-        </div>
-  );
-};
-
-export default CodeBlock;
\ No newline at end of file
diff --git a/app/visualizer/sorting/bubblesort/content.jsx b/app/visualizer/sorting/bubblesort/content.jsx
index 54fd640..e25ed5c 100755
--- a/app/visualizer/sorting/bubblesort/content.jsx
+++ b/app/visualizer/sorting/bubblesort/content.jsx
@@ -4,6 +4,96 @@ import { useTheme } from "@/app/contexts/ThemeContext";
 import DailyDSAEmbed from "@/app/components/ui/DailyDSAEmbed";
 import NewsletterEmbed from "@/app/components/ui/NewsletterEmbed";
 import InContentAd from "@/app/components/ads/InContentAd";
+
+const ArrayStepDiagram = ({ values, i, j, swapped, sortedFrom, keyPrefix }) => {
+  const boxSize = 40;
+  const gap = 8;
+  const paddingX = 8;
+  const topPadding = 26;
+  const width = values.length * (boxSize + gap) - gap + paddingX * 2;
+  const height = boxSize + topPadding + 22;
+
+  const boxX = (idx) => paddingX + idx * (boxSize + gap);
+  const boxY = topPadding;
+
+  const isSorted = (idx) => sortedFrom !== undefined && idx >= sortedFrom;
+  const isCompared = (idx) => idx === i || idx === j;
+
+  const fillFor = (idx) => {
+    if (isCompared(idx)) return swapped ? "#f59e0b" : "#94a3b8";
+    if (isSorted(idx)) return "#10b981";
+    return "#3b82f6";
+  };
+
+  const cx = (idx) => boxX(idx) + boxSize / 2;
+
+  return (
+    <svg
+      viewBox={`0 0 ${width} ${height}`}
+      className="mx-auto"
+      style={{ width: `${width}px`, maxWidth: "100%" }}
+    >
+      <defs>
+        <marker
+          id={`${keyPrefix}-swap-arrow`}
+          markerWidth="7"
+          markerHeight="7"
+          refX="6"
+          refY="3.5"
+          orient="auto"
+        >
+          <path d="M0,0 L7,3.5 L0,7 Z" fill="#f59e0b" />
+        </marker>
+      </defs>
+
+      {swapped && i !== undefined && j !== undefined && (
+        <path
+          d={`M ${cx(i)} ${boxY - 6} Q ${(cx(i) + cx(j)) / 2} ${boxY - 20} ${cx(j)} ${boxY - 6}`}
+          fill="none"
+          stroke="#f59e0b"
+          strokeWidth="1.5"
+          markerEnd={`url(#${keyPrefix}-swap-arrow)`}
+        />
+      )}
+
+      {values.map((val, idx) => (
+        <g key={`${keyPrefix}-box-${idx}`}>
+          <rect
+            x={boxX(idx)}
+            y={boxY}
+            width={boxSize}
+            height={boxSize}
+            rx="6"
+            fill={fillFor(idx)}
+            opacity={isCompared(idx) || isSorted(idx) ? "0.9" : "0.25"}
+            stroke={fillFor(idx)}
+            strokeWidth="2"
+          />
+          <text
+            x={cx(idx)}
+            y={boxY + boxSize / 2 + 5}
+            textAnchor="middle"
+            className="fill-gray-800 dark:fill-gray-100"
+            fontSize="14"
+            fontWeight="700"
+          >
+            {val}
+          </text>
+          <text
+            x={cx(idx)}
+            y={boxY + boxSize + 16}
+            textAnchor="middle"
+            className="fill-gray-400 dark:fill-gray-500"
+            fontSize="9"
+          >
+            {idx}
+          </text>
+        </g>
+      ))}
+    </svg>
+  );
+};
+
 const Content = () => {
   const { theme } = useTheme();
 
@@ -16,22 +106,45 @@ const Content = () => {
   const working = [
     {
       passes: "First Pass:",
+      sortedFrom: 4,
       points: [
         "(5, 1) → Swap → [1, 5, 4, 2, 8]",
         "(5, 4) → Swap → [1, 4, 5, 2, 8]",
         "(5, 2) → Swap → [1, 4, 2, 5, 8]",
         "(5, 8) → No swap",
       ],
+      steps: [
+        { array: [5, 1, 4, 2, 8], i: 0, j: 1, swapped: true },
+        { array: [1, 5, 4, 2, 8], i: 1, j: 2, swapped: true },
+        { array: [1, 4, 5, 2, 8], i: 2, j: 3, swapped: true },
+        { array: [1, 4, 2, 5, 8], i: 3, j: 4, swapped: false },
+      ],
     },
     {
       passes: "Second Pass:",
+      sortedFrom: 3,
       points: [
         "(1, 4) → No swap",
         "(4, 2) → Swap → [1, 2, 4, 5, 8]",
         "(4, 5) → No swap",
       ],
+      steps: [
+        { array: [1, 4, 2, 5, 8], i: 0, j: 1, swapped: false },
+        { array: [1, 4, 2, 5, 8], i: 1, j: 2, swapped: true },
+        { array: [1, 2, 4, 5, 8], i: 2, j: 3, swapped: false },
+      ],
+    },
+    {
+      passes: "Third Pass:",
+      sortedFrom: 0,
+      points: ["No swaps needed → List is sorted"],
+      steps: [
+        { array: [1, 2, 4, 5, 8], i: 0, j: 1, swapped: false },
+        { array: [1, 2, 4, 5, 8], i: 1, j: 2, swapped: false },
+        { array: [1, 2, 4, 5, 8], i: 2, j: 3, swapped: false },
+        { array: [1, 2, 4, 5, 8], i: 3, j: 4, swapped: false },
+      ],
     },
-    { passes: "Third Pass:", points: ["No swaps needed → List is sorted"] },
   ];
 
   const algorithm = [
@@ -92,7 +205,7 @@ const Content = () => {
               Imagine you have an unsorted list of numbers: [5, 1, 4, 2, 8]
             </p>
 
-            <ol className="space-y-3 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
+            <ol className="space-y-6 list-decimal pl-5 marker:text-gray-500 dark:marker:text-gray-400">
               {working.map((items, index) => (
                 <li
                   key={index}
@@ -111,10 +224,41 @@ const Content = () => {
                       ))}
                     </ul>
                   )}
+
+                  {items.steps && (
+                    <div className="mt-4 flex flex-wrap items-center gap-3 not-prose overflow-x-auto pb-2">
+                      {items.steps.map((step, stepIndex) => (
+                        <ArrayStepDiagram
+                          key={stepIndex}
+                          keyPrefix={`pass${index}-step${stepIndex}`}
+                          values={step.array}
+                          i={step.i}
+                          j={step.j}
+                          swapped={step.swapped}
+                          sortedFrom={items.sortedFrom}
+                        />
+                      ))}
+                    </div>
+                  )}
                 </li>
               ))}
             </ol>
 
+            <div className="mt-4 flex flex-wrap items-center gap-3 text-xs text-gray-500 dark:text-gray-400">
+              <span className="flex items-center gap-1.5">
+                <span className="w-3 h-3 rounded-sm bg-amber-500 inline-block"></span>
+                Compared &amp; swapped
+              </span>
+              <span className="flex items-center gap-1.5">
+                <span className="w-3 h-3 rounded-sm bg-slate-400 inline-block"></span>
+                Compared, no swap
+              </span>
+              <span className="flex items-center gap-1.5">
+                <span className="w-3 h-3 rounded-sm bg-emerald-500 inline-block"></span>
+                Sorted position
+              </span>
+            </div>
+
             <p className="text-gray-700 dark:text-gray-300 mt-4 leading-relaxed">
               The algorithm stops when a complete pass is made without any
               swaps.
diff --git a/app/visualizer/sorting/bubblesort/page.jsx b/app/visualizer/sorting/bubblesort/page.jsx
index 8e55a7d..e3ce024 100755
--- a/app/visualizer/sorting/bubblesort/page.jsx
+++ b/app/visualizer/sorting/bubblesort/page.jsx
@@ -5,7 +5,8 @@ import Footer from "@/app/components/footer";
 import ModuleHeader from "@/app/components/modules/Header";
 import Content from "@/app/visualizer/sorting/bubblesort/content";
 import Quiz from "@/app/visualizer/sorting/bubblesort/quiz";
-import Code from "@/app/visualizer/sorting/bubblesort/codeBlock";
+import CodeBlock from "@/app/components/modules/CodeBlock";
+import codeExamples from "./code";
 import ExploreOther from "@/app/components/ui/exploreOther";
 import ModuleCard from "@/app/components/ui/ModuleCard";
 import { MODULE_MAPS } from "@/lib/modulesMap";
@@ -78,7 +79,7 @@ export default function Page() {
         </section>
 
         <section className="px-6">
-          <Code />
+          <CodeBlock title="Bubble Sort Implementation" codeExamples={codeExamples} />
         </section>
 
         <section className="px-6 md:px-12 my-12">
diff --git a/app/visualizer/sorting/insertionsort/code.js b/app/visualizer/sorting/insertionsort/code.js
new file mode 100755
index 0000000..edfb33d
--- /dev/null
+++ b/app/visualizer/sorting/insertionsort/code.js
@@ -0,0 +1,181 @@
+const codeExamples = {
+    javascript: `// Insertion Sort in JavaScript
+function insertionSort(arr) {
+  // Start from the second element (index 1)
+  for (let i = 1; i < arr.length; i++) {
+    // Current element to be inserted
+    let current = arr[i];
+    // Compare with the sorted portion
+    let j = i - 1;
+    
+    // Shift elements greater than current to the right
+    while (j >= 0 && arr[j] > current) {
+      arr[j + 1] = arr[j];
+      j--;
+    }
+    // Insert the current element in correct position
+    arr[j + 1] = current;
+  }
+  return arr;
+}
+
+// Usage example
+const unsortedArray = [12, 11, 13, 5, 6];
+console.log("Unsorted array:", unsortedArray);
+const sortedArray = insertionSort(unsortedArray);
+console.log("Sorted array:", sortedArray);`,
+
+    python: `# Insertion Sort in Python
+def insertion_sort(arr):
+    # Start from the second element (index 1)
+    for i in range(1, len(arr)):
+        # Current element to be inserted
+        current = arr[i]
+        # Compare with the sorted portion
+        j = i - 1
+        
+        # Shift elements greater than current to the right
+        while j >= 0 and arr[j] > current:
+            arr[j + 1] = arr[j]
+            j -= 1
+        # Insert the current element in correct position
+        arr[j + 1] = current
+    return arr
+
+# Usage example
+unsorted_array = [12, 11, 13, 5, 6]
+print("Unsorted array:", unsorted_array)
+sorted_array = insertion_sort(unsorted_array)
+print("Sorted array:", sorted_array)`,
+
+    java: `// Insertion Sort in Java
+public class InsertionSort {
+    public static void insertionSort(int[] arr) {
+        // Start from the second element (index 1)
+        for (int i = 1; i < arr.length; i++) {
+            // Current element to be inserted
+            int current = arr[i];
+            // Compare with the sorted portion
+            int j = i - 1;
+            
+            // Shift elements greater than current to the right
+            while (j >= 0 && arr[j] > current) {
+                arr[j + 1] = arr[j];
+                j--;
+            }
+            // Insert the current element in correct position
+            arr[j + 1] = current;
+        }
+    }
+
+    public static void main(String[] args) {
+        int[] unsortedArray = {12, 11, 13, 5, 6};
+        System.out.print("Unsorted array: ");
+        printArray(unsortedArray);
+        
+        insertionSort(unsortedArray);
+        
+        System.out.print("Sorted array: ");
+        printArray(unsortedArray);
+    }
+    
+    // Helper method to print array
+    private static void printArray(int[] arr) {
+        for (int num : arr) {
+            System.out.print(num + " ");
+        }
+        System.out.println();
+    }
+}`,
+
+    c: `// Insertion Sort in C
+#include <stdio.h>
+
+void insertionSort(int arr[], int n) {
+    // Start from the second element (index 1)
+    for (int i = 1; i < n; i++) {
+        // Current element to be inserted
+        int current = arr[i];
+        // Compare with the sorted portion
+        int j = i - 1;
+        
+        // Shift elements greater than current to the right
+        while (j >= 0 && arr[j] > current) {
+            arr[j + 1] = arr[j];
+            j--;
+        }
+        // Insert the current element in correct position
+        arr[j + 1] = current;
+    }
+}
+
+// Function to print an array
+void printArray(int arr[], int size) {
+    for (int i = 0; i < size; i++) {
+        printf("%d ", arr[i]);
+    }
+    printf("\\n");
+}
+
+int main() {
+    int unsortedArray[] = {12, 11, 13, 5, 6};
+    int n = sizeof(unsortedArray) / sizeof(unsortedArray[0]);
+    
+    printf("Unsorted array: ");
+    printArray(unsortedArray, n);
+    
+    insertionSort(unsortedArray, n);
+    
+    printf("Sorted array: ");
+    printArray(unsortedArray, n);
+    
+    return 0;
+}`,
+
+    cpp: `// Insertion Sort in C++
+#include <iostream>
+#include <vector>
+using namespace std;
+
+void insertionSort(vector<int>& arr) {
+    // Start from the second element (index 1)
+    for (int i = 1; i < arr.size(); i++) {
+        // Current element to be inserted
+        int current = arr[i];
+        // Compare with the sorted portion
+        int j = i - 1;
+        
+        // Shift elements greater than current to the right
+        while (j >= 0 && arr[j] > current) {
+            arr[j + 1] = arr[j];
+            j--;
+        }
+        // Insert the current element in correct position
+        arr[j + 1] = current;
+    }
+}
+
+// Function to print an array
+void printArray(const vector<int>& arr) {
+    for (int num : arr) {
+        cout << num << " ";
+    }
+    cout << endl;
+}
+
+int main() {
+    vector<int> unsortedArray = {12, 11, 13, 5, 6};
+    
+    cout << "Unsorted array: ";
+    printArray(unsortedArray);
+    
+    insertionSort(unsortedArray);
+    
+    cout << "Sorted array: ";
+    printArray(unsortedArray);
+    
+    return 0;
+}`
+  };
+
+export default codeExamples;
diff --git a/app/visualizer/sorting/insertionsort/codeBlock.jsx b/app/visualizer/sorting/insertionsort/codeBlock.jsx
deleted file mode 100755
index 22eeda9..0000000
--- a/app/visualizer/sorting/insertionsort/codeBlock.jsx
+++ /dev/null
@@ -1,333 +0,0 @@
-'use client';
-import { useState, useRef } from 'react';
-import { FaCopy, FaCheck, FaCode } from 'react-icons/fa';
-import { motion, AnimatePresence } from 'framer-motion';
-import hljs from 'highlight.js';
-import 'highlight.js/styles/github.css';
-import 'highlight.js/styles/github-dark.css';
-
-export const highlightCode = (code, language) => {
-  const validLanguage = hljs.getLanguage(language) ? language : 'plaintext';
-  return hljs.highlight(code, { language: validLanguage }).value;
-};
-
-const CodeBlock = () => {
-  const [selectedLanguage, setSelectedLanguage] = useState('javascript');
-  const [copied, setCopied] = useState(false);
-  const [isHovered, setIsHovered] = useState(false);
-  const topRef = useRef(null);
-
-  const languages = [
-    { id: 'javascript', name: 'JavaScript' },
-    { id: 'python', name: 'Python' },
-    { id: 'java', name: 'Java' },
-    { id: 'c', name: 'C' },
-    { id: 'cpp', name: 'C++' }
-  ];
-
-  const copyToClipboard = async (text) => {
-    try {
-      await navigator.clipboard.writeText(text);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    } catch (err) {
-      console.error('Failed to copy text: ', err);
-    }
-  };
-
-  const codeExamples = {
-    javascript: `// Insertion Sort in JavaScript
-function insertionSort(arr) {
-  // Start from the second element (index 1)
-  for (let i = 1; i < arr.length; i++) {
-    // Current element to be inserted
-    let current = arr[i];
-    // Compare with the sorted portion
-    let j = i - 1;
-    
-    // Shift elements greater than current to the right
-    while (j >= 0 && arr[j] > current) {
-      arr[j + 1] = arr[j];
-      j--;
-    }
-    // Insert the current element in correct position
-    arr[j + 1] = current;
-  }
-  return arr;
-}
-
-// Usage example
-const unsortedArray = [12, 11, 13, 5, 6];
-console.log("Unsorted array:", unsortedArray);
-const sortedArray = insertionSort(unsortedArray);
-console.log("Sorted array:", sortedArray);`,
-
-    python: `# Insertion Sort in Python
-def insertion_sort(arr):
-    # Start from the second element (index 1)
-    for i in range(1, len(arr)):
-        # Current element to be inserted
-        current = arr[i]
-        # Compare with the sorted portion
-        j = i - 1
-        
-        # Shift elements greater than current to the right
-        while j >= 0 and arr[j] > current:
-            arr[j + 1] = arr[j]
-            j -= 1
-        # Insert the current element in correct position
-        arr[j + 1] = current
-    return arr
-
-# Usage example
-unsorted_array = [12, 11, 13, 5, 6]
-print("Unsorted array:", unsorted_array)
-sorted_array = insertion_sort(unsorted_array)
-print("Sorted array:", sorted_array)`,
-
-    java: `// Insertion Sort in Java
-public class InsertionSort {
-    public static void insertionSort(int[] arr) {
-        // Start from the second element (index 1)
-        for (int i = 1; i < arr.length; i++) {
-            // Current element to be inserted
-            int current = arr[i];
-            // Compare with the sorted portion
-            int j = i - 1;
-            
-            // Shift elements greater than current to the right
-            while (j >= 0 && arr[j] > current) {
-                arr[j + 1] = arr[j];
-                j--;
-            }
-            // Insert the current element in correct position
-            arr[j + 1] = current;
-        }
-    }
-
-    public static void main(String[] args) {
-        int[] unsortedArray = {12, 11, 13, 5, 6};
-        System.out.print("Unsorted array: ");
-        printArray(unsortedArray);
-        
-        insertionSort(unsortedArray);
-        
-        System.out.print("Sorted array: ");
-        printArray(unsortedArray);
-    }
-    
-    // Helper method to print array
-    private static void printArray(int[] arr) {
-        for (int num : arr) {
-            System.out.print(num + " ");
-        }
-        System.out.println();
-    }
-}`,
-
-    c: `// Insertion Sort in C
-#include <stdio.h>
-
-void insertionSort(int arr[], int n) {
-    // Start from the second element (index 1)
-    for (int i = 1; i < n; i++) {
-        // Current element to be inserted
-        int current = arr[i];
-        // Compare with the sorted portion
-        int j = i - 1;
-        
-        // Shift elements greater than current to the right
-        while (j >= 0 && arr[j] > current) {
-            arr[j + 1] = arr[j];
-            j--;
-        }
-        // Insert the current element in correct position
-        arr[j + 1] = current;
-    }
-}
-
-// Function to print an array
-void printArray(int arr[], int size) {
-    for (int i = 0; i < size; i++) {
-        printf("%d ", arr[i]);
-    }
-    printf("\\n");
-}
-
-int main() {
-    int unsortedArray[] = {12, 11, 13, 5, 6};
-    int n = sizeof(unsortedArray) / sizeof(unsortedArray[0]);
-    
-    printf("Unsorted array: ");
-    printArray(unsortedArray, n);
-    
-    insertionSort(unsortedArray, n);
-    
-    printf("Sorted array: ");
-    printArray(unsortedArray, n);
-    
-    return 0;
-}`,
-
-    cpp: `// Insertion Sort in C++
-#include <iostream>
-#include <vector>
-using namespace std;
-
-void insertionSort(vector<int>& arr) {
-    // Start from the second element (index 1)
-    for (int i = 1; i < arr.size(); i++) {
-        // Current element to be inserted
-        int current = arr[i];
-        // Compare with the sorted portion
-        int j = i - 1;
-        
-        // Shift elements greater than current to the right
-        while (j >= 0 && arr[j] > current) {
-            arr[j + 1] = arr[j];
-            j--;
-        }
-        // Insert the current element in correct position
-        arr[j + 1] = current;
-    }
-}
-
-// Function to print an array
-void printArray(const vector<int>& arr) {
-    for (int num : arr) {
-        cout << num << " ";
-    }
-    cout << endl;
-}
-
-int main() {
-    vector<int> unsortedArray = {12, 11, 13, 5, 6};
-    
-    cout << "Unsorted array: ";
-    printArray(unsortedArray);
-    
-    insertionSort(unsortedArray);
-    
-    cout << "Sorted array: ";
-    printArray(unsortedArray);
-    
-    return 0;
-}`
-  };
-
-  return (
-    <div 
-          className="max-w-4xl mx-auto"
-          ref={topRef}
-          onMouseEnter={() => setIsHovered(true)}
-          onMouseLeave={() => setIsHovered(false)}
-        >
-          <motion.div 
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.3 }}
-            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-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">
-                  Insertion Sort Implementation
-                </h3>
-              </div>
-              
-              <motion.button
-                whileHover={{ scale: 1.05 }}
-                whileTap={{ scale: 0.95 }}
-                onClick={() => copyToClipboard(codeExamples[selectedLanguage])}
-                className="flex items-center gap-2 px-3 py-1.5 bg-gray-100 dark:bg-gray-600 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-500 transition-colors text-gray-800 dark:text-gray-100 text-sm font-medium"
-                aria-label="Copy code"
-              >
-                <AnimatePresence mode="wait">
-                  {copied ? (
-                    <motion.span
-                      key="check"
-                      initial={{ opacity: 0 }}
-                      animate={{ opacity: 1 }}
-                      exit={{ opacity: 0 }}
-                      className="flex items-center text-green-600 dark:text-green-400"
-                    >
-                      <FaCheck className="mr-1" /> Copied
-                    </motion.span>
-                  ) : (
-                    <motion.span
-                      key="copy"
-                      initial={{ opacity: 0 }}
-                      animate={{ opacity: 1 }}
-                      exit={{ opacity: 0 }}
-                      className="flex items-center"
-                    >
-                      <FaCopy className="mr-1" /> Copy Code
-                    </motion.span>
-                  )}
-                </AnimatePresence>
-              </motion.button>
-            </div>
-    
-            {/* Language Selector */}
-            <div className="px-4 pt-3 pb-2 flex flex-wrap gap-2 border-b border-gray-200 dark:border-gray-700">
-              {languages.map((lang) => (
-                <motion.button
-                  key={lang.id}
-                  whileHover={{ scale: 1.03 }}
-                  whileTap={{ scale: 0.97 }}
-                  onClick={() => setSelectedLanguage(lang.id)}
-                  className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-colors ${
-                    selectedLanguage === lang.id
-                      ? 'bg-blue-500 text-white shadow-md'
-                      : 'bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-600'
-                  }`}
-                >
-                  {lang.name}
-                </motion.button>
-              ))}
-            </div>
-    
-            {/* Code Block */}
-            <div className="relative">
-              <AnimatePresence mode="wait">
-                <motion.div
-                  key={selectedLanguage}
-                  initial={{ opacity: 0 }}
-                  animate={{ opacity: 1 }}
-                  exit={{ opacity: 0 }}
-                  transition={{ duration: 0.2 }}
-                  className="overflow-x-auto p-4 bg-gray-900 text-white"
-                >
-                  <pre className="text-sm leading-relaxed">
-                    <code 
-                      className={`language-${selectedLanguage}`}
-                      dangerouslySetInnerHTML={{ 
-                        __html: highlightCode(codeExamples[selectedLanguage], selectedLanguage) 
-                      }} 
-                    />
-                  </pre>
-                </motion.div>
-              </AnimatePresence>
-    
-              {/* Language indicator (shown on hover) */}
-              <AnimatePresence>
-                {isHovered && (
-                  <motion.div
-                    initial={{ opacity: 0, y: 10 }}
-                    animate={{ opacity: 1, y: 0 }}
-                    exit={{ opacity: 0, y: 10 }}
-                    className="absolute bottom-3 right-3 px-2 py-1 bg-gray-800 text-gray-300 text-xs rounded-md"
-                  >
-                    {selectedLanguage.toUpperCase()}
-                  </motion.div>
-                )}
-              </AnimatePresence>
-            </div>
-          </motion.div>
-        </div>
-  );
-};
-
-export default CodeBlock;
\ No newline at end of file
diff --git a/app/visualizer/sorting/insertionsort/page.jsx b/app/visualizer/sorting/insertionsort/page.jsx
index b19c0b9..dbee89c 100755
--- a/app/visualizer/sorting/insertionsort/page.jsx
+++ b/app/visualizer/sorting/insertionsort/page.jsx
@@ -3,7 +3,8 @@ import Navbar from "@/app/components/navbarinner";
 import ModuleHeader from "@/app/components/modules/Header";
 import Content from "@/app/visualizer/sorting/insertionsort/content";
 import Quiz from "@/app/visualizer/sorting/insertionsort/quiz";
-import Code from "@/app/visualizer/sorting/insertionsort/codeBlock";
+import CodeBlock from "@/app/components/modules/CodeBlock";
+import codeExamples from "./code";
 import ExploreOther from "@/app/components/ui/exploreOther";
 import BackToTopButton from "@/app/components/ui/backtotop";
 import Footer from "@/app/components/footer";
@@ -78,7 +79,7 @@ export default function Page() {
         </section>
 
         <section className="px-6">
-          <Code />
+          <CodeBlock title="Insertion Sort Implementation" codeExamples={codeExamples} />
         </section>
 
         <section className="px-6 md:px-12 my-12">
diff --git a/app/visualizer/sorting/mergesort/code.js b/app/visualizer/sorting/mergesort/code.js
new file mode 100755
index 0000000..1f3e756
--- /dev/null
+++ b/app/visualizer/sorting/mergesort/code.js
@@ -0,0 +1,267 @@
+const codeExamples = {
+    javascript: `// Merge Sort in JavaScript
+function mergeSort(arr) {
+  if (arr.length <= 1) return arr;
+  
+  const mid = Math.floor(arr.length / 2);
+  const left = mergeSort(arr.slice(0, mid));
+  const right = mergeSort(arr.slice(mid));
+  
+  return merge(left, right);
+}
+
+function merge(left, right) {
+  let result = [];
+  let leftIndex = 0;
+  let rightIndex = 0;
+  
+  while (leftIndex < left.length && rightIndex < right.length) {
+    if (left[leftIndex] < right[rightIndex]) {
+      result.push(left[leftIndex++]);
+    } else {
+      result.push(right[rightIndex++]);
+    }
+  }
+  
+  return result.concat(left.slice(leftIndex)).concat(right.slice(rightIndex));
+}
+
+// Usage
+const arr = [38, 27, 43, 3, 9, 82, 10];
+console.log("Original:", arr);
+console.log("Sorted:", mergeSort(arr));`,
+
+    python: `# Merge Sort in Python
+def merge_sort(arr):
+    if len(arr) <= 1:
+        return arr
+    
+    mid = len(arr) // 2
+    left = merge_sort(arr[:mid])
+    right = merge_sort(arr[mid:])
+    
+    return merge(left, right)
+
+def merge(left, right):
+    result = []
+    left_idx, right_idx = 0, 0
+    
+    while left_idx < len(left) and right_idx < len(right):
+        if left[left_idx] < right[right_idx]:
+            result.append(left[left_idx])
+            left_idx += 1
+        else:
+            result.append(right[right_idx])
+            right_idx += 1
+    
+    result.extend(left[left_idx:])
+    result.extend(right[right_idx:])
+    return result
+
+# Usage
+arr = [38, 27, 43, 3, 9, 82, 10]
+print("Original:", arr)
+print("Sorted:", merge_sort(arr))`,
+
+    java: `// Merge Sort in Java
+public class MergeSort {
+    public static void mergeSort(int[] arr) {
+        if (arr.length <= 1) return;
+        
+        int mid = arr.length / 2;
+        int[] left = new int[mid];
+        int[] right = new int[arr.length - mid];
+        
+        System.arraycopy(arr, 0, left, 0, mid);
+        System.arraycopy(arr, mid, right, 0, arr.length - mid);
+        
+        mergeSort(left);
+        mergeSort(right);
+        merge(arr, left, right);
+    }
+    
+    private static void merge(int[] arr, int[] left, int[] right) {
+        int i = 0, j = 0, k = 0;
+        
+        while (i < left.length && j < right.length) {
+            if (left[i] < right[j]) {
+                arr[k++] = left[i++];
+            } else {
+                arr[k++] = right[j++];
+            }
+        }
+        
+        while (i < left.length) {
+            arr[k++] = left[i++];
+        }
+        
+        while (j < right.length) {
+            arr[k++] = right[j++];
+        }
+    }
+    
+    public static void main(String[] args) {
+        int[] arr = {38, 27, 43, 3, 9, 82, 10};
+        System.out.print("Original: ");
+        printArray(arr);
+        
+        mergeSort(arr);
+        
+        System.out.print("Sorted: ");
+        printArray(arr);
+    }
+    
+    private static void printArray(int[] arr) {
+        for (int num : arr) {
+            System.out.print(num + " ");
+        }
+        System.out.println();
+    }
+}`,
+
+    c: `// Merge Sort in C
+#include <stdio.h>
+#include <stdlib.h>
+
+void merge(int arr[], int l, int m, int r) {
+    int i, j, k;
+    int n1 = m - l + 1;
+    int n2 = r - m;
+    
+    int L[n1], R[n2];
+    
+    for (i = 0; i < n1; i++)
+        L[i] = arr[l + i];
+    for (j = 0; j < n2; j++)
+        R[j] = arr[m + 1 + j];
+    
+    i = 0; j = 0; k = l;
+    
+    while (i < n1 && j < n2) {
+        if (L[i] <= R[j]) {
+            arr[k] = L[i];
+            i++;
+        } else {
+            arr[k] = R[j];
+            j++;
+        }
+        k++;
+    }
+    
+    while (i < n1) {
+        arr[k] = L[i];
+        i++;
+        k++;
+    }
+    
+    while (j < n2) {
+        arr[k] = R[j];
+        j++;
+        k++;
+    }
+}
+
+void mergeSort(int arr[], int l, int r) {
+    if (l < r) {
+        int m = l + (r - l) / 2;
+        mergeSort(arr, l, m);
+        mergeSort(arr, m + 1, r);
+        merge(arr, l, m, r);
+    }
+}
+
+void printArray(int arr[], int size) {
+    for (int i = 0; i < size; i++)
+        printf("%d ", arr[i]);
+    printf("\\n");
+}
+
+int main() {
+    int arr[] = {38, 27, 43, 3, 9, 82, 10};
+    int size = sizeof(arr) / sizeof(arr[0]);
+    
+    printf("Original: ");
+    printArray(arr, size);
+    
+    mergeSort(arr, 0, size - 1);
+    
+    printf("Sorted: ");
+    printArray(arr, size);
+    
+    return 0;
+}`,
+
+    cpp: `// Merge Sort in C++
+#include <iostream>
+#include <vector>
+using namespace std;
+
+void merge(vector<int>& arr, int l, int m, int r) {
+    int n1 = m - l + 1;
+    int n2 = r - m;
+    
+    vector<int> L(n1), R(n2);
+    
+    for (int i = 0; i < n1; i++)
+        L[i] = arr[l + i];
+    for (int j = 0; j < n2; j++)
+        R[j] = arr[m + 1 + j];
+    
+    int i = 0, j = 0, k = l;
+    
+    while (i < n1 && j < n2) {
+        if (L[i] <= R[j]) {
+            arr[k] = L[i];
+            i++;
+        } else {
+            arr[k] = R[j];
+            j++;
+        }
+        k++;
+    }
+    
+    while (i < n1) {
+        arr[k] = L[i];
+        i++;
+        k++;
+    }
+    
+    while (j < n2) {
+        arr[k] = R[j];
+        j++;
+        k++;
+    }
+}
+
+void mergeSort(vector<int>& arr, int l, int r) {
+    if (l < r) {
+        int m = l + (r - l) / 2;
+        mergeSort(arr, l, m);
+        mergeSort(arr, m + 1, r);
+        merge(arr, l, m, r);
+    }
+}
+
+void printArray(const vector<int>& arr) {
+    for (int num : arr) {
+        cout << num << " ";
+    }
+    cout << endl;
+}
+
+int main() {
+    vector<int> arr = {38, 27, 43, 3, 9, 82, 10};
+    
+    cout << "Original: ";
+    printArray(arr);
+    
+    mergeSort(arr, 0, arr.size() - 1);
+    
+    cout << "Sorted: ";
+    printArray(arr);
+    
+    return 0;
+}`
+  };
+
+export default codeExamples;
diff --git a/app/visualizer/sorting/mergesort/codeBlock.jsx b/app/visualizer/sorting/mergesort/codeBlock.jsx
deleted file mode 100755
index e6b6b34..0000000
--- a/app/visualizer/sorting/mergesort/codeBlock.jsx
+++ /dev/null
@@ -1,422 +0,0 @@
-'use client';
-import { useState, useRef } from 'react';
-import { FaCopy, FaCheck, FaCode } from 'react-icons/fa';
-import { motion, AnimatePresence } from 'framer-motion';
-import hljs from 'highlight.js';
-import 'highlight.js/styles/github.css';
-import 'highlight.js/styles/github-dark.css';
-
-export const highlightCode = (code, language) => {
-  const validLanguage = hljs.getLanguage(language) ? language : 'plaintext';
-  return hljs.highlight(code, { language: validLanguage }).value;
-};
-
-const CodeBlock = () => {
-  const [selectedLanguage, setSelectedLanguage] = useState('javascript');
-  const [copied, setCopied] = useState(false);
-  const [isHovered, setIsHovered] = useState(false);
-  const topRef = useRef(null);
-
-  const languages = [
-    { id: 'javascript', name: 'JavaScript' },
-    { id: 'python', name: 'Python' },
-    { id: 'java', name: 'Java' },
-    { id: 'c', name: 'C' },
-    { id: 'cpp', name: 'C++' }
-  ];
-
-  const copyToClipboard = async (text) => {
-    try {
-      await navigator.clipboard.writeText(text);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    } catch (err) {
-      console.error('Failed to copy text: ', err);
-    }
-  };
-
-  const codeExamples = {
-    javascript: `// Merge Sort in JavaScript
-function mergeSort(arr) {
-  if (arr.length <= 1) return arr;
-  
-  const mid = Math.floor(arr.length / 2);
-  const left = mergeSort(arr.slice(0, mid));
-  const right = mergeSort(arr.slice(mid));
-  
-  return merge(left, right);
-}
-
-function merge(left, right) {
-  let result = [];
-  let leftIndex = 0;
-  let rightIndex = 0;
-  
-  while (leftIndex < left.length && rightIndex < right.length) {
-    if (left[leftIndex] < right[rightIndex]) {
-      result.push(left[leftIndex++]);
-    } else {
-      result.push(right[rightIndex++]);
-    }
-  }
-  
-  return result.concat(left.slice(leftIndex)).concat(right.slice(rightIndex));
-}
-
-// Usage
-const arr = [38, 27, 43, 3, 9, 82, 10];
-console.log("Original:", arr);
-console.log("Sorted:", mergeSort(arr));`,
-
-    python: `# Merge Sort in Python
-def merge_sort(arr):
-    if len(arr) <= 1:
-        return arr
-    
-    mid = len(arr) // 2
-    left = merge_sort(arr[:mid])
-    right = merge_sort(arr[mid:])
-    
-    return merge(left, right)
-
-def merge(left, right):
-    result = []
-    left_idx, right_idx = 0, 0
-    
-    while left_idx < len(left) and right_idx < len(right):
-        if left[left_idx] < right[right_idx]:
-            result.append(left[left_idx])
-            left_idx += 1
-        else:
-            result.append(right[right_idx])
-            right_idx += 1
-    
-    result.extend(left[left_idx:])
-    result.extend(right[right_idx:])
-    return result
-
-# Usage
-arr = [38, 27, 43, 3, 9, 82, 10]
-print("Original:", arr)
-print("Sorted:", merge_sort(arr))`,
-
-    java: `// Merge Sort in Java
-public class MergeSort {
-    public static void mergeSort(int[] arr) {
-        if (arr.length <= 1) return;
-        
-        int mid = arr.length / 2;
-        int[] left = new int[mid];
-        int[] right = new int[arr.length - mid];
-        
-        System.arraycopy(arr, 0, left, 0, mid);
-        System.arraycopy(arr, mid, right, 0, arr.length - mid);
-        
-        mergeSort(left);
-        mergeSort(right);
-        merge(arr, left, right);
-    }
-    
-    private static void merge(int[] arr, int[] left, int[] right) {
-        int i = 0, j = 0, k = 0;
-        
-        while (i < left.length && j < right.length) {
-            if (left[i] < right[j]) {
-                arr[k++] = left[i++];
-            } else {
-                arr[k++] = right[j++];
-            }
-        }
-        
-        while (i < left.length) {
-            arr[k++] = left[i++];
-        }
-        
-        while (j < right.length) {
-            arr[k++] = right[j++];
-        }
-    }
-    
-    public static void main(String[] args) {
-        int[] arr = {38, 27, 43, 3, 9, 82, 10};
-        System.out.print("Original: ");
-        printArray(arr);
-        
-        mergeSort(arr);
-        
-        System.out.print("Sorted: ");
-        printArray(arr);
-    }
-    
-    private static void printArray(int[] arr) {
-        for (int num : arr) {
-            System.out.print(num + " ");
-        }
-        System.out.println();
-    }
-}`,
-
-    c: `// Merge Sort in C
-#include <stdio.h>
-#include <stdlib.h>
-
-void merge(int arr[], int l, int m, int r) {
-    int i, j, k;
-    int n1 = m - l + 1;
-    int n2 = r - m;
-    
-    int L[n1], R[n2];
-    
-    for (i = 0; i < n1; i++)
-        L[i] = arr[l + i];
-    for (j = 0; j < n2; j++)
-        R[j] = arr[m + 1 + j];
-    
-    i = 0; j = 0; k = l;
-    
-    while (i < n1 && j < n2) {
-        if (L[i] <= R[j]) {
-            arr[k] = L[i];
-            i++;
-        } else {
-            arr[k] = R[j];
-            j++;
-        }
-        k++;
-    }
-    
-    while (i < n1) {
-        arr[k] = L[i];
-        i++;
-        k++;
-    }
-    
-    while (j < n2) {
-        arr[k] = R[j];
-        j++;
-        k++;
-    }
-}
-
-void mergeSort(int arr[], int l, int r) {
-    if (l < r) {
-        int m = l + (r - l) / 2;
-        mergeSort(arr, l, m);
-        mergeSort(arr, m + 1, r);
-        merge(arr, l, m, r);
-    }
-}
-
-void printArray(int arr[], int size) {
-    for (int i = 0; i < size; i++)
-        printf("%d ", arr[i]);
-    printf("\\n");
-}
-
-int main() {
-    int arr[] = {38, 27, 43, 3, 9, 82, 10};
-    int size = sizeof(arr) / sizeof(arr[0]);
-    
-    printf("Original: ");
-    printArray(arr, size);
-    
-    mergeSort(arr, 0, size - 1);
-    
-    printf("Sorted: ");
-    printArray(arr, size);
-    
-    return 0;
-}`,
-
-    cpp: `// Merge Sort in C++
-#include <iostream>
-#include <vector>
-using namespace std;
-
-void merge(vector<int>& arr, int l, int m, int r) {
-    int n1 = m - l + 1;
-    int n2 = r - m;
-    
-    vector<int> L(n1), R(n2);
-    
-    for (int i = 0; i < n1; i++)
-        L[i] = arr[l + i];
-    for (int j = 0; j < n2; j++)
-        R[j] = arr[m + 1 + j];
-    
-    int i = 0, j = 0, k = l;
-    
-    while (i < n1 && j < n2) {
-        if (L[i] <= R[j]) {
-            arr[k] = L[i];
-            i++;
-        } else {
-            arr[k] = R[j];
-            j++;
-        }
-        k++;
-    }
-    
-    while (i < n1) {
-        arr[k] = L[i];
-        i++;
-        k++;
-    }
-    
-    while (j < n2) {
-        arr[k] = R[j];
-        j++;
-        k++;
-    }
-}
-
-void mergeSort(vector<int>& arr, int l, int r) {
-    if (l < r) {
-        int m = l + (r - l) / 2;
-        mergeSort(arr, l, m);
-        mergeSort(arr, m + 1, r);
-        merge(arr, l, m, r);
-    }
-}
-
-void printArray(const vector<int>& arr) {
-    for (int num : arr) {
-        cout << num << " ";
-    }
-    cout << endl;
-}
-
-int main() {
-    vector<int> arr = {38, 27, 43, 3, 9, 82, 10};
-    
-    cout << "Original: ";
-    printArray(arr);
-    
-    mergeSort(arr, 0, arr.size() - 1);
-    
-    cout << "Sorted: ";
-    printArray(arr);
-    
-    return 0;
-}`
-  };
-
-  return (
-    <div
-      className="max-w-4xl mx-auto"
-      ref={topRef}
-      onMouseEnter={() => setIsHovered(true)}
-      onMouseLeave={() => setIsHovered(false)}
-    >
-      <motion.div
-        initial={{ opacity: 0, y: 20 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{ duration: 0.3 }}
-        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-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">
-              Merge Sort Implementation
-            </h3>
-          </div>
-
-          <motion.button
-            whileHover={{ scale: 1.05 }}
-            whileTap={{ scale: 0.95 }}
-            onClick={() => copyToClipboard(codeExamples[selectedLanguage])}
-            className="flex items-center gap-2 px-3 py-1.5 bg-gray-100 dark:bg-gray-600 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-500 transition-colors text-gray-800 dark:text-gray-100 text-sm font-medium"
-            aria-label="Copy code"
-          >
-            <AnimatePresence mode="wait">
-              {copied ? (
-                <motion.span
-                  key="check"
-                  initial={{ opacity: 0 }}
-                  animate={{ opacity: 1 }}
-                  exit={{ opacity: 0 }}
-                  className="flex items-center text-green-600 dark:text-green-400"
-                >
-                  <FaCheck className="mr-1" /> Copied
-                </motion.span>
-              ) : (
-                <motion.span
-                  key="copy"
-                  initial={{ opacity: 0 }}
-                  animate={{ opacity: 1 }}
-                  exit={{ opacity: 0 }}
-                  className="flex items-center"
-                >
-                  <FaCopy className="mr-1" /> Copy Code
-                </motion.span>
-              )}
-            </AnimatePresence>
-          </motion.button>
-        </div>
-
-        {/* Language Selector */}
-        <div className="px-4 pt-3 pb-2 flex flex-wrap gap-2 border-b border-gray-200 dark:border-gray-700">
-          {languages.map((lang) => (
-            <motion.button
-              key={lang.id}
-              whileHover={{ scale: 1.03 }}
-              whileTap={{ scale: 0.97 }}
-              onClick={() => setSelectedLanguage(lang.id)}
-              className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-colors ${
-                selectedLanguage === lang.id
-                  ? "bg-blue-500 text-white shadow-md"
-                  : "bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-600"
-              }`}
-            >
-              {lang.name}
-            </motion.button>
-          ))}
-        </div>
-
-        {/* Code Block */}
-        <div className="relative">
-          <AnimatePresence mode="wait">
-            <motion.div
-              key={selectedLanguage}
-              initial={{ opacity: 0 }}
-              animate={{ opacity: 1 }}
-              exit={{ opacity: 0 }}
-              transition={{ duration: 0.2 }}
-              className="overflow-x-auto p-4 bg-gray-900 text-white"
-            >
-              <pre className="text-sm leading-relaxed">
-                <code
-                  className={`language-${selectedLanguage}`}
-                  dangerouslySetInnerHTML={{
-                    __html: highlightCode(
-                      codeExamples[selectedLanguage],
-                      selectedLanguage
-                    ),
-                  }}
-                />
-              </pre>
-            </motion.div>
-          </AnimatePresence>
-
-          {/* Language indicator (shown on hover) */}
-          <AnimatePresence>
-            {isHovered && (
-              <motion.div
-                initial={{ opacity: 0, y: 10 }}
-                animate={{ opacity: 1, y: 0 }}
-                exit={{ opacity: 0, y: 10 }}
-                className="absolute bottom-3 right-3 px-2 py-1 bg-gray-800 text-gray-300 text-xs rounded-md"
-              >
-                {selectedLanguage.toUpperCase()}
-              </motion.div>
-            )}
-          </AnimatePresence>
-        </div>
-      </motion.div>
-    </div>
-  );
-};
-
-export default CodeBlock;
\ No newline at end of file
diff --git a/app/visualizer/sorting/mergesort/page.jsx b/app/visualizer/sorting/mergesort/page.jsx
index 7fd1871..fc8a869 100755
--- a/app/visualizer/sorting/mergesort/page.jsx
+++ b/app/visualizer/sorting/mergesort/page.jsx
@@ -3,7 +3,8 @@ import Navbar from "@/app/components/navbarinner";
 import ModuleHeader from "@/app/components/modules/Header";
 import Content from "@/app/visualizer/sorting/mergesort/content";
 import Quiz from "@/app/visualizer/sorting/mergesort/quiz";
-import Code from "@/app/visualizer/sorting/mergesort/codeBlock";
+import CodeBlock from "@/app/components/modules/CodeBlock";
+import codeExamples from "./code";
 import ExploreOther from "@/app/components/ui/exploreOther";
 import BackToTopButton from "@/app/components/ui/backtotop";
 import Footer from "@/app/components/footer";
@@ -76,7 +77,7 @@ export default function Page() {
         </section>
 
         <section className="px-6">
-          <Code />
+          <CodeBlock title="Merge Sort Implementation" codeExamples={codeExamples} />
         </section>
 
         <section className="px-6 md:px-12 my-12">
diff --git a/app/visualizer/sorting/quicksort/code.js b/app/visualizer/sorting/quicksort/code.js
new file mode 100755
index 0000000..6f1bfef
--- /dev/null
+++ b/app/visualizer/sorting/quicksort/code.js
@@ -0,0 +1,214 @@
+const codeExamples = {
+    javascript: `// Quick Sort in JavaScript
+function quickSort(arr, left = 0, right = arr.length - 1) {
+  if (left < right) {
+    const pivotIndex = partition(arr, left, right);
+    quickSort(arr, left, pivotIndex - 1);
+    quickSort(arr, pivotIndex + 1, right);
+  }
+  return arr;
+}
+
+function partition(arr, left, right) {
+  const pivot = arr[right];
+  let i = left;
+  
+  for (let j = left; j < right; j++) {
+    if (arr[j] < pivot) {
+      [arr[i], arr[j]] = [arr[j], arr[i]];
+      i++;
+    }
+  }
+  
+  [arr[i], arr[right]] = [arr[right], arr[i]];
+  return i;
+}
+
+// Usage
+const arr = [10, 7, 8, 9, 1, 5];
+console.log("Original:", arr);
+console.log("Sorted:", quickSort([...arr]));`,
+
+    python: `# Quick Sort in Python
+def quick_sort(arr, low=0, high=None):
+    if high is None:
+        high = len(arr) - 1
+        
+    if low < high:
+        pivot_index = partition(arr, low, high)
+        quick_sort(arr, low, pivot_index - 1)
+        quick_sort(arr, pivot_index + 1, high)
+    return arr
+
+def partition(arr, low, high):
+    pivot = arr[high]
+    i = low
+    
+    for j in range(low, high):
+        if arr[j] < pivot:
+            arr[i], arr[j] = arr[j], arr[i]
+            i += 1
+    
+    arr[i], arr[high] = arr[high], arr[i]
+    return i
+
+# Usage
+arr = [10, 7, 8, 9, 1, 5]
+print("Original:", arr)
+print("Sorted:", quick_sort(arr.copy()))`,
+
+    java: `// Quick Sort in Java
+public class QuickSort {
+    public static void quickSort(int[] arr, int low, int high) {
+        if (low < high) {
+            int pivotIndex = partition(arr, low, high);
+            quickSort(arr, low, pivotIndex - 1);
+            quickSort(arr, pivotIndex + 1, high);
+        }
+    }
+    
+    private static int partition(int[] arr, int low, int high) {
+        int pivot = arr[high];
+        int i = low;
+        
+        for (int j = low; j < high; j++) {
+            if (arr[j] < pivot) {
+                swap(arr, i, j);
+                i++;
+            }
+        }
+        
+        swap(arr, i, high);
+        return i;
+    }
+    
+    private static void swap(int[] arr, int i, int j) {
+        int temp = arr[i];
+        arr[i] = arr[j];
+        arr[j] = temp;
+    }
+    
+    public static void main(String[] args) {
+        int[] arr = {10, 7, 8, 9, 1, 5};
+        System.out.print("Original: ");
+        printArray(arr);
+        
+        quickSort(arr, 0, arr.length - 1);
+        
+        System.out.print("Sorted: ");
+        printArray(arr);
+    }
+    
+    private static void printArray(int[] arr) {
+        for (int num : arr) {
+            System.out.print(num + " ");
+        }
+        System.out.println();
+    }
+}`,
+
+    c: `// Quick Sort in C
+#include <stdio.h>
+
+void swap(int* a, int* b) {
+    int temp = *a;
+    *a = *b;
+    *b = temp;
+}
+
+int partition(int arr[], int low, int high) {
+    int pivot = arr[high];
+    int i = low;
+    
+    for (int j = low; j < high; j++) {
+        if (arr[j] < pivot) {
+            swap(&arr[i], &arr[j]);
+            i++;
+        }
+    }
+    
+    swap(&arr[i], &arr[high]);
+    return i;
+}
+
+void quickSort(int arr[], int low, int high) {
+    if (low < high) {
+        int pivotIndex = partition(arr, low, high);
+        quickSort(arr, low, pivotIndex - 1);
+        quickSort(arr, pivotIndex + 1, high);
+    }
+}
+
+void printArray(int arr[], int size) {
+    for (int i = 0; i < size; i++) {
+        printf("%d ", arr[i]);
+    }
+    printf("\\n");
+}
+
+int main() {
+    int arr[] = {10, 7, 8, 9, 1, 5};
+    int size = sizeof(arr) / sizeof(arr[0]);
+    
+    printf("Original: ");
+    printArray(arr, size);
+    
+    quickSort(arr, 0, size - 1);
+    
+    printf("Sorted: ");
+    printArray(arr, size);
+    
+    return 0;
+}`,
+
+    cpp: `// Quick Sort in C++
+#include <iostream>
+#include <vector>
+using namespace std;
+
+int partition(vector<int>& arr, int low, int high) {
+    int pivot = arr[high];
+    int i = low;
+    
+    for (int j = low; j < high; j++) {
+        if (arr[j] < pivot) {
+            swap(arr[i], arr[j]);
+            i++;
+        }
+    }
+    
+    swap(arr[i], arr[high]);
+    return i;
+}
+
+void quickSort(vector<int>& arr, int low, int high) {
+    if (low < high) {
+        int pivotIndex = partition(arr, low, high);
+        quickSort(arr, low, pivotIndex - 1);
+        quickSort(arr, pivotIndex + 1, high);
+    }
+}
+
+void printArray(const vector<int>& arr) {
+    for (int num : arr) {
+        cout << num << " ";
+    }
+    cout << endl;
+}
+
+int main() {
+    vector<int> arr = {10, 7, 8, 9, 1, 5};
+    
+    cout << "Original: ";
+    printArray(arr);
+    
+    quickSort(arr, 0, arr.size() - 1);
+    
+    cout << "Sorted: ";
+    printArray(arr);
+    
+    return 0;
+}`,
+  };
+
+export default codeExamples;
diff --git a/app/visualizer/sorting/quicksort/codeBlock.jsx b/app/visualizer/sorting/quicksort/codeBlock.jsx
deleted file mode 100755
index 69c87d0..0000000
--- a/app/visualizer/sorting/quicksort/codeBlock.jsx
+++ /dev/null
@@ -1,369 +0,0 @@
-'use client';
-import { useState, useRef } from 'react';
-import { FaCopy, FaCheck, FaCode } from 'react-icons/fa';
-import { motion, AnimatePresence } from 'framer-motion';
-import hljs from 'highlight.js';
-import 'highlight.js/styles/github.css';
-import 'highlight.js/styles/github-dark.css';
-
-export const highlightCode = (code, language) => {
-  const validLanguage = hljs.getLanguage(language) ? language : 'plaintext';
-  return hljs.highlight(code, { language: validLanguage }).value;
-};
-
-const CodeBlock = () => {
-  const [selectedLanguage, setSelectedLanguage] = useState("javascript");
-  const [copied, setCopied] = useState(false);
-  const [isHovered, setIsHovered] = useState(false);
-  const topRef = useRef(null);
-
-  const languages = [
-    { id: "javascript", name: "JavaScript" },
-    { id: "python", name: "Python" },
-    { id: "java", name: "Java" },
-    { id: "c", name: "C" },
-    { id: "cpp", name: "C++" },
-  ];
-
-  const copyToClipboard = async (text) => {
-    try {
-      await navigator.clipboard.writeText(text);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    } catch (err) {
-      console.error("Failed to copy text: ", err);
-    }
-  };
-
-  const codeExamples = {
-    javascript: `// Quick Sort in JavaScript
-function quickSort(arr, left = 0, right = arr.length - 1) {
-  if (left < right) {
-    const pivotIndex = partition(arr, left, right);
-    quickSort(arr, left, pivotIndex - 1);
-    quickSort(arr, pivotIndex + 1, right);
-  }
-  return arr;
-}
-
-function partition(arr, left, right) {
-  const pivot = arr[right];
-  let i = left;
-  
-  for (let j = left; j < right; j++) {
-    if (arr[j] < pivot) {
-      [arr[i], arr[j]] = [arr[j], arr[i]];
-      i++;
-    }
-  }
-  
-  [arr[i], arr[right]] = [arr[right], arr[i]];
-  return i;
-}
-
-// Usage
-const arr = [10, 7, 8, 9, 1, 5];
-console.log("Original:", arr);
-console.log("Sorted:", quickSort([...arr]));`,
-
-    python: `# Quick Sort in Python
-def quick_sort(arr, low=0, high=None):
-    if high is None:
-        high = len(arr) - 1
-        
-    if low < high:
-        pivot_index = partition(arr, low, high)
-        quick_sort(arr, low, pivot_index - 1)
-        quick_sort(arr, pivot_index + 1, high)
-    return arr
-
-def partition(arr, low, high):
-    pivot = arr[high]
-    i = low
-    
-    for j in range(low, high):
-        if arr[j] < pivot:
-            arr[i], arr[j] = arr[j], arr[i]
-            i += 1
-    
-    arr[i], arr[high] = arr[high], arr[i]
-    return i
-
-# Usage
-arr = [10, 7, 8, 9, 1, 5]
-print("Original:", arr)
-print("Sorted:", quick_sort(arr.copy()))`,
-
-    java: `// Quick Sort in Java
-public class QuickSort {
-    public static void quickSort(int[] arr, int low, int high) {
-        if (low < high) {
-            int pivotIndex = partition(arr, low, high);
-            quickSort(arr, low, pivotIndex - 1);
-            quickSort(arr, pivotIndex + 1, high);
-        }
-    }
-    
-    private static int partition(int[] arr, int low, int high) {
-        int pivot = arr[high];
-        int i = low;
-        
-        for (int j = low; j < high; j++) {
-            if (arr[j] < pivot) {
-                swap(arr, i, j);
-                i++;
-            }
-        }
-        
-        swap(arr, i, high);
-        return i;
-    }
-    
-    private static void swap(int[] arr, int i, int j) {
-        int temp = arr[i];
-        arr[i] = arr[j];
-        arr[j] = temp;
-    }
-    
-    public static void main(String[] args) {
-        int[] arr = {10, 7, 8, 9, 1, 5};
-        System.out.print("Original: ");
-        printArray(arr);
-        
-        quickSort(arr, 0, arr.length - 1);
-        
-        System.out.print("Sorted: ");
-        printArray(arr);
-    }
-    
-    private static void printArray(int[] arr) {
-        for (int num : arr) {
-            System.out.print(num + " ");
-        }
-        System.out.println();
-    }
-}`,
-
-    c: `// Quick Sort in C
-#include <stdio.h>
-
-void swap(int* a, int* b) {
-    int temp = *a;
-    *a = *b;
-    *b = temp;
-}
-
-int partition(int arr[], int low, int high) {
-    int pivot = arr[high];
-    int i = low;
-    
-    for (int j = low; j < high; j++) {
-        if (arr[j] < pivot) {
-            swap(&arr[i], &arr[j]);
-            i++;
-        }
-    }
-    
-    swap(&arr[i], &arr[high]);
-    return i;
-}
-
-void quickSort(int arr[], int low, int high) {
-    if (low < high) {
-        int pivotIndex = partition(arr, low, high);
-        quickSort(arr, low, pivotIndex - 1);
-        quickSort(arr, pivotIndex + 1, high);
-    }
-}
-
-void printArray(int arr[], int size) {
-    for (int i = 0; i < size; i++) {
-        printf("%d ", arr[i]);
-    }
-    printf("\\n");
-}
-
-int main() {
-    int arr[] = {10, 7, 8, 9, 1, 5};
-    int size = sizeof(arr) / sizeof(arr[0]);
-    
-    printf("Original: ");
-    printArray(arr, size);
-    
-    quickSort(arr, 0, size - 1);
-    
-    printf("Sorted: ");
-    printArray(arr, size);
-    
-    return 0;
-}`,
-
-    cpp: `// Quick Sort in C++
-#include <iostream>
-#include <vector>
-using namespace std;
-
-int partition(vector<int>& arr, int low, int high) {
-    int pivot = arr[high];
-    int i = low;
-    
-    for (int j = low; j < high; j++) {
-        if (arr[j] < pivot) {
-            swap(arr[i], arr[j]);
-            i++;
-        }
-    }
-    
-    swap(arr[i], arr[high]);
-    return i;
-}
-
-void quickSort(vector<int>& arr, int low, int high) {
-    if (low < high) {
-        int pivotIndex = partition(arr, low, high);
-        quickSort(arr, low, pivotIndex - 1);
-        quickSort(arr, pivotIndex + 1, high);
-    }
-}
-
-void printArray(const vector<int>& arr) {
-    for (int num : arr) {
-        cout << num << " ";
-    }
-    cout << endl;
-}
-
-int main() {
-    vector<int> arr = {10, 7, 8, 9, 1, 5};
-    
-    cout << "Original: ";
-    printArray(arr);
-    
-    quickSort(arr, 0, arr.size() - 1);
-    
-    cout << "Sorted: ";
-    printArray(arr);
-    
-    return 0;
-}`,
-  };
-
-  return (
-    <div
-      className="max-w-4xl mx-auto"
-      ref={topRef}
-      onMouseEnter={() => setIsHovered(true)}
-      onMouseLeave={() => setIsHovered(false)}
-    >
-      <motion.div
-        initial={{ opacity: 0, y: 20 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{ duration: 0.3 }}
-        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-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">
-              Quick Sort Implementation
-            </h3>
-          </div>
-
-          <motion.button
-            whileHover={{ scale: 1.05 }}
-            whileTap={{ scale: 0.95 }}
-            onClick={() => copyToClipboard(codeExamples[selectedLanguage])}
-            className="flex items-center gap-2 px-3 py-1.5 bg-gray-100 dark:bg-gray-600 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-500 transition-colors text-gray-800 dark:text-gray-100 text-sm font-medium"
-            aria-label="Copy code"
-          >
-            <AnimatePresence mode="wait">
-              {copied ? (
-                <motion.span
-                  key="check"
-                  initial={{ opacity: 0 }}
-                  animate={{ opacity: 1 }}
-                  exit={{ opacity: 0 }}
-                  className="flex items-center text-green-600 dark:text-green-400"
-                >
-                  <FaCheck className="mr-1" /> Copied
-                </motion.span>
-              ) : (
-                <motion.span
-                  key="copy"
-                  initial={{ opacity: 0 }}
-                  animate={{ opacity: 1 }}
-                  exit={{ opacity: 0 }}
-                  className="flex items-center"
-                >
-                  <FaCopy className="mr-1" /> Copy Code
-                </motion.span>
-              )}
-            </AnimatePresence>
-          </motion.button>
-        </div>
-
-        {/* Language Selector */}
-        <div className="px-4 pt-3 pb-2 flex flex-wrap gap-2 border-b border-gray-200 dark:border-gray-700">
-          {languages.map((lang) => (
-            <motion.button
-              key={lang.id}
-              whileHover={{ scale: 1.03 }}
-              whileTap={{ scale: 0.97 }}
-              onClick={() => setSelectedLanguage(lang.id)}
-              className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-colors ${
-                selectedLanguage === lang.id
-                  ? "bg-blue-500 text-white shadow-md"
-                  : "bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-600"
-              }`}
-            >
-              {lang.name}
-            </motion.button>
-          ))}
-        </div>
-
-        {/* Code Block */}
-        <div className="relative">
-          <AnimatePresence mode="wait">
-            <motion.div
-              key={selectedLanguage}
-              initial={{ opacity: 0 }}
-              animate={{ opacity: 1 }}
-              exit={{ opacity: 0 }}
-              transition={{ duration: 0.2 }}
-              className="overflow-x-auto p-4 bg-gray-900 text-white"
-            >
-              <pre className="text-sm leading-relaxed">
-                <code
-                  className={`language-${selectedLanguage}`}
-                  dangerouslySetInnerHTML={{
-                    __html: highlightCode(
-                      codeExamples[selectedLanguage],
-                      selectedLanguage
-                    ),
-                  }}
-                />
-              </pre>
-            </motion.div>
-          </AnimatePresence>
-
-          {/* Language indicator (shown on hover) */}
-          <AnimatePresence>
-            {isHovered && (
-              <motion.div
-                initial={{ opacity: 0, y: 10 }}
-                animate={{ opacity: 1, y: 0 }}
-                exit={{ opacity: 0, y: 10 }}
-                className="absolute bottom-3 right-3 px-2 py-1 bg-gray-800 text-gray-300 text-xs rounded-md"
-              >
-                {selectedLanguage.toUpperCase()}
-              </motion.div>
-            )}
-          </AnimatePresence>
-        </div>
-      </motion.div>
-    </div>
-  );
-};
-
-export default CodeBlock;
\ No newline at end of file
diff --git a/app/visualizer/sorting/quicksort/page.jsx b/app/visualizer/sorting/quicksort/page.jsx
index fa75cf6..c18e5e7 100755
--- a/app/visualizer/sorting/quicksort/page.jsx
+++ b/app/visualizer/sorting/quicksort/page.jsx
@@ -3,7 +3,8 @@ import Navbar from "@/app/components/navbarinner";
 import ModuleHeader from "@/app/components/modules/Header";
 import Content from "@/app/visualizer/sorting/quicksort/content";
 import Quiz from "@/app/visualizer/sorting/quicksort/quiz";
-import Code from "@/app/visualizer/sorting/quicksort/codeBlock";
+import CodeBlock from "@/app/components/modules/CodeBlock";
+import codeExamples from "./code";
 import ExploreOther from "@/app/components/ui/exploreOther";
 import BackToTopButton from "@/app/components/ui/backtotop";
 import Footer from "@/app/components/footer";
@@ -77,7 +78,7 @@ export default function Page() {
         </section>
 
         <section className="px-6">
-          <Code />
+          <CodeBlock title="Quick Sort Implementation" codeExamples={codeExamples} />
         </section>
 
         <section className="px-6 md:px-12 my-12">
diff --git a/app/visualizer/sorting/selectionsort/code.js b/app/visualizer/sorting/selectionsort/code.js
new file mode 100755
index 0000000..8fc2f71
--- /dev/null
+++ b/app/visualizer/sorting/selectionsort/code.js
@@ -0,0 +1,172 @@
+const codeExamples = {
+    javascript: `// Selection Sort in JavaScript
+function selectionSort(arr) {
+  const n = arr.length;
+  
+  for (let i = 0; i < n - 1; i++) {
+    // Find the minimum element in unsorted array
+    let minIdx = i;
+    for (let j = i + 1; j < n; j++) {
+      if (arr[j] < arr[minIdx]) {
+        minIdx = j;
+      }
+    }
+    
+    // Swap the found minimum with the first element
+    [arr[i], arr[minIdx]] = [arr[minIdx], arr[i]];
+  }
+  return arr;
+}
+
+// Usage
+const arr = [64, 25, 12, 22, 11];
+console.log("Original:", arr);
+console.log("Sorted:", selectionSort([...arr]));`,
+
+    python: `# Selection Sort in Python
+def selection_sort(arr):
+    n = len(arr)
+    
+    for i in range(n - 1):
+        # Find the minimum element in unsorted array
+        min_idx = i
+        for j in range(i + 1, n):
+            if arr[j] < arr[min_idx]:
+                min_idx = j
+                
+        # Swap the found minimum with the first element
+        arr[i], arr[min_idx] = arr[min_idx], arr[i]
+    return arr
+
+# Usage
+arr = [64, 25, 12, 22, 11]
+print("Original:", arr)
+print("Sorted:", selection_sort(arr.copy()))`,
+
+    java: `// Selection Sort in Java
+public class SelectionSort {
+    public static void selectionSort(int[] arr) {
+        int n = arr.length;
+        
+        for (int i = 0; i < n - 1; i++) {
+            // Find the minimum element in unsorted array
+            int minIdx = i;
+            for (int j = i + 1; j < n; j++) {
+                if (arr[j] < arr[minIdx]) {
+                    minIdx = j;
+                }
+            }
+            
+            // Swap the found minimum with the first element
+            int temp = arr[minIdx];
+            arr[minIdx] = arr[i];
+            arr[i] = temp;
+        }
+    }
+    
+    public static void main(String[] args) {
+        int[] arr = {64, 25, 12, 22, 11};
+        System.out.print("Original: ");
+        printArray(arr);
+        
+        selectionSort(arr);
+        
+        System.out.print("Sorted: ");
+        printArray(arr);
+    }
+    
+    private static void printArray(int[] arr) {
+        for (int num : arr) {
+            System.out.print(num + " ");
+        }
+        System.out.println();
+    }
+}`,
+
+    c: `// Selection Sort in C
+#include <stdio.h>
+
+void selectionSort(int arr[], int n) {
+    for (int i = 0; i < n - 1; i++) {
+        // Find the minimum element in unsorted array
+        int minIdx = i;
+        for (int j = i + 1; j < n; j++) {
+            if (arr[j] < arr[minIdx]) {
+                minIdx = j;
+            }
+        }
+        
+        // Swap the found minimum with the first element
+        int temp = arr[minIdx];
+        arr[minIdx] = arr[i];
+        arr[i] = temp;
+    }
+}
+
+void printArray(int arr[], int size) {
+    for (int i = 0; i < size; i++) {
+        printf("%d ", arr[i]);
+    }
+    printf("\\n");
+}
+
+int main() {
+    int arr[] = {64, 25, 12, 22, 11};
+    int n = sizeof(arr) / sizeof(arr[0]);
+    
+    printf("Original: ");
+    printArray(arr, n);
+    
+    selectionSort(arr, n);
+    
+    printf("Sorted: ");
+    printArray(arr, n);
+    
+    return 0;
+}`,
+
+    cpp: `// Selection Sort in C++
+#include <iostream>
+#include <vector>
+using namespace std;
+
+void selectionSort(vector<int>& arr) {
+    int n = arr.size();
+    
+    for (int i = 0; i < n - 1; i++) {
+        // Find the minimum element in unsorted array
+        int minIdx = i;
+        for (int j = i + 1; j < n; j++) {
+            if (arr[j] < arr[minIdx]) {
+                minIdx = j;
+            }
+        }
+        
+        // Swap the found minimum with the first element
+        swap(arr[i], arr[minIdx]);
+    }
+}
+
+void printArray(const vector<int>& arr) {
+    for (int num : arr) {
+        cout << num << " ";
+    }
+    cout << endl;
+}
+
+int main() {
+    vector<int> arr = {64, 25, 12, 22, 11};
+    
+    cout << "Original: ";
+    printArray(arr);
+    
+    selectionSort(arr);
+    
+    cout << "Sorted: ";
+    printArray(arr);
+    
+    return 0;
+}`
+  };
+
+export default codeExamples;
diff --git a/app/visualizer/sorting/selectionsort/codeBlock.jsx b/app/visualizer/sorting/selectionsort/codeBlock.jsx
deleted file mode 100755
index f39d088..0000000
--- a/app/visualizer/sorting/selectionsort/codeBlock.jsx
+++ /dev/null
@@ -1,327 +0,0 @@
-'use client';
-import { useState, useRef } from 'react';
-import { FaCopy, FaCheck, FaCode } from 'react-icons/fa';
-import { motion, AnimatePresence } from 'framer-motion';
-import hljs from 'highlight.js';
-import 'highlight.js/styles/github.css';
-import 'highlight.js/styles/github-dark.css';
-
-export const highlightCode = (code, language) => {
-  const validLanguage = hljs.getLanguage(language) ? language : 'plaintext';
-  return hljs.highlight(code, { language: validLanguage }).value;
-};
-
-const CodeBlock = () => {
-  const [selectedLanguage, setSelectedLanguage] = useState("javascript");
-  const [copied, setCopied] = useState(false);
-  const [isHovered, setIsHovered] = useState(false);
-  const topRef = useRef(null);
-
-  const languages = [
-    { id: "javascript", name: "JavaScript" },
-    { id: "python", name: "Python" },
-    { id: "java", name: "Java" },
-    { id: "c", name: "C" },
-    { id: "cpp", name: "C++" },
-  ];
-
-  const copyToClipboard = async (text) => {
-    try {
-      await navigator.clipboard.writeText(text);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    } catch (err) {
-      console.error("Failed to copy text: ", err);
-    }
-  };
-
-  const codeExamples = {
-    javascript: `// Selection Sort in JavaScript
-function selectionSort(arr) {
-  const n = arr.length;
-  
-  for (let i = 0; i < n - 1; i++) {
-    // Find the minimum element in unsorted array
-    let minIdx = i;
-    for (let j = i + 1; j < n; j++) {
-      if (arr[j] < arr[minIdx]) {
-        minIdx = j;
-      }
-    }
-    
-    // Swap the found minimum with the first element
-    [arr[i], arr[minIdx]] = [arr[minIdx], arr[i]];
-  }
-  return arr;
-}
-
-// Usage
-const arr = [64, 25, 12, 22, 11];
-console.log("Original:", arr);
-console.log("Sorted:", selectionSort([...arr]));`,
-
-    python: `# Selection Sort in Python
-def selection_sort(arr):
-    n = len(arr)
-    
-    for i in range(n - 1):
-        # Find the minimum element in unsorted array
-        min_idx = i
-        for j in range(i + 1, n):
-            if arr[j] < arr[min_idx]:
-                min_idx = j
-                
-        # Swap the found minimum with the first element
-        arr[i], arr[min_idx] = arr[min_idx], arr[i]
-    return arr
-
-# Usage
-arr = [64, 25, 12, 22, 11]
-print("Original:", arr)
-print("Sorted:", selection_sort(arr.copy()))`,
-
-    java: `// Selection Sort in Java
-public class SelectionSort {
-    public static void selectionSort(int[] arr) {
-        int n = arr.length;
-        
-        for (int i = 0; i < n - 1; i++) {
-            // Find the minimum element in unsorted array
-            int minIdx = i;
-            for (int j = i + 1; j < n; j++) {
-                if (arr[j] < arr[minIdx]) {
-                    minIdx = j;
-                }
-            }
-            
-            // Swap the found minimum with the first element
-            int temp = arr[minIdx];
-            arr[minIdx] = arr[i];
-            arr[i] = temp;
-        }
-    }
-    
-    public static void main(String[] args) {
-        int[] arr = {64, 25, 12, 22, 11};
-        System.out.print("Original: ");
-        printArray(arr);
-        
-        selectionSort(arr);
-        
-        System.out.print("Sorted: ");
-        printArray(arr);
-    }
-    
-    private static void printArray(int[] arr) {
-        for (int num : arr) {
-            System.out.print(num + " ");
-        }
-        System.out.println();
-    }
-}`,
-
-    c: `// Selection Sort in C
-#include <stdio.h>
-
-void selectionSort(int arr[], int n) {
-    for (int i = 0; i < n - 1; i++) {
-        // Find the minimum element in unsorted array
-        int minIdx = i;
-        for (int j = i + 1; j < n; j++) {
-            if (arr[j] < arr[minIdx]) {
-                minIdx = j;
-            }
-        }
-        
-        // Swap the found minimum with the first element
-        int temp = arr[minIdx];
-        arr[minIdx] = arr[i];
-        arr[i] = temp;
-    }
-}
-
-void printArray(int arr[], int size) {
-    for (int i = 0; i < size; i++) {
-        printf("%d ", arr[i]);
-    }
-    printf("\\n");
-}
-
-int main() {
-    int arr[] = {64, 25, 12, 22, 11};
-    int n = sizeof(arr) / sizeof(arr[0]);
-    
-    printf("Original: ");
-    printArray(arr, n);
-    
-    selectionSort(arr, n);
-    
-    printf("Sorted: ");
-    printArray(arr, n);
-    
-    return 0;
-}`,
-
-    cpp: `// Selection Sort in C++
-#include <iostream>
-#include <vector>
-using namespace std;
-
-void selectionSort(vector<int>& arr) {
-    int n = arr.size();
-    
-    for (int i = 0; i < n - 1; i++) {
-        // Find the minimum element in unsorted array
-        int minIdx = i;
-        for (int j = i + 1; j < n; j++) {
-            if (arr[j] < arr[minIdx]) {
-                minIdx = j;
-            }
-        }
-        
-        // Swap the found minimum with the first element
-        swap(arr[i], arr[minIdx]);
-    }
-}
-
-void printArray(const vector<int>& arr) {
-    for (int num : arr) {
-        cout << num << " ";
-    }
-    cout << endl;
-}
-
-int main() {
-    vector<int> arr = {64, 25, 12, 22, 11};
-    
-    cout << "Original: ";
-    printArray(arr);
-    
-    selectionSort(arr);
-    
-    cout << "Sorted: ";
-    printArray(arr);
-    
-    return 0;
-}`
-  };
-
-  return (
-      <div
-        className="max-w-4xl mx-auto"
-        ref={topRef}
-        onMouseEnter={() => setIsHovered(true)}
-        onMouseLeave={() => setIsHovered(false)}
-      >
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.3 }}
-          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-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">
-                Selection Sort Implementation
-              </h3>
-            </div>
-  
-            <motion.button
-              whileHover={{ scale: 1.05 }}
-              whileTap={{ scale: 0.95 }}
-              onClick={() => copyToClipboard(codeExamples[selectedLanguage])}
-              className="flex items-center gap-2 px-3 py-1.5 bg-gray-100 dark:bg-gray-600 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-500 transition-colors text-gray-800 dark:text-gray-100 text-sm font-medium"
-              aria-label="Copy code"
-            >
-              <AnimatePresence mode="wait">
-                {copied ? (
-                  <motion.span
-                    key="check"
-                    initial={{ opacity: 0 }}
-                    animate={{ opacity: 1 }}
-                    exit={{ opacity: 0 }}
-                    className="flex items-center text-green-600 dark:text-green-400"
-                  >
-                    <FaCheck className="mr-1" /> Copied
-                  </motion.span>
-                ) : (
-                  <motion.span
-                    key="copy"
-                    initial={{ opacity: 0 }}
-                    animate={{ opacity: 1 }}
-                    exit={{ opacity: 0 }}
-                    className="flex items-center"
-                  >
-                    <FaCopy className="mr-1" /> Copy Code
-                  </motion.span>
-                )}
-              </AnimatePresence>
-            </motion.button>
-          </div>
-  
-          {/* Language Selector */}
-          <div className="px-4 pt-3 pb-2 flex flex-wrap gap-2 border-b border-gray-200 dark:border-gray-700">
-            {languages.map((lang) => (
-              <motion.button
-                key={lang.id}
-                whileHover={{ scale: 1.03 }}
-                whileTap={{ scale: 0.97 }}
-                onClick={() => setSelectedLanguage(lang.id)}
-                className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-colors ${
-                  selectedLanguage === lang.id
-                    ? "bg-blue-500 text-white shadow-md"
-                    : "bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-600"
-                }`}
-              >
-                {lang.name}
-              </motion.button>
-            ))}
-          </div>
-  
-          {/* Code Block */}
-          <div className="relative">
-            <AnimatePresence mode="wait">
-              <motion.div
-                key={selectedLanguage}
-                initial={{ opacity: 0 }}
-                animate={{ opacity: 1 }}
-                exit={{ opacity: 0 }}
-                transition={{ duration: 0.2 }}
-                className="overflow-x-auto p-4 bg-gray-900 text-white"
-              >
-                <pre className="text-sm leading-relaxed">
-                  <code
-                    className={`language-${selectedLanguage}`}
-                    dangerouslySetInnerHTML={{
-                      __html: highlightCode(
-                        codeExamples[selectedLanguage],
-                        selectedLanguage
-                      ),
-                    }}
-                  />
-                </pre>
-              </motion.div>
-            </AnimatePresence>
-  
-            {/* Language indicator (shown on hover) */}
-            <AnimatePresence>
-              {isHovered && (
-                <motion.div
-                  initial={{ opacity: 0, y: 10 }}
-                  animate={{ opacity: 1, y: 0 }}
-                  exit={{ opacity: 0, y: 10 }}
-                  className="absolute bottom-3 right-3 px-2 py-1 bg-gray-800 text-gray-300 text-xs rounded-md"
-                >
-                  {selectedLanguage.toUpperCase()}
-                </motion.div>
-              )}
-            </AnimatePresence>
-          </div>
-        </motion.div>
-      </div>
-    );
-  };
-  
-  export default CodeBlock;
\ No newline at end of file
diff --git a/app/visualizer/sorting/selectionsort/page.jsx b/app/visualizer/sorting/selectionsort/page.jsx
index cd6a310..0414375 100755
--- a/app/visualizer/sorting/selectionsort/page.jsx
+++ b/app/visualizer/sorting/selectionsort/page.jsx
@@ -5,7 +5,8 @@ import BackToTopButton from "@/app/components/ui/backtotop";
 import Footer from "@/app/components/footer";
 import Content from '@/app/visualizer/sorting/selectionsort/content';
 import ExploreOther from "@/app/components/ui/exploreOther";
-import Code from "@/app/visualizer/sorting/selectionsort/codeBlock";
+import CodeBlock from "@/app/components/modules/CodeBlock";
+import codeExamples from "./code";
 import Quiz from "@/app/visualizer/sorting/selectionsort/quiz";
 import ModuleCard from "@/app/components/ui/ModuleCard";
 import { MODULE_MAPS } from "@/lib/modulesMap";
@@ -74,7 +75,7 @@ export default function Page() {
         </section>
 
         <section className="px-6">
-          <Code />
+          <CodeBlock title="Selection Sort Implementation" codeExamples={codeExamples} />
         </section>
 
         <section className="px-6 md:px-12 my-12">
diff --git a/app/visualizer/stack/implementation/usingArray/codeBlock.jsx b/app/visualizer/stack/implementation/usingArray/code.js
similarity index 57%
rename from app/visualizer/stack/implementation/usingArray/codeBlock.jsx
rename to app/visualizer/stack/implementation/usingArray/code.js
index 27f1e5d..bc2acce 100755
--- a/app/visualizer/stack/implementation/usingArray/codeBlock.jsx
+++ b/app/visualizer/stack/implementation/usingArray/code.js
@@ -1,41 +1,4 @@
-'use client';
-import { useState, useRef } from 'react';
-import { FaCopy, FaCheck, FaCode } from 'react-icons/fa';
-import { motion, AnimatePresence } from 'framer-motion';
-import hljs from 'highlight.js';
-import 'highlight.js/styles/github.css';
-import 'highlight.js/styles/github-dark.css';
-
-export const highlightCode = (code, language) => {
-  const validLanguage = hljs.getLanguage(language) ? language : 'plaintext';
-  return hljs.highlight(code, { language: validLanguage }).value;
-};
-
-const CodeBlock = () => {
-  const [selectedLanguage, setSelectedLanguage] = useState("javascript");
-  const [copied, setCopied] = useState(false);
-  const [isHovered, setIsHovered] = useState(false);
-  const topRef = useRef(null);
-
-  const languages = [
-    { id: "javascript", name: "JavaScript" },
-    { id: "python", name: "Python" },
-    { id: "java", name: "Java" },
-    { id: "c", name: "C" },
-    { id: "cpp", name: "C++" },
-  ];
-
-  const copyToClipboard = async (text) => {
-    try {
-      await navigator.clipboard.writeText(text);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    } catch (err) {
-      console.error("Failed to copy text: ", err);
-    }
-  };
-
-  const codeExamples = {
+const codeExamples = {
     javascript: `// Stack Implementation using Array (JavaScript)
 class Stack {
   constructor(size = 10) {
@@ -409,122 +372,4 @@ int main() {
 }`,
   };
 
-  return (
-    <div
-      className="max-w-4xl mx-auto"
-      ref={topRef}
-      onMouseEnter={() => setIsHovered(true)}
-      onMouseLeave={() => setIsHovered(false)}
-    >
-      <motion.div
-        initial={{ opacity: 0, y: 20 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{ duration: 0.3 }}
-        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-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">
-              Stack Implementation using Array
-            </h3>
-          </div>
-
-          <motion.button
-            whileHover={{ scale: 1.05 }}
-            whileTap={{ scale: 0.95 }}
-            onClick={() => copyToClipboard(codeExamples[selectedLanguage])}
-            className="flex items-center gap-2 px-3 py-1.5 bg-gray-100 dark:bg-gray-600 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-500 transition-colors text-gray-800 dark:text-gray-100 text-sm font-medium"
-            aria-label="Copy code"
-          >
-            <AnimatePresence mode="wait">
-              {copied ? (
-                <motion.span
-                  key="check"
-                  initial={{ opacity: 0 }}
-                  animate={{ opacity: 1 }}
-                  exit={{ opacity: 0 }}
-                  className="flex items-center text-green-600 dark:text-green-400"
-                >
-                  <FaCheck className="mr-1" /> Copied
-                </motion.span>
-              ) : (
-                <motion.span
-                  key="copy"
-                  initial={{ opacity: 0 }}
-                  animate={{ opacity: 1 }}
-                  exit={{ opacity: 0 }}
-                  className="flex items-center"
-                >
-                  <FaCopy className="mr-1" /> Copy Code
-                </motion.span>
-              )}
-            </AnimatePresence>
-          </motion.button>
-        </div>
-
-        {/* Language Selector */}
-        <div className="px-4 pt-3 pb-2 flex flex-wrap gap-2 border-b border-gray-200 dark:border-gray-700">
-          {languages.map((lang) => (
-            <motion.button
-              key={lang.id}
-              whileHover={{ scale: 1.03 }}
-              whileTap={{ scale: 0.97 }}
-              onClick={() => setSelectedLanguage(lang.id)}
-              className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-colors ${
-                selectedLanguage === lang.id
-                  ? "bg-blue-500 text-white shadow-md"
-                  : "bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-600"
-              }`}
-            >
-              {lang.name}
-            </motion.button>
-          ))}
-        </div>
-
-        {/* Code Block */}
-        <div className="relative">
-          <AnimatePresence mode="wait">
-            <motion.div
-              key={selectedLanguage}
-              initial={{ opacity: 0 }}
-              animate={{ opacity: 1 }}
-              exit={{ opacity: 0 }}
-              transition={{ duration: 0.2 }}
-              className="overflow-x-auto p-4 bg-gray-900 text-white"
-            >
-              <pre className="text-sm leading-relaxed">
-                <code
-                  className={`language-${selectedLanguage}`}
-                  dangerouslySetInnerHTML={{
-                    __html: highlightCode(
-                      codeExamples[selectedLanguage],
-                      selectedLanguage
-                    ),
-                  }}
-                />
-              </pre>
-            </motion.div>
-          </AnimatePresence>
-
-          {/* Language indicator (shown on hover) */}
-          <AnimatePresence>
-            {isHovered && (
-              <motion.div
-                initial={{ opacity: 0, y: 10 }}
-                animate={{ opacity: 1, y: 0 }}
-                exit={{ opacity: 0, y: 10 }}
-                className="absolute bottom-3 right-3 px-2 py-1 bg-gray-800 text-gray-300 text-xs rounded-md"
-              >
-                {selectedLanguage.toUpperCase()}
-              </motion.div>
-            )}
-          </AnimatePresence>
-        </div>
-      </motion.div>
-    </div>
-  );
-};
-
-export default CodeBlock;
\ No newline at end of file
+export default codeExamples;
diff --git a/app/visualizer/stack/implementation/usingArray/page.jsx b/app/visualizer/stack/implementation/usingArray/page.jsx
index f73d349..6211778 100755
--- a/app/visualizer/stack/implementation/usingArray/page.jsx
+++ b/app/visualizer/stack/implementation/usingArray/page.jsx
@@ -1,7 +1,8 @@
 import Navbar from "@/app/components/navbarinner";
 import ModuleHeader from "@/app/components/modules/Header";
 import Content from "@/app/visualizer/stack/implementation/usingArray/content";
-import Code from "@/app/visualizer/stack/implementation/usingArray/codeBlock";
+import CodeBlock from "@/app/components/modules/CodeBlock";
+import codeExamples from "./code";
 import ModuleCard from "@/app/components/ui/ModuleCard";
 import { MODULE_MAPS } from "@/lib/modulesMap";
 import Footer from "@/app/components/footer";
@@ -60,7 +61,7 @@ export default function Page() {
         </section>
 
         <section className="px-6">
-          <Code />
+          <CodeBlock title="Stack Implementation using Array" codeExamples={codeExamples} />
         </section>
 
         <section className="px-6 md:px-12 my-12">
diff --git a/app/visualizer/stack/implementation/usingLinkedList/codeBlock.jsx b/app/visualizer/stack/implementation/usingLinkedList/code.js
similarity index 58%
rename from app/visualizer/stack/implementation/usingLinkedList/codeBlock.jsx
rename to app/visualizer/stack/implementation/usingLinkedList/code.js
index 2f095c2..5124c7e 100755
--- a/app/visualizer/stack/implementation/usingLinkedList/codeBlock.jsx
+++ b/app/visualizer/stack/implementation/usingLinkedList/code.js
@@ -1,41 +1,4 @@
-'use client';
-import { useState, useRef } from 'react';
-import { FaCopy, FaCheck, FaCode } from 'react-icons/fa';
-import { motion, AnimatePresence } from 'framer-motion';
-import hljs from 'highlight.js';
-import 'highlight.js/styles/github.css';
-import 'highlight.js/styles/github-dark.css';
-
-export const highlightCode = (code, language) => {
-  const validLanguage = hljs.getLanguage(language) ? language : 'plaintext';
-  return hljs.highlight(code, { language: validLanguage }).value;
-};
-
-const CodeBlock = () => {
-  const [selectedLanguage, setSelectedLanguage] = useState("javascript");
-  const [copied, setCopied] = useState(false);
-  const [isHovered, setIsHovered] = useState(false);
-  const topRef = useRef(null);
-
-  const languages = [
-    { id: "javascript", name: "JavaScript" },
-    { id: "python", name: "Python" },
-    { id: "java", name: "Java" },
-    { id: "c", name: "C" },
-    { id: "cpp", name: "C++" },
-  ];
-
-  const copyToClipboard = async (text) => {
-    try {
-      await navigator.clipboard.writeText(text);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    } catch (err) {
-      console.error("Failed to copy text: ", err);
-    }
-  };
-
-  const codeExamples = {
+const codeExamples = {
     javascript: `// Stack Implementation using Linked List (JavaScript)
 class Node {
   constructor(value) {
@@ -441,122 +404,4 @@ int main() {
 }`
   };
 
-  return (
-      <div
-        className="max-w-4xl mx-auto"
-        ref={topRef}
-        onMouseEnter={() => setIsHovered(true)}
-        onMouseLeave={() => setIsHovered(false)}
-      >
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.3 }}
-          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-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">
-                Stack Implementation using Linked-List
-              </h3>
-            </div>
-  
-            <motion.button
-              whileHover={{ scale: 1.05 }}
-              whileTap={{ scale: 0.95 }}
-              onClick={() => copyToClipboard(codeExamples[selectedLanguage])}
-              className="flex items-center gap-2 px-3 py-1.5 bg-gray-100 dark:bg-gray-600 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-500 transition-colors text-gray-800 dark:text-gray-100 text-sm font-medium"
-              aria-label="Copy code"
-            >
-              <AnimatePresence mode="wait">
-                {copied ? (
-                  <motion.span
-                    key="check"
-                    initial={{ opacity: 0 }}
-                    animate={{ opacity: 1 }}
-                    exit={{ opacity: 0 }}
-                    className="flex items-center text-green-600 dark:text-green-400"
-                  >
-                    <FaCheck className="mr-1" /> Copied
-                  </motion.span>
-                ) : (
-                  <motion.span
-                    key="copy"
-                    initial={{ opacity: 0 }}
-                    animate={{ opacity: 1 }}
-                    exit={{ opacity: 0 }}
-                    className="flex items-center"
-                  >
-                    <FaCopy className="mr-1" /> Copy Code
-                  </motion.span>
-                )}
-              </AnimatePresence>
-            </motion.button>
-          </div>
-  
-          {/* Language Selector */}
-          <div className="px-4 pt-3 pb-2 flex flex-wrap gap-2 border-b border-gray-200 dark:border-gray-700">
-            {languages.map((lang) => (
-              <motion.button
-                key={lang.id}
-                whileHover={{ scale: 1.03 }}
-                whileTap={{ scale: 0.97 }}
-                onClick={() => setSelectedLanguage(lang.id)}
-                className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-colors ${
-                  selectedLanguage === lang.id
-                    ? "bg-blue-500 text-white shadow-md"
-                    : "bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-600"
-                }`}
-              >
-                {lang.name}
-              </motion.button>
-            ))}
-          </div>
-  
-          {/* Code Block */}
-          <div className="relative">
-            <AnimatePresence mode="wait">
-              <motion.div
-                key={selectedLanguage}
-                initial={{ opacity: 0 }}
-                animate={{ opacity: 1 }}
-                exit={{ opacity: 0 }}
-                transition={{ duration: 0.2 }}
-                className="overflow-x-auto p-4 bg-gray-900 text-white"
-              >
-                <pre className="text-sm leading-relaxed">
-                  <code
-                    className={`language-${selectedLanguage}`}
-                    dangerouslySetInnerHTML={{
-                      __html: highlightCode(
-                        codeExamples[selectedLanguage],
-                        selectedLanguage
-                      ),
-                    }}
-                  />
-                </pre>
-              </motion.div>
-            </AnimatePresence>
-  
-            {/* Language indicator (shown on hover) */}
-            <AnimatePresence>
-              {isHovered && (
-                <motion.div
-                  initial={{ opacity: 0, y: 10 }}
-                  animate={{ opacity: 1, y: 0 }}
-                  exit={{ opacity: 0, y: 10 }}
-                  className="absolute bottom-3 right-3 px-2 py-1 bg-gray-800 text-gray-300 text-xs rounded-md"
-                >
-                  {selectedLanguage.toUpperCase()}
-                </motion.div>
-              )}
-            </AnimatePresence>
-          </div>
-        </motion.div>
-      </div>
-    );
-  };
-  
-  export default CodeBlock;
\ No newline at end of file
+export default codeExamples;
diff --git a/app/visualizer/stack/implementation/usingLinkedList/page.jsx b/app/visualizer/stack/implementation/usingLinkedList/page.jsx
index 3bc4ac8..f2d635f 100755
--- a/app/visualizer/stack/implementation/usingLinkedList/page.jsx
+++ b/app/visualizer/stack/implementation/usingLinkedList/page.jsx
@@ -1,7 +1,8 @@
 import Navbar from "@/app/components/navbarinner";
 import ModuleHeader from "@/app/components/modules/Header";
 import Content from "@/app/visualizer/stack/implementation/usingLinkedList/content";
-import Code from "@/app/visualizer/stack/implementation/usingLinkedList/codeBlock";
+import CodeBlock from "@/app/components/modules/CodeBlock";
+import codeExamples from "./code";
 import ModuleCard from "@/app/components/ui/ModuleCard";
 import { MODULE_MAPS } from "@/lib/modulesMap";
 import Footer from "@/app/components/footer";
@@ -60,7 +61,7 @@ export default function Page() {
         </section>
 
         <section className="px-6">
-          <Code />
+          <CodeBlock title="Stack Implementation using Linked-List" codeExamples={codeExamples} />
         </section>
 
         <section className="px-6 md:px-12 my-12">
diff --git a/app/visualizer/stack/isempty/codeBlock.jsx b/app/visualizer/stack/isempty/code.js
similarity index 51%
rename from app/visualizer/stack/isempty/codeBlock.jsx
rename to app/visualizer/stack/isempty/code.js
index 3d0df8f..ad12fb4 100755
--- a/app/visualizer/stack/isempty/codeBlock.jsx
+++ b/app/visualizer/stack/isempty/code.js
@@ -1,41 +1,4 @@
-'use client';
-import { useState, useRef } from 'react';
-import { FaCopy, FaCheck, FaCode } from 'react-icons/fa';
-import { motion, AnimatePresence } from 'framer-motion';
-import hljs from 'highlight.js';
-import 'highlight.js/styles/github.css';
-import 'highlight.js/styles/github-dark.css';
-
-export const highlightCode = (code, language) => {
-  const validLanguage = hljs.getLanguage(language) ? language : 'plaintext';
-  return hljs.highlight(code, { language: validLanguage }).value;
-};
-
-const CodeBlock = () => {
-  const [selectedLanguage, setSelectedLanguage] = useState("javascript");
-  const [copied, setCopied] = useState(false);
-  const [isHovered, setIsHovered] = useState(false);
-  const topRef = useRef(null);
-
-  const languages = [
-    { id: "javascript", name: "JavaScript" },
-    { id: "python", name: "Python" },
-    { id: "java", name: "Java" },
-    { id: "c", name: "C" },
-    { id: "cpp", name: "C++" },
-  ];
-
-  const copyToClipboard = async (text) => {
-    try {
-      await navigator.clipboard.writeText(text);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    } catch (err) {
-      console.error("Failed to copy text: ", err);
-    }
-  };
-
-  const codeExamples = {
+const codeExamples = {
     javascript: `// Stack Implementation with isEmpty Operation in JavaScript
 class Stack {
   constructor() {
@@ -330,122 +293,4 @@ int main() {
 }`,
   };
 
-  return (
-    <div
-      className="max-w-4xl mx-auto"
-      ref={topRef}
-      onMouseEnter={() => setIsHovered(true)}
-      onMouseLeave={() => setIsHovered(false)}
-    >
-      <motion.div
-        initial={{ opacity: 0, y: 20 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{ duration: 0.3 }}
-        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-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">
-              Stack Push & Pop Implementation
-            </h3>
-          </div>
-
-          <motion.button
-            whileHover={{ scale: 1.05 }}
-            whileTap={{ scale: 0.95 }}
-            onClick={() => copyToClipboard(codeExamples[selectedLanguage])}
-            className="flex items-center gap-2 px-3 py-1.5 bg-gray-100 dark:bg-gray-600 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-500 transition-colors text-gray-800 dark:text-gray-100 text-sm font-medium"
-            aria-label="Copy code"
-          >
-            <AnimatePresence mode="wait">
-              {copied ? (
-                <motion.span
-                  key="check"
-                  initial={{ opacity: 0 }}
-                  animate={{ opacity: 1 }}
-                  exit={{ opacity: 0 }}
-                  className="flex items-center text-green-600 dark:text-green-400"
-                >
-                  <FaCheck className="mr-1" /> Copied
-                </motion.span>
-              ) : (
-                <motion.span
-                  key="copy"
-                  initial={{ opacity: 0 }}
-                  animate={{ opacity: 1 }}
-                  exit={{ opacity: 0 }}
-                  className="flex items-center"
-                >
-                  <FaCopy className="mr-1" /> Copy Code
-                </motion.span>
-              )}
-            </AnimatePresence>
-          </motion.button>
-        </div>
-
-        {/* Language Selector */}
-        <div className="px-4 pt-3 pb-2 flex flex-wrap gap-2 border-b border-gray-200 dark:border-gray-700">
-          {languages.map((lang) => (
-            <motion.button
-              key={lang.id}
-              whileHover={{ scale: 1.03 }}
-              whileTap={{ scale: 0.97 }}
-              onClick={() => setSelectedLanguage(lang.id)}
-              className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-colors ${
-                selectedLanguage === lang.id
-                  ? "bg-blue-500 text-white shadow-md"
-                  : "bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-600"
-              }`}
-            >
-              {lang.name}
-            </motion.button>
-          ))}
-        </div>
-
-        {/* Code Block */}
-        <div className="relative">
-          <AnimatePresence mode="wait">
-            <motion.div
-              key={selectedLanguage}
-              initial={{ opacity: 0 }}
-              animate={{ opacity: 1 }}
-              exit={{ opacity: 0 }}
-              transition={{ duration: 0.2 }}
-              className="overflow-x-auto p-4 bg-gray-900 text-white"
-            >
-              <pre className="text-sm leading-relaxed">
-                <code
-                  className={`language-${selectedLanguage}`}
-                  dangerouslySetInnerHTML={{
-                    __html: highlightCode(
-                      codeExamples[selectedLanguage],
-                      selectedLanguage
-                    ),
-                  }}
-                />
-              </pre>
-            </motion.div>
-          </AnimatePresence>
-
-          {/* Language indicator (shown on hover) */}
-          <AnimatePresence>
-            {isHovered && (
-              <motion.div
-                initial={{ opacity: 0, y: 10 }}
-                animate={{ opacity: 1, y: 0 }}
-                exit={{ opacity: 0, y: 10 }}
-                className="absolute bottom-3 right-3 px-2 py-1 bg-gray-800 text-gray-300 text-xs rounded-md"
-              >
-                {selectedLanguage.toUpperCase()}
-              </motion.div>
-            )}
-          </AnimatePresence>
-        </div>
-      </motion.div>
-    </div>
-  );
-};
-
-export default CodeBlock;
\ No newline at end of file
+export default codeExamples;
diff --git a/app/visualizer/stack/isempty/page.jsx b/app/visualizer/stack/isempty/page.jsx
index 24165eb..570280b 100755
--- a/app/visualizer/stack/isempty/page.jsx
+++ b/app/visualizer/stack/isempty/page.jsx
@@ -3,7 +3,8 @@ import Navbar from "@/app/components/navbarinner";
 import ModuleHeader from "@/app/components/modules/Header";
 import Content from "@/app/visualizer/stack/isempty/content";
 import Quiz from "@/app/visualizer/stack/isempty/quiz";
-import Code from "@/app/visualizer/stack/isempty/codeBlock";
+import CodeBlock from "@/app/components/modules/CodeBlock";
+import codeExamples from "./code";
 import ModuleCard from "@/app/components/ui/ModuleCard";
 import { MODULE_MAPS } from "@/lib/modulesMap";
 import ExploreOther from "@/app/components/ui/exploreOther";
@@ -72,7 +73,7 @@ export default function Page() {
         </section>
 
         <section className="px-6">
-          <Code />
+          <CodeBlock title="Stack IsEmpty Implementation" codeExamples={codeExamples} />
         </section>
 
         <section className="px-6 md:px-12 my-12">
diff --git a/app/visualizer/stack/isfull/codeBlock.jsx b/app/visualizer/stack/isfull/code.js
similarity index 55%
rename from app/visualizer/stack/isfull/codeBlock.jsx
rename to app/visualizer/stack/isfull/code.js
index 72c4dc5..05d3dff 100755
--- a/app/visualizer/stack/isfull/codeBlock.jsx
+++ b/app/visualizer/stack/isfull/code.js
@@ -1,41 +1,4 @@
-'use client';
-import { useState, useRef } from 'react';
-import { FaCopy, FaCheck, FaCode } from 'react-icons/fa';
-import { motion, AnimatePresence } from 'framer-motion';
-import hljs from 'highlight.js';
-import 'highlight.js/styles/github.css';
-import 'highlight.js/styles/github-dark.css';
-
-export const highlightCode = (code, language) => {
-  const validLanguage = hljs.getLanguage(language) ? language : 'plaintext';
-  return hljs.highlight(code, { language: validLanguage }).value;
-};
-
-const CodeBlock = () => {
-  const [selectedLanguage, setSelectedLanguage] = useState("javascript");
-  const [copied, setCopied] = useState(false);
-  const [isHovered, setIsHovered] = useState(false);
-  const topRef = useRef(null);
-
-  const languages = [
-    { id: "javascript", name: "JavaScript" },
-    { id: "python", name: "Python" },
-    { id: "java", name: "Java" },
-    { id: "c", name: "C" },
-    { id: "cpp", name: "C++" },
-  ];
-
-  const copyToClipboard = async (text) => {
-    try {
-      await navigator.clipboard.writeText(text);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    } catch (err) {
-      console.error("Failed to copy text: ", err);
-    }
-  };
-
-  const codeExamples = {
+const codeExamples = {
     javascript: `// Stack Implementation with isFull Operation in JavaScript
 class Stack {
   constructor(maxSize = 5) {
@@ -379,122 +342,4 @@ int main() {
 }`
   };
 
-    return (
-        <div
-          className="max-w-4xl mx-auto"
-          ref={topRef}
-          onMouseEnter={() => setIsHovered(true)}
-          onMouseLeave={() => setIsHovered(false)}
-        >
-          <motion.div
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.3 }}
-            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-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">
-                  Stack Push & Pop Implementation
-                </h3>
-              </div>
-    
-              <motion.button
-                whileHover={{ scale: 1.05 }}
-                whileTap={{ scale: 0.95 }}
-                onClick={() => copyToClipboard(codeExamples[selectedLanguage])}
-                className="flex items-center gap-2 px-3 py-1.5 bg-gray-100 dark:bg-gray-600 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-500 transition-colors text-gray-800 dark:text-gray-100 text-sm font-medium"
-                aria-label="Copy code"
-              >
-                <AnimatePresence mode="wait">
-                  {copied ? (
-                    <motion.span
-                      key="check"
-                      initial={{ opacity: 0 }}
-                      animate={{ opacity: 1 }}
-                      exit={{ opacity: 0 }}
-                      className="flex items-center text-green-600 dark:text-green-400"
-                    >
-                      <FaCheck className="mr-1" /> Copied
-                    </motion.span>
-                  ) : (
-                    <motion.span
-                      key="copy"
-                      initial={{ opacity: 0 }}
-                      animate={{ opacity: 1 }}
-                      exit={{ opacity: 0 }}
-                      className="flex items-center"
-                    >
-                      <FaCopy className="mr-1" /> Copy Code
-                    </motion.span>
-                  )}
-                </AnimatePresence>
-              </motion.button>
-            </div>
-    
-            {/* Language Selector */}
-            <div className="px-4 pt-3 pb-2 flex flex-wrap gap-2 border-b border-gray-200 dark:border-gray-700">
-              {languages.map((lang) => (
-                <motion.button
-                  key={lang.id}
-                  whileHover={{ scale: 1.03 }}
-                  whileTap={{ scale: 0.97 }}
-                  onClick={() => setSelectedLanguage(lang.id)}
-                  className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-colors ${
-                    selectedLanguage === lang.id
-                      ? "bg-blue-500 text-white shadow-md"
-                      : "bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-600"
-                  }`}
-                >
-                  {lang.name}
-                </motion.button>
-              ))}
-            </div>
-    
-            {/* Code Block */}
-            <div className="relative">
-              <AnimatePresence mode="wait">
-                <motion.div
-                  key={selectedLanguage}
-                  initial={{ opacity: 0 }}
-                  animate={{ opacity: 1 }}
-                  exit={{ opacity: 0 }}
-                  transition={{ duration: 0.2 }}
-                  className="overflow-x-auto p-4 bg-gray-900 text-white"
-                >
-                  <pre className="text-sm leading-relaxed">
-                    <code
-                      className={`language-${selectedLanguage}`}
-                      dangerouslySetInnerHTML={{
-                        __html: highlightCode(
-                          codeExamples[selectedLanguage],
-                          selectedLanguage
-                        ),
-                      }}
-                    />
-                  </pre>
-                </motion.div>
-              </AnimatePresence>
-    
-              {/* Language indicator (shown on hover) */}
-              <AnimatePresence>
-                {isHovered && (
-                  <motion.div
-                    initial={{ opacity: 0, y: 10 }}
-                    animate={{ opacity: 1, y: 0 }}
-                    exit={{ opacity: 0, y: 10 }}
-                    className="absolute bottom-3 right-3 px-2 py-1 bg-gray-800 text-gray-300 text-xs rounded-md"
-                  >
-                    {selectedLanguage.toUpperCase()}
-                  </motion.div>
-                )}
-              </AnimatePresence>
-            </div>
-          </motion.div>
-        </div>
-      );
-    };
-    
-    export default CodeBlock;
\ No newline at end of file
+export default codeExamples;
diff --git a/app/visualizer/stack/isfull/page.jsx b/app/visualizer/stack/isfull/page.jsx
index 19b9af1..246ae15 100755
--- a/app/visualizer/stack/isfull/page.jsx
+++ b/app/visualizer/stack/isfull/page.jsx
@@ -3,7 +3,8 @@ import Navbar from "@/app/components/navbarinner";
 import ModuleHeader from "@/app/components/modules/Header";
 import Content from "@/app/visualizer/stack/isfull/content";
 import Quiz from "@/app/visualizer/stack/isfull/quiz";
-import Code from "@/app/visualizer/stack/isfull/codeBlock";
+import CodeBlock from "@/app/components/modules/CodeBlock";
+import codeExamples from "./code";
 import ModuleCard from "@/app/components/ui/ModuleCard";
 import { MODULE_MAPS } from "@/lib/modulesMap";
 import ExploreOther from '@/app/components/ui/exploreOther';
@@ -72,7 +73,7 @@ export default function Page() {
         </section>
 
         <section className="px-6">
-          <Code />
+          <CodeBlock title="Stack IsFull Implementation" codeExamples={codeExamples} />
         </section>
 
         <section className="px-6 md:px-12 my-12">
diff --git a/app/visualizer/stack/peek/codeBlock.jsx b/app/visualizer/stack/peek/code.js
similarity index 50%
rename from app/visualizer/stack/peek/codeBlock.jsx
rename to app/visualizer/stack/peek/code.js
index 34b9b13..d26c1f1 100755
--- a/app/visualizer/stack/peek/codeBlock.jsx
+++ b/app/visualizer/stack/peek/code.js
@@ -1,41 +1,4 @@
-'use client';
-import { useState, useRef } from 'react';
-import { FaCopy, FaCheck, FaCode } from 'react-icons/fa';
-import { motion, AnimatePresence } from 'framer-motion';
-import hljs from 'highlight.js';
-import 'highlight.js/styles/github.css';
-import 'highlight.js/styles/github-dark.css';
-
-export const highlightCode = (code, language) => {
-  const validLanguage = hljs.getLanguage(language) ? language : 'plaintext';
-  return hljs.highlight(code, { language: validLanguage }).value;
-};
-
-const CodeBlock = () => {
-  const [selectedLanguage, setSelectedLanguage] = useState("javascript");
-  const [copied, setCopied] = useState(false);
-  const [isHovered, setIsHovered] = useState(false);
-  const topRef = useRef(null);
-
-  const languages = [
-    { id: "javascript", name: "JavaScript" },
-    { id: "python", name: "Python" },
-    { id: "java", name: "Java" },
-    { id: "c", name: "C" },
-    { id: "cpp", name: "C++" },
-  ];
-
-  const copyToClipboard = async (text) => {
-    try {
-      await navigator.clipboard.writeText(text);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    } catch (err) {
-      console.error("Failed to copy text: ", err);
-    }
-  };
-
-  const codeExamples = {
+const codeExamples = {
     javascript: `// Stack Implementation with Peek Operation in JavaScript
 class Stack {
   constructor() {
@@ -347,122 +310,4 @@ int main() {
 }`
   };
 
-  return (
-      <div
-        className="max-w-4xl mx-auto"
-        ref={topRef}
-        onMouseEnter={() => setIsHovered(true)}
-        onMouseLeave={() => setIsHovered(false)}
-      >
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.3 }}
-          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-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">
-                Stack Push & Pop Implementation
-              </h3>
-            </div>
-  
-            <motion.button
-              whileHover={{ scale: 1.05 }}
-              whileTap={{ scale: 0.95 }}
-              onClick={() => copyToClipboard(codeExamples[selectedLanguage])}
-              className="flex items-center gap-2 px-3 py-1.5 bg-gray-100 dark:bg-gray-600 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-500 transition-colors text-gray-800 dark:text-gray-100 text-sm font-medium"
-              aria-label="Copy code"
-            >
-              <AnimatePresence mode="wait">
-                {copied ? (
-                  <motion.span
-                    key="check"
-                    initial={{ opacity: 0 }}
-                    animate={{ opacity: 1 }}
-                    exit={{ opacity: 0 }}
-                    className="flex items-center text-green-600 dark:text-green-400"
-                  >
-                    <FaCheck className="mr-1" /> Copied
-                  </motion.span>
-                ) : (
-                  <motion.span
-                    key="copy"
-                    initial={{ opacity: 0 }}
-                    animate={{ opacity: 1 }}
-                    exit={{ opacity: 0 }}
-                    className="flex items-center"
-                  >
-                    <FaCopy className="mr-1" /> Copy Code
-                  </motion.span>
-                )}
-              </AnimatePresence>
-            </motion.button>
-          </div>
-  
-          {/* Language Selector */}
-          <div className="px-4 pt-3 pb-2 flex flex-wrap gap-2 border-b border-gray-200 dark:border-gray-700">
-            {languages.map((lang) => (
-              <motion.button
-                key={lang.id}
-                whileHover={{ scale: 1.03 }}
-                whileTap={{ scale: 0.97 }}
-                onClick={() => setSelectedLanguage(lang.id)}
-                className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-colors ${
-                  selectedLanguage === lang.id
-                    ? "bg-blue-500 text-white shadow-md"
-                    : "bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-600"
-                }`}
-              >
-                {lang.name}
-              </motion.button>
-            ))}
-          </div>
-  
-          {/* Code Block */}
-          <div className="relative">
-            <AnimatePresence mode="wait">
-              <motion.div
-                key={selectedLanguage}
-                initial={{ opacity: 0 }}
-                animate={{ opacity: 1 }}
-                exit={{ opacity: 0 }}
-                transition={{ duration: 0.2 }}
-                className="overflow-x-auto p-4 bg-gray-900 text-white"
-              >
-                <pre className="text-sm leading-relaxed">
-                  <code
-                    className={`language-${selectedLanguage}`}
-                    dangerouslySetInnerHTML={{
-                      __html: highlightCode(
-                        codeExamples[selectedLanguage],
-                        selectedLanguage
-                      ),
-                    }}
-                  />
-                </pre>
-              </motion.div>
-            </AnimatePresence>
-  
-            {/* Language indicator (shown on hover) */}
-            <AnimatePresence>
-              {isHovered && (
-                <motion.div
-                  initial={{ opacity: 0, y: 10 }}
-                  animate={{ opacity: 1, y: 0 }}
-                  exit={{ opacity: 0, y: 10 }}
-                  className="absolute bottom-3 right-3 px-2 py-1 bg-gray-800 text-gray-300 text-xs rounded-md"
-                >
-                  {selectedLanguage.toUpperCase()}
-                </motion.div>
-              )}
-            </AnimatePresence>
-          </div>
-        </motion.div>
-      </div>
-    );
-  };
-  
-  export default CodeBlock;
\ No newline at end of file
+export default codeExamples;
diff --git a/app/visualizer/stack/peek/page.jsx b/app/visualizer/stack/peek/page.jsx
index 7a285c7..2755a99 100755
--- a/app/visualizer/stack/peek/page.jsx
+++ b/app/visualizer/stack/peek/page.jsx
@@ -3,7 +3,8 @@ import Navbar from "@/app/components/navbarinner";
 import ModuleHeader from "@/app/components/modules/Header";
 import Content from "@/app/visualizer/stack/peek/content";
 import Quiz from "@/app/visualizer/stack/peek/quiz";
-import Code from "@/app/visualizer/stack/peek/codeBlock";
+import CodeBlock from "@/app/components/modules/CodeBlock";
+import codeExamples from "./code";
 import ModuleCard from "@/app/components/ui/ModuleCard";
 import { MODULE_MAPS } from "@/lib/modulesMap";
 import ExploreOther from '@/app/components/ui/exploreOther';
@@ -73,7 +74,7 @@ export default function Page() {
         </section>
 
         <section className="px-6">
-          <Code />
+          <CodeBlock title="Stack Peek Implementation" codeExamples={codeExamples} />
         </section>
 
         <section className="px-6 md:px-12 my-12">
diff --git a/app/visualizer/stack/polish/postfix/code.js b/app/visualizer/stack/polish/postfix/code.js
new file mode 100755
index 0000000..19f5aa9
--- /dev/null
+++ b/app/visualizer/stack/polish/postfix/code.js
@@ -0,0 +1,161 @@
+const codeExamples = {
+    javascript: `// Postfix Evaluation using Stack (JavaScript)
+function evaluatePostfix(expression) {
+  let stack = [];
+  
+  for (let char of expression) {
+    if (!isNaN(char)) {
+      stack.push(parseInt(char));
+    } else {
+      const b = stack.pop();
+      const a = stack.pop();
+      
+      switch(char) {
+        case '+': stack.push(a + b); break;
+        case '-': stack.push(a - b); break;
+        case '*': stack.push(a * b); break;
+        case '/': stack.push(Math.floor(a / b)); break;
+      }
+    }
+  }
+  return stack.pop();
+}
+
+// Example: "23*5+" becomes (2*3)+5 = 11
+console.log(evaluatePostfix("23*5+")); // Output: 11`,
+
+    python: `# Postfix Evaluation using Stack (Python)
+def evaluate_postfix(expression):
+    stack = []
+    
+    for char in expression:
+        if char.isdigit():
+            stack.append(int(char))
+        else:
+            b = stack.pop()
+            a = stack.pop()
+            
+            if char == '+': stack.append(a + b)
+            elif char == '-': stack.append(a - b)
+            elif char == '*': stack.append(a * b)
+            elif char == '/': stack.append(a // b)
+    
+    return stack.pop()
+
+# Example: "23*5+" becomes (2*3)+5 = 11
+print(evaluate_postfix("23*5+"))  # Output: 11`,
+
+    java: `// Postfix Evaluation using Stack (Java)
+import java.util.Stack;
+
+public class PostfixEvaluator {
+    public static int evaluatePostfix(String expression) {
+        Stack<Integer> stack = new Stack<>();
+        
+        for (char c : expression.toCharArray()) {
+            if (Character.isDigit(c)) {
+                stack.push(c - '0');
+            } else {
+                int b = stack.pop();
+                int a = stack.pop();
+                
+                switch (c) {
+                    case '+': stack.push(a + b); break;
+                    case '-': stack.push(a - b); break;
+                    case '*': stack.push(a * b); break;
+                    case '/': stack.push(a / b); break;
+                }
+            }
+        }
+        return stack.pop();
+    }
+
+    public static void main(String[] args) {
+        // Example: "23*5+" becomes (2*3)+5 = 11
+        System.out.println(evaluatePostfix("23*5+"));  // Output: 11
+    }
+}`,
+
+    c: `// Postfix Evaluation using Stack (C)
+#include <stdio.h>
+#include <ctype.h>
+#include <stdlib.h>
+
+#define MAX_SIZE 100
+
+typedef struct {
+    int data[MAX_SIZE];
+    int top;
+} Stack;
+
+void push(Stack *s, int val) {
+    s->data[++s->top] = val;
+}
+
+int pop(Stack *s) {
+    return s->data[s->top--];
+}
+
+int evaluatePostfix(char* expression) {
+    Stack s = { .top = -1 };
+    
+    for (int i = 0; expression[i]; i++) {
+        if (isdigit(expression[i])) {
+            push(&s, expression[i] - '0');
+        } else {
+            int b = pop(&s);
+            int a = pop(&s);
+            
+            switch (expression[i]) {
+                case '+': push(&s, a + b); break;
+                case '-': push(&s, a - b); break;
+                case '*': push(&s, a * b); break;
+                case '/': push(&s, a / b); break;
+            }
+        }
+    }
+    return pop(&s);
+}
+
+int main() {
+    // Example: "23*5+" becomes (2*3)+5 = 11
+    printf("%d\\n", evaluatePostfix("23*5+"));  // Output: 11
+    return 0;
+}`,
+
+    cpp: `// Postfix Evaluation using Stack (C++)
+#include <iostream>
+#include <stack>
+#include <string>
+#include <cctype>
+using namespace std;
+
+int evaluatePostfix(const string& expression) {
+    stack<int> st;
+    
+    for (char c : expression) {
+        if (isdigit(c)) {
+            st.push(c - '0');
+        } else {
+            int b = st.top(); st.pop();
+            int a = st.top(); st.pop();
+            
+            switch (c) {
+                case '+': st.push(a + b); break;
+                case '-': st.push(a - b); break;
+                case '*': st.push(a * b); break;
+                case '/': st.push(a / b); break;
+            }
+        }
+    }
+    return st.top();
+}
+
+int main() {
+    // Example: "23*5+" becomes (2*3)+5 = 11
+    cout << evaluatePostfix("23*5+") << endl;  // Output: 11
+    return 0;
+}`
+  };
+
+export default codeExamples;
diff --git a/app/visualizer/stack/polish/postfix/codeBlock.jsx b/app/visualizer/stack/polish/postfix/codeBlock.jsx
deleted file mode 100755
index b366978..0000000
--- a/app/visualizer/stack/polish/postfix/codeBlock.jsx
+++ /dev/null
@@ -1,316 +0,0 @@
-'use client';
-import { useState, useRef } from 'react';
-import { FaCopy, FaCheck, FaCode } from 'react-icons/fa';
-import { motion, AnimatePresence } from 'framer-motion';
-import hljs from 'highlight.js';
-import 'highlight.js/styles/github.css';
-import 'highlight.js/styles/github-dark.css';
-
-export const highlightCode = (code, language) => {
-  const validLanguage = hljs.getLanguage(language) ? language : 'plaintext';
-  return hljs.highlight(code, { language: validLanguage }).value;
-};
-
-const CodeBlock = () => {
-  const [selectedLanguage, setSelectedLanguage] = useState("javascript");
-  const [copied, setCopied] = useState(false);
-  const [isHovered, setIsHovered] = useState(false);
-  const topRef = useRef(null);
-
-  const languages = [
-    { id: "javascript", name: "JavaScript" },
-    { id: "python", name: "Python" },
-    { id: "java", name: "Java" },
-    { id: "c", name: "C" },
-    { id: "cpp", name: "C++" },
-  ];
-
-  const copyToClipboard = async (text) => {
-    try {
-      await navigator.clipboard.writeText(text);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    } catch (err) {
-      console.error("Failed to copy text: ", err);
-    }
-  };
-
-  const codeExamples = {
-    javascript: `// Postfix Evaluation using Stack (JavaScript)
-function evaluatePostfix(expression) {
-  let stack = [];
-  
-  for (let char of expression) {
-    if (!isNaN(char)) {
-      stack.push(parseInt(char));
-    } else {
-      const b = stack.pop();
-      const a = stack.pop();
-      
-      switch(char) {
-        case '+': stack.push(a + b); break;
-        case '-': stack.push(a - b); break;
-        case '*': stack.push(a * b); break;
-        case '/': stack.push(Math.floor(a / b)); break;
-      }
-    }
-  }
-  return stack.pop();
-}
-
-// Example: "23*5+" becomes (2*3)+5 = 11
-console.log(evaluatePostfix("23*5+")); // Output: 11`,
-
-    python: `# Postfix Evaluation using Stack (Python)
-def evaluate_postfix(expression):
-    stack = []
-    
-    for char in expression:
-        if char.isdigit():
-            stack.append(int(char))
-        else:
-            b = stack.pop()
-            a = stack.pop()
-            
-            if char == '+': stack.append(a + b)
-            elif char == '-': stack.append(a - b)
-            elif char == '*': stack.append(a * b)
-            elif char == '/': stack.append(a // b)
-    
-    return stack.pop()
-
-# Example: "23*5+" becomes (2*3)+5 = 11
-print(evaluate_postfix("23*5+"))  # Output: 11`,
-
-    java: `// Postfix Evaluation using Stack (Java)
-import java.util.Stack;
-
-public class PostfixEvaluator {
-    public static int evaluatePostfix(String expression) {
-        Stack<Integer> stack = new Stack<>();
-        
-        for (char c : expression.toCharArray()) {
-            if (Character.isDigit(c)) {
-                stack.push(c - '0');
-            } else {
-                int b = stack.pop();
-                int a = stack.pop();
-                
-                switch (c) {
-                    case '+': stack.push(a + b); break;
-                    case '-': stack.push(a - b); break;
-                    case '*': stack.push(a * b); break;
-                    case '/': stack.push(a / b); break;
-                }
-            }
-        }
-        return stack.pop();
-    }
-
-    public static void main(String[] args) {
-        // Example: "23*5+" becomes (2*3)+5 = 11
-        System.out.println(evaluatePostfix("23*5+"));  // Output: 11
-    }
-}`,
-
-    c: `// Postfix Evaluation using Stack (C)
-#include <stdio.h>
-#include <ctype.h>
-#include <stdlib.h>
-
-#define MAX_SIZE 100
-
-typedef struct {
-    int data[MAX_SIZE];
-    int top;
-} Stack;
-
-void push(Stack *s, int val) {
-    s->data[++s->top] = val;
-}
-
-int pop(Stack *s) {
-    return s->data[s->top--];
-}
-
-int evaluatePostfix(char* expression) {
-    Stack s = { .top = -1 };
-    
-    for (int i = 0; expression[i]; i++) {
-        if (isdigit(expression[i])) {
-            push(&s, expression[i] - '0');
-        } else {
-            int b = pop(&s);
-            int a = pop(&s);
-            
-            switch (expression[i]) {
-                case '+': push(&s, a + b); break;
-                case '-': push(&s, a - b); break;
-                case '*': push(&s, a * b); break;
-                case '/': push(&s, a / b); break;
-            }
-        }
-    }
-    return pop(&s);
-}
-
-int main() {
-    // Example: "23*5+" becomes (2*3)+5 = 11
-    printf("%d\\n", evaluatePostfix("23*5+"));  // Output: 11
-    return 0;
-}`,
-
-    cpp: `// Postfix Evaluation using Stack (C++)
-#include <iostream>
-#include <stack>
-#include <string>
-#include <cctype>
-using namespace std;
-
-int evaluatePostfix(const string& expression) {
-    stack<int> st;
-    
-    for (char c : expression) {
-        if (isdigit(c)) {
-            st.push(c - '0');
-        } else {
-            int b = st.top(); st.pop();
-            int a = st.top(); st.pop();
-            
-            switch (c) {
-                case '+': st.push(a + b); break;
-                case '-': st.push(a - b); break;
-                case '*': st.push(a * b); break;
-                case '/': st.push(a / b); break;
-            }
-        }
-    }
-    return st.top();
-}
-
-int main() {
-    // Example: "23*5+" becomes (2*3)+5 = 11
-    cout << evaluatePostfix("23*5+") << endl;  // Output: 11
-    return 0;
-}`
-  };
-
-    return (
-        <div
-          className="max-w-4xl mx-auto"
-          ref={topRef}
-          onMouseEnter={() => setIsHovered(true)}
-          onMouseLeave={() => setIsHovered(false)}
-        >
-          <motion.div
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.3 }}
-            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-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">
-                  PostFix implementation using Stack
-                </h3>
-              </div>
-    
-              <motion.button
-                whileHover={{ scale: 1.05 }}
-                whileTap={{ scale: 0.95 }}
-                onClick={() => copyToClipboard(codeExamples[selectedLanguage])}
-                className="flex items-center gap-2 px-3 py-1.5 bg-gray-100 dark:bg-gray-600 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-500 transition-colors text-gray-800 dark:text-gray-100 text-sm font-medium"
-                aria-label="Copy code"
-              >
-                <AnimatePresence mode="wait">
-                  {copied ? (
-                    <motion.span
-                      key="check"
-                      initial={{ opacity: 0 }}
-                      animate={{ opacity: 1 }}
-                      exit={{ opacity: 0 }}
-                      className="flex items-center text-green-600 dark:text-green-400"
-                    >
-                      <FaCheck className="mr-1" /> Copied
-                    </motion.span>
-                  ) : (
-                    <motion.span
-                      key="copy"
-                      initial={{ opacity: 0 }}
-                      animate={{ opacity: 1 }}
-                      exit={{ opacity: 0 }}
-                      className="flex items-center"
-                    >
-                      <FaCopy className="mr-1" /> Copy Code
-                    </motion.span>
-                  )}
-                </AnimatePresence>
-              </motion.button>
-            </div>
-    
-            {/* Language Selector */}
-            <div className="px-4 pt-3 pb-2 flex flex-wrap gap-2 border-b border-gray-200 dark:border-gray-700">
-              {languages.map((lang) => (
-                <motion.button
-                  key={lang.id}
-                  whileHover={{ scale: 1.03 }}
-                  whileTap={{ scale: 0.97 }}
-                  onClick={() => setSelectedLanguage(lang.id)}
-                  className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-colors ${
-                    selectedLanguage === lang.id
-                      ? "bg-blue-500 text-white shadow-md"
-                      : "bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-600"
-                  }`}
-                >
-                  {lang.name}
-                </motion.button>
-              ))}
-            </div>
-    
-            {/* Code Block */}
-            <div className="relative">
-              <AnimatePresence mode="wait">
-                <motion.div
-                  key={selectedLanguage}
-                  initial={{ opacity: 0 }}
-                  animate={{ opacity: 1 }}
-                  exit={{ opacity: 0 }}
-                  transition={{ duration: 0.2 }}
-                  className="overflow-x-auto p-4 bg-gray-900 text-white"
-                >
-                  <pre className="text-sm leading-relaxed">
-                    <code
-                      className={`language-${selectedLanguage}`}
-                      dangerouslySetInnerHTML={{
-                        __html: highlightCode(
-                          codeExamples[selectedLanguage],
-                          selectedLanguage
-                        ),
-                      }}
-                    />
-                  </pre>
-                </motion.div>
-              </AnimatePresence>
-    
-              {/* Language indicator (shown on hover) */}
-              <AnimatePresence>
-                {isHovered && (
-                  <motion.div
-                    initial={{ opacity: 0, y: 10 }}
-                    animate={{ opacity: 1, y: 0 }}
-                    exit={{ opacity: 0, y: 10 }}
-                    className="absolute bottom-3 right-3 px-2 py-1 bg-gray-800 text-gray-300 text-xs rounded-md"
-                  >
-                    {selectedLanguage.toUpperCase()}
-                  </motion.div>
-                )}
-              </AnimatePresence>
-            </div>
-          </motion.div>
-        </div>
-      );
-    };
-    
-    export default CodeBlock;
\ No newline at end of file
diff --git a/app/visualizer/stack/polish/postfix/page.jsx b/app/visualizer/stack/polish/postfix/page.jsx
index 26e7f09..7b48910 100755
--- a/app/visualizer/stack/polish/postfix/page.jsx
+++ b/app/visualizer/stack/polish/postfix/page.jsx
@@ -3,7 +3,8 @@ import Navbar from "@/app/components/navbarinner";
 import ModuleHeader from "@/app/components/modules/Header";
 import Content from "@/app/visualizer/stack/polish/postfix/content";
 import Quiz from "@/app/visualizer/stack/polish/postfix/quiz";
-import Code from "@/app/visualizer/stack/polish/postfix/codeBlock";
+import CodeBlock from "@/app/components/modules/CodeBlock";
+import codeExamples from "./code";
 import ModuleCard from "@/app/components/ui/ModuleCard";
 import { MODULE_MAPS } from "@/lib/modulesMap";
 import Footer from "@/app/components/footer";
@@ -73,7 +74,7 @@ export default function Page() {
         </section>
 
         <section className="px-6">
-          <Code />
+          <CodeBlock title="PostFix implementation using Stack" codeExamples={codeExamples} />
         </section>
 
         <section className="px-6 md:px-12 my-12">
diff --git a/app/visualizer/stack/polish/prefix/code.js b/app/visualizer/stack/polish/prefix/code.js
new file mode 100755
index 0000000..af7fcc2
--- /dev/null
+++ b/app/visualizer/stack/polish/prefix/code.js
@@ -0,0 +1,168 @@
+const codeExamples = {
+    javascript: `// Prefix Evaluation using Stack (JavaScript)
+function evaluatePrefix(expression) {
+  let stack = [];
+  // Process expression in reverse order
+  for (let i = expression.length - 1; i >= 0; i--) {
+    const char = expression[i];
+    if (!isNaN(char)) {
+      stack.push(parseInt(char));
+    } else {
+      const a = stack.pop();
+      const b = stack.pop();
+      
+      switch(char) {
+        case '+': stack.push(a + b); break;
+        case '-': stack.push(a - b); break;
+        case '*': stack.push(a * b); break;
+        case '/': stack.push(Math.floor(a / b)); break;
+      }
+    }
+  }
+  return stack.pop();
+}
+
+// Example: "+*235" becomes (2*3)+5 = 11
+console.log(evaluatePrefix("+*235")); // Output: 11`,
+
+    python: `# Prefix Evaluation using Stack (Python)
+def evaluate_prefix(expression):
+    stack = []
+    # Process expression in reverse order
+    for char in reversed(expression):
+        if char.isdigit():
+            stack.append(int(char))
+        else:
+            a = stack.pop()
+            b = stack.pop()
+            
+            if char == '+': stack.append(a + b)
+            elif char == '-': stack.append(a - b)
+            elif char == '*': stack.append(a * b)
+            elif char == '/': stack.append(a // b)
+    
+    return stack.pop()
+
+# Example: "+*235" becomes (2*3)+5 = 11
+print(evaluate_prefix("+*235"))  # Output: 11`,
+
+    java: `// Prefix Evaluation using Stack (Java)
+import java.util.Stack;
+
+public class PrefixEvaluator {
+    public static int evaluatePrefix(String expression) {
+        Stack<Integer> stack = new Stack<>();
+        // Process expression in reverse order
+        for (int i = expression.length() - 1; i >= 0; i--) {
+            char c = expression.charAt(i);
+            if (Character.isDigit(c)) {
+                stack.push(c - '0');
+            } else {
+                int a = stack.pop();
+                int b = stack.pop();
+                
+                switch (c) {
+                    case '+': stack.push(a + b); break;
+                    case '-': stack.push(a - b); break;
+                    case '*': stack.push(a * b); break;
+                    case '/': stack.push(a / b); break;
+                }
+            }
+        }
+        return stack.pop();
+    }
+
+    public static void main(String[] args) {
+        // Example: "+*235" becomes (2*3)+5 = 11
+        System.out.println(evaluatePrefix("+*235"));  // Output: 11
+    }
+}`,
+
+    c: `// Prefix Evaluation using Stack (C)
+#include <stdio.h>
+#include <ctype.h>
+#include <stdlib.h>
+#include <string.h>
+
+#define MAX_SIZE 100
+
+typedef struct {
+    int data[MAX_SIZE];
+    int top;
+} Stack;
+
+void push(Stack *s, int val) {
+    s->data[++s->top] = val;
+}
+
+int pop(Stack *s) {
+    return s->data[s->top--];
+}
+
+int evaluatePrefix(char* expression) {
+    Stack s = { .top = -1 };
+    int length = strlen(expression);
+    
+    // Process expression in reverse order
+    for (int i = length - 1; i >= 0; i--) {
+        if (isdigit(expression[i])) {
+            push(&s, expression[i] - '0');
+        } else {
+            int a = pop(&s);
+            int b = pop(&s);
+            
+            switch (expression[i]) {
+                case '+': push(&s, a + b); break;
+                case '-': push(&s, a - b); break;
+                case '*': push(&s, a * b); break;
+                case '/': push(&s, a / b); break;
+            }
+        }
+    }
+    return pop(&s);
+}
+
+int main() {
+    // Example: "+*235" becomes (2*3)+5 = 11
+    printf("%d\n", evaluatePrefix("+*235"));  // Output: 11
+    return 0;
+}`,
+
+    cpp: `// Prefix Evaluation using Stack (C++)
+#include <iostream>
+#include <stack>
+#include <string>
+#include <cctype>
+using namespace std;
+
+int evaluatePrefix(const string& expression) {
+    stack<int> st;
+    
+    // Process expression in reverse order
+    for (auto it = expression.rbegin(); it != expression.rend(); ++it) {
+        char c = *it;
+        if (isdigit(c)) {
+            st.push(c - '0');
+        } else {
+            int a = st.top(); st.pop();
+            int b = st.top(); st.pop();
+            
+            switch (c) {
+                case '+': st.push(a + b); break;
+                case '-': st.push(a - b); break;
+                case '*': st.push(a * b); break;
+                case '/': st.push(a / b); break;
+            }
+        }
+    }
+    return st.top();
+}
+
+int main() {
+    // Example: "+*235" becomes (2*3)+5 = 11
+    cout << evaluatePrefix("+*235") << endl;  // Output: 11
+    return 0;
+}`,
+  };
+
+export default codeExamples;
diff --git a/app/visualizer/stack/polish/prefix/codeBlock.jsx b/app/visualizer/stack/polish/prefix/codeBlock.jsx
deleted file mode 100755
index 0c03e46..0000000
--- a/app/visualizer/stack/polish/prefix/codeBlock.jsx
+++ /dev/null
@@ -1,323 +0,0 @@
-'use client';
-import { useState, useRef } from 'react';
-import { FaCopy, FaCheck, FaCode } from 'react-icons/fa';
-import { motion, AnimatePresence } from 'framer-motion';
-import hljs from 'highlight.js';
-import 'highlight.js/styles/github.css';
-import 'highlight.js/styles/github-dark.css';
-
-export const highlightCode = (code, language) => {
-  const validLanguage = hljs.getLanguage(language) ? language : 'plaintext';
-  return hljs.highlight(code, { language: validLanguage }).value;
-};
-
-const CodeBlock = () => {
-  const [selectedLanguage, setSelectedLanguage] = useState("javascript");
-  const [copied, setCopied] = useState(false);
-  const [isHovered, setIsHovered] = useState(false);
-  const topRef = useRef(null);
-
-  const languages = [
-    { id: "javascript", name: "JavaScript" },
-    { id: "python", name: "Python" },
-    { id: "java", name: "Java" },
-    { id: "c", name: "C" },
-    { id: "cpp", name: "C++" },
-  ];
-
-  const copyToClipboard = async (text) => {
-    try {
-      await navigator.clipboard.writeText(text);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    } catch (err) {
-      console.error("Failed to copy text: ", err);
-    }
-  };
-
-  const codeExamples = {
-    javascript: `// Prefix Evaluation using Stack (JavaScript)
-function evaluatePrefix(expression) {
-  let stack = [];
-  // Process expression in reverse order
-  for (let i = expression.length - 1; i >= 0; i--) {
-    const char = expression[i];
-    if (!isNaN(char)) {
-      stack.push(parseInt(char));
-    } else {
-      const a = stack.pop();
-      const b = stack.pop();
-      
-      switch(char) {
-        case '+': stack.push(a + b); break;
-        case '-': stack.push(a - b); break;
-        case '*': stack.push(a * b); break;
-        case '/': stack.push(Math.floor(a / b)); break;
-      }
-    }
-  }
-  return stack.pop();
-}
-
-// Example: "+*235" becomes (2*3)+5 = 11
-console.log(evaluatePrefix("+*235")); // Output: 11`,
-
-    python: `# Prefix Evaluation using Stack (Python)
-def evaluate_prefix(expression):
-    stack = []
-    # Process expression in reverse order
-    for char in reversed(expression):
-        if char.isdigit():
-            stack.append(int(char))
-        else:
-            a = stack.pop()
-            b = stack.pop()
-            
-            if char == '+': stack.append(a + b)
-            elif char == '-': stack.append(a - b)
-            elif char == '*': stack.append(a * b)
-            elif char == '/': stack.append(a // b)
-    
-    return stack.pop()
-
-# Example: "+*235" becomes (2*3)+5 = 11
-print(evaluate_prefix("+*235"))  # Output: 11`,
-
-    java: `// Prefix Evaluation using Stack (Java)
-import java.util.Stack;
-
-public class PrefixEvaluator {
-    public static int evaluatePrefix(String expression) {
-        Stack<Integer> stack = new Stack<>();
-        // Process expression in reverse order
-        for (int i = expression.length() - 1; i >= 0; i--) {
-            char c = expression.charAt(i);
-            if (Character.isDigit(c)) {
-                stack.push(c - '0');
-            } else {
-                int a = stack.pop();
-                int b = stack.pop();
-                
-                switch (c) {
-                    case '+': stack.push(a + b); break;
-                    case '-': stack.push(a - b); break;
-                    case '*': stack.push(a * b); break;
-                    case '/': stack.push(a / b); break;
-                }
-            }
-        }
-        return stack.pop();
-    }
-
-    public static void main(String[] args) {
-        // Example: "+*235" becomes (2*3)+5 = 11
-        System.out.println(evaluatePrefix("+*235"));  // Output: 11
-    }
-}`,
-
-    c: `// Prefix Evaluation using Stack (C)
-#include <stdio.h>
-#include <ctype.h>
-#include <stdlib.h>
-#include <string.h>
-
-#define MAX_SIZE 100
-
-typedef struct {
-    int data[MAX_SIZE];
-    int top;
-} Stack;
-
-void push(Stack *s, int val) {
-    s->data[++s->top] = val;
-}
-
-int pop(Stack *s) {
-    return s->data[s->top--];
-}
-
-int evaluatePrefix(char* expression) {
-    Stack s = { .top = -1 };
-    int length = strlen(expression);
-    
-    // Process expression in reverse order
-    for (int i = length - 1; i >= 0; i--) {
-        if (isdigit(expression[i])) {
-            push(&s, expression[i] - '0');
-        } else {
-            int a = pop(&s);
-            int b = pop(&s);
-            
-            switch (expression[i]) {
-                case '+': push(&s, a + b); break;
-                case '-': push(&s, a - b); break;
-                case '*': push(&s, a * b); break;
-                case '/': push(&s, a / b); break;
-            }
-        }
-    }
-    return pop(&s);
-}
-
-int main() {
-    // Example: "+*235" becomes (2*3)+5 = 11
-    printf("%d\n", evaluatePrefix("+*235"));  // Output: 11
-    return 0;
-}`,
-
-    cpp: `// Prefix Evaluation using Stack (C++)
-#include <iostream>
-#include <stack>
-#include <string>
-#include <cctype>
-using namespace std;
-
-int evaluatePrefix(const string& expression) {
-    stack<int> st;
-    
-    // Process expression in reverse order
-    for (auto it = expression.rbegin(); it != expression.rend(); ++it) {
-        char c = *it;
-        if (isdigit(c)) {
-            st.push(c - '0');
-        } else {
-            int a = st.top(); st.pop();
-            int b = st.top(); st.pop();
-            
-            switch (c) {
-                case '+': st.push(a + b); break;
-                case '-': st.push(a - b); break;
-                case '*': st.push(a * b); break;
-                case '/': st.push(a / b); break;
-            }
-        }
-    }
-    return st.top();
-}
-
-int main() {
-    // Example: "+*235" becomes (2*3)+5 = 11
-    cout << evaluatePrefix("+*235") << endl;  // Output: 11
-    return 0;
-}`,
-  };
-
-  return (
-    <div
-      className="max-w-4xl mx-auto"
-      ref={topRef}
-      onMouseEnter={() => setIsHovered(true)}
-      onMouseLeave={() => setIsHovered(false)}
-    >
-      <motion.div
-        initial={{ opacity: 0, y: 20 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{ duration: 0.3 }}
-        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-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">
-              PreFix implementation using Stack
-            </h3>
-          </div>
-
-          <motion.button
-            whileHover={{ scale: 1.05 }}
-            whileTap={{ scale: 0.95 }}
-            onClick={() => copyToClipboard(codeExamples[selectedLanguage])}
-            className="flex items-center gap-2 px-3 py-1.5 bg-gray-100 dark:bg-gray-600 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-500 transition-colors text-gray-800 dark:text-gray-100 text-sm font-medium"
-            aria-label="Copy code"
-          >
-            <AnimatePresence mode="wait">
-              {copied ? (
-                <motion.span
-                  key="check"
-                  initial={{ opacity: 0 }}
-                  animate={{ opacity: 1 }}
-                  exit={{ opacity: 0 }}
-                  className="flex items-center text-green-600 dark:text-green-400"
-                >
-                  <FaCheck className="mr-1" /> Copied
-                </motion.span>
-              ) : (
-                <motion.span
-                  key="copy"
-                  initial={{ opacity: 0 }}
-                  animate={{ opacity: 1 }}
-                  exit={{ opacity: 0 }}
-                  className="flex items-center"
-                >
-                  <FaCopy className="mr-1" /> Copy Code
-                </motion.span>
-              )}
-            </AnimatePresence>
-          </motion.button>
-        </div>
-
-        {/* Language Selector */}
-        <div className="px-4 pt-3 pb-2 flex flex-wrap gap-2 border-b border-gray-200 dark:border-gray-700">
-          {languages.map((lang) => (
-            <motion.button
-              key={lang.id}
-              whileHover={{ scale: 1.03 }}
-              whileTap={{ scale: 0.97 }}
-              onClick={() => setSelectedLanguage(lang.id)}
-              className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-colors ${
-                selectedLanguage === lang.id
-                  ? "bg-blue-500 text-white shadow-md"
-                  : "bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-600"
-              }`}
-            >
-              {lang.name}
-            </motion.button>
-          ))}
-        </div>
-
-        {/* Code Block */}
-        <div className="relative">
-          <AnimatePresence mode="wait">
-            <motion.div
-              key={selectedLanguage}
-              initial={{ opacity: 0 }}
-              animate={{ opacity: 1 }}
-              exit={{ opacity: 0 }}
-              transition={{ duration: 0.2 }}
-              className="overflow-x-auto p-4 bg-gray-900 text-white"
-            >
-              <pre className="text-sm leading-relaxed">
-                <code
-                  className={`language-${selectedLanguage}`}
-                  dangerouslySetInnerHTML={{
-                    __html: highlightCode(
-                      codeExamples[selectedLanguage],
-                      selectedLanguage
-                    ),
-                  }}
-                />
-              </pre>
-            </motion.div>
-          </AnimatePresence>
-
-          {/* Language indicator (shown on hover) */}
-          <AnimatePresence>
-            {isHovered && (
-              <motion.div
-                initial={{ opacity: 0, y: 10 }}
-                animate={{ opacity: 1, y: 0 }}
-                exit={{ opacity: 0, y: 10 }}
-                className="absolute bottom-3 right-3 px-2 py-1 bg-gray-800 text-gray-300 text-xs rounded-md"
-              >
-                {selectedLanguage.toUpperCase()}
-              </motion.div>
-            )}
-          </AnimatePresence>
-        </div>
-      </motion.div>
-    </div>
-  );
-};
-
-export default CodeBlock;
\ No newline at end of file
diff --git a/app/visualizer/stack/polish/prefix/page.jsx b/app/visualizer/stack/polish/prefix/page.jsx
index 11f9548..3049c9e 100755
--- a/app/visualizer/stack/polish/prefix/page.jsx
+++ b/app/visualizer/stack/polish/prefix/page.jsx
@@ -3,7 +3,8 @@ import Navbar from "@/app/components/navbarinner";
 import ModuleHeader from "@/app/components/modules/Header";
 import Content from "@/app/visualizer/stack/polish/prefix/content";
 import Quiz from "@/app/visualizer/stack/polish/postfix/quiz";
-import Code from "@/app/visualizer/stack/polish/prefix/codeBlock";
+import CodeBlock from "@/app/components/modules/CodeBlock";
+import codeExamples from "./code";
 import ModuleCard from "@/app/components/ui/ModuleCard";
 import { MODULE_MAPS } from "@/lib/modulesMap";
 import Footer from "@/app/components/footer";
@@ -73,7 +74,7 @@ export default function Page() {
         </section>
 
         <section className="px-6">
-          <Code />
+          <CodeBlock title="PreFix implementation using Stack" codeExamples={codeExamples} />
         </section>
 
         <section className="px-6 md:px-12 my-12">
diff --git a/app/visualizer/stack/push-pop/code.js b/app/visualizer/stack/push-pop/code.js
new file mode 100755
index 0000000..3b15d0c
--- /dev/null
+++ b/app/visualizer/stack/push-pop/code.js
@@ -0,0 +1,260 @@
+const codeExamples = {
+    javascript: `// Stack Implementation with Push/Pop in JavaScript
+class Stack {
+  constructor() {
+    this.items = [];
+    this.top = -1;
+    this.MAX_SIZE = 10;
+  }
+
+  // Push operation
+  push(element) {
+    if (this.top >= this.MAX_SIZE - 1) {
+      console.log("Stack Overflow");
+      return;
+    }
+    this.items[++this.top] = element;
+    console.log(\`Pushed: \${element}\`);
+  }
+
+  // Pop operation
+  pop() {
+    if (this.top < 0) {
+      console.log("Stack Underflow");
+      return -1;
+    }
+    const element = this.items[this.top--];
+    console.log(\`Popped: \${element}\`);
+    return element;
+  }
+
+  // Display stack
+  display() {
+    console.log("Current Stack:", this.items.slice(0, this.top + 1));
+  }
+}
+
+// Usage
+const stack = new Stack();
+stack.push(10);
+stack.push(20);
+stack.push(30);
+stack.display();
+stack.pop();
+stack.display();`,
+
+    python: `# Stack Implementation with Push/Pop in Python
+class Stack:
+    def __init__(self):
+        self.items = []
+        self.top = -1
+        self.MAX_SIZE = 10
+    
+    # Push operation
+    def push(self, element):
+        if self.top >= self.MAX_SIZE - 1:
+            print("Stack Overflow")
+            return
+        self.top += 1
+        self.items.append(element)
+        print(f"Pushed: {element}")
+    
+    # Pop operation
+    def pop(self):
+        if self.top < 0:
+            print("Stack Underflow")
+            return -1
+        element = self.items.pop()
+        self.top -= 1
+        print(f"Popped: {element}")
+        return element
+    
+    # Display stack
+    def display(self):
+        print("Current Stack:", self.items)
+
+# Usage
+stack = Stack()
+stack.push(10)
+stack.push(20)
+stack.push(30)
+stack.display()
+stack.pop()
+stack.display()`,
+
+    java: `// Stack Implementation with Push/Pop in Java
+import java.util.ArrayList;
+
+class Stack {
+    private ArrayList<Integer> items;
+    private int top;
+    private final int MAX_SIZE = 10;
+    
+    public Stack() {
+        items = new ArrayList<>();
+        top = -1;
+    }
+    
+    // Push operation
+    public void push(int element) {
+        if (top >= MAX_SIZE - 1) {
+            System.out.println("Stack Overflow");
+            return;
+        }
+        items.add(++top, element);
+        System.out.println("Pushed: " + element);
+    }
+    
+    // Pop operation
+    public int pop() {
+        if (top < 0) {
+            System.out.println("Stack Underflow");
+            return -1;
+        }
+        int element = items.remove(top--);
+        System.out.println("Popped: " + element);
+        return element;
+    }
+    
+    // Display stack
+    public void display() {
+        System.out.print("Current Stack: ");
+        for (int i = 0; i <= top; i++) {
+            System.out.print(items.get(i) + " ");
+        }
+        System.out.println();
+    }
+}
+
+public class Main {
+    public static void main(String[] args) {
+        Stack stack = new Stack();
+        stack.push(10);
+        stack.push(20);
+        stack.push(30);
+        stack.display();
+        stack.pop();
+        stack.display();
+    }
+}`,
+
+    c: `// Stack Implementation with Push/Pop in C
+#include <stdio.h>
+#include <stdlib.h>
+#define MAX_SIZE 10
+
+typedef struct {
+    int items[MAX_SIZE];
+    int top;
+} Stack;
+
+void initialize(Stack *s) {
+    s->top = -1;
+}
+
+// Push operation
+void push(Stack *s, int element) {
+    if (s->top >= MAX_SIZE - 1) {
+        printf("Stack Overflow\\n");
+        return;
+    }
+    s->items[++s->top] = element;
+    printf("Pushed: %d\\n", element);
+}
+
+// Pop operation
+int pop(Stack *s) {
+    if (s->top < 0) {
+        printf("Stack Underflow\\n");
+        return -1;
+    }
+    int element = s->items[s->top--];
+    printf("Popped: %d\\n", element);
+    return element;
+}
+
+// Display stack
+void display(Stack *s) {
+    printf("Current Stack: ");
+    for (int i = 0; i <= s->top; i++) {
+        printf("%d ", s->items[i]);
+    }
+    printf("\\n");
+}
+
+int main() {
+    Stack stack;
+    initialize(&stack);
+    
+    push(&stack, 10);
+    push(&stack, 20);
+    push(&stack, 30);
+    display(&stack);
+    pop(&stack);
+    display(&stack);
+    
+    return 0;
+}`,
+
+    cpp: `// Stack Implementation with Push/Pop in C++
+#include <iostream>
+#include <vector>
+using namespace std;
+
+class Stack {
+private:
+    vector<int> items;
+    int top;
+    const int MAX_SIZE = 10;
+
+public:
+    Stack() : top(-1) {}
+    
+    // Push operation
+    void push(int element) {
+        if (top >= MAX_SIZE - 1) {
+            cout << "Stack Overflow" << endl;
+            return;
+        }
+        items.push_back(element);
+        top++;
+        cout << "Pushed: " << element << endl;
+    }
+    
+    // Pop operation
+    int pop() {
+        if (top < 0) {
+            cout << "Stack Underflow" << endl;
+            return -1;
+        }
+        int element = items.back();
+        items.pop_back();
+        top--;
+        cout << "Popped: " << element << endl;
+        return element;
+    }
+    
+    // Display stack
+    void display() {
+        cout << "Current Stack: ";
+        for (int i = 0; i <= top; i++) {
+            cout << items[i] << " ";
+        }
+        cout << endl;
+    }
+};
+
+int main() {
+    Stack stack;
+    stack.push(10);
+    stack.push(20);
+    stack.push(30);
+    stack.display();
+    stack.pop();
+    stack.display();
+    
+    return 0;
+}`,
+  };
+
+export default codeExamples;
diff --git a/app/visualizer/stack/push-pop/codeBlock.jsx b/app/visualizer/stack/push-pop/codeBlock.jsx
deleted file mode 100755
index 135138a..0000000
--- a/app/visualizer/stack/push-pop/codeBlock.jsx
+++ /dev/null
@@ -1,415 +0,0 @@
-'use client';
-import { useState, useRef } from 'react';
-import { FaCopy, FaCheck, FaCode } from 'react-icons/fa';
-import { motion, AnimatePresence } from 'framer-motion';
-import hljs from 'highlight.js';
-import 'highlight.js/styles/github.css';
-import 'highlight.js/styles/github-dark.css';
-
-export const highlightCode = (code, language) => {
-  const validLanguage = hljs.getLanguage(language) ? language : 'plaintext';
-  return hljs.highlight(code, { language: validLanguage }).value;
-};
-
-const CodeBlock = () => {
-  const [selectedLanguage, setSelectedLanguage] = useState("javascript");
-  const [copied, setCopied] = useState(false);
-  const [isHovered, setIsHovered] = useState(false);
-  const topRef = useRef(null);
-
-  const languages = [
-    { id: "javascript", name: "JavaScript" },
-    { id: "python", name: "Python" },
-    { id: "java", name: "Java" },
-    { id: "c", name: "C" },
-    { id: "cpp", name: "C++" },
-  ];
-
-  const copyToClipboard = async (text) => {
-    try {
-      await navigator.clipboard.writeText(text);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    } catch (err) {
-      console.error("Failed to copy text: ", err);
-    }
-  };
-
-  const codeExamples = {
-    javascript: `// Stack Implementation with Push/Pop in JavaScript
-class Stack {
-  constructor() {
-    this.items = [];
-    this.top = -1;
-    this.MAX_SIZE = 10;
-  }
-
-  // Push operation
-  push(element) {
-    if (this.top >= this.MAX_SIZE - 1) {
-      console.log("Stack Overflow");
-      return;
-    }
-    this.items[++this.top] = element;
-    console.log(\`Pushed: \${element}\`);
-  }
-
-  // Pop operation
-  pop() {
-    if (this.top < 0) {
-      console.log("Stack Underflow");
-      return -1;
-    }
-    const element = this.items[this.top--];
-    console.log(\`Popped: \${element}\`);
-    return element;
-  }
-
-  // Display stack
-  display() {
-    console.log("Current Stack:", this.items.slice(0, this.top + 1));
-  }
-}
-
-// Usage
-const stack = new Stack();
-stack.push(10);
-stack.push(20);
-stack.push(30);
-stack.display();
-stack.pop();
-stack.display();`,
-
-    python: `# Stack Implementation with Push/Pop in Python
-class Stack:
-    def __init__(self):
-        self.items = []
-        self.top = -1
-        self.MAX_SIZE = 10
-    
-    # Push operation
-    def push(self, element):
-        if self.top >= self.MAX_SIZE - 1:
-            print("Stack Overflow")
-            return
-        self.top += 1
-        self.items.append(element)
-        print(f"Pushed: {element}")
-    
-    # Pop operation
-    def pop(self):
-        if self.top < 0:
-            print("Stack Underflow")
-            return -1
-        element = self.items.pop()
-        self.top -= 1
-        print(f"Popped: {element}")
-        return element
-    
-    # Display stack
-    def display(self):
-        print("Current Stack:", self.items)
-
-# Usage
-stack = Stack()
-stack.push(10)
-stack.push(20)
-stack.push(30)
-stack.display()
-stack.pop()
-stack.display()`,
-
-    java: `// Stack Implementation with Push/Pop in Java
-import java.util.ArrayList;
-
-class Stack {
-    private ArrayList<Integer> items;
-    private int top;
-    private final int MAX_SIZE = 10;
-    
-    public Stack() {
-        items = new ArrayList<>();
-        top = -1;
-    }
-    
-    // Push operation
-    public void push(int element) {
-        if (top >= MAX_SIZE - 1) {
-            System.out.println("Stack Overflow");
-            return;
-        }
-        items.add(++top, element);
-        System.out.println("Pushed: " + element);
-    }
-    
-    // Pop operation
-    public int pop() {
-        if (top < 0) {
-            System.out.println("Stack Underflow");
-            return -1;
-        }
-        int element = items.remove(top--);
-        System.out.println("Popped: " + element);
-        return element;
-    }
-    
-    // Display stack
-    public void display() {
-        System.out.print("Current Stack: ");
-        for (int i = 0; i <= top; i++) {
-            System.out.print(items.get(i) + " ");
-        }
-        System.out.println();
-    }
-}
-
-public class Main {
-    public static void main(String[] args) {
-        Stack stack = new Stack();
-        stack.push(10);
-        stack.push(20);
-        stack.push(30);
-        stack.display();
-        stack.pop();
-        stack.display();
-    }
-}`,
-
-    c: `// Stack Implementation with Push/Pop in C
-#include <stdio.h>
-#include <stdlib.h>
-#define MAX_SIZE 10
-
-typedef struct {
-    int items[MAX_SIZE];
-    int top;
-} Stack;
-
-void initialize(Stack *s) {
-    s->top = -1;
-}
-
-// Push operation
-void push(Stack *s, int element) {
-    if (s->top >= MAX_SIZE - 1) {
-        printf("Stack Overflow\\n");
-        return;
-    }
-    s->items[++s->top] = element;
-    printf("Pushed: %d\\n", element);
-}
-
-// Pop operation
-int pop(Stack *s) {
-    if (s->top < 0) {
-        printf("Stack Underflow\\n");
-        return -1;
-    }
-    int element = s->items[s->top--];
-    printf("Popped: %d\\n", element);
-    return element;
-}
-
-// Display stack
-void display(Stack *s) {
-    printf("Current Stack: ");
-    for (int i = 0; i <= s->top; i++) {
-        printf("%d ", s->items[i]);
-    }
-    printf("\\n");
-}
-
-int main() {
-    Stack stack;
-    initialize(&stack);
-    
-    push(&stack, 10);
-    push(&stack, 20);
-    push(&stack, 30);
-    display(&stack);
-    pop(&stack);
-    display(&stack);
-    
-    return 0;
-}`,
-
-    cpp: `// Stack Implementation with Push/Pop in C++
-#include <iostream>
-#include <vector>
-using namespace std;
-
-class Stack {
-private:
-    vector<int> items;
-    int top;
-    const int MAX_SIZE = 10;
-
-public:
-    Stack() : top(-1) {}
-    
-    // Push operation
-    void push(int element) {
-        if (top >= MAX_SIZE - 1) {
-            cout << "Stack Overflow" << endl;
-            return;
-        }
-        items.push_back(element);
-        top++;
-        cout << "Pushed: " << element << endl;
-    }
-    
-    // Pop operation
-    int pop() {
-        if (top < 0) {
-            cout << "Stack Underflow" << endl;
-            return -1;
-        }
-        int element = items.back();
-        items.pop_back();
-        top--;
-        cout << "Popped: " << element << endl;
-        return element;
-    }
-    
-    // Display stack
-    void display() {
-        cout << "Current Stack: ";
-        for (int i = 0; i <= top; i++) {
-            cout << items[i] << " ";
-        }
-        cout << endl;
-    }
-};
-
-int main() {
-    Stack stack;
-    stack.push(10);
-    stack.push(20);
-    stack.push(30);
-    stack.display();
-    stack.pop();
-    stack.display();
-    
-    return 0;
-}`,
-  };
-
-  return (
-    <div
-      className="max-w-4xl mx-auto"
-      ref={topRef}
-      onMouseEnter={() => setIsHovered(true)}
-      onMouseLeave={() => setIsHovered(false)}
-    >
-      <motion.div
-        initial={{ opacity: 0, y: 20 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{ duration: 0.3 }}
-        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-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">
-              Stack Push & Pop Implementation
-            </h3>
-          </div>
-
-          <motion.button
-            whileHover={{ scale: 1.05 }}
-            whileTap={{ scale: 0.95 }}
-            onClick={() => copyToClipboard(codeExamples[selectedLanguage])}
-            className="flex items-center gap-2 px-3 py-1.5 bg-gray-100 dark:bg-gray-600 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-500 transition-colors text-gray-800 dark:text-gray-100 text-sm font-medium"
-            aria-label="Copy code"
-          >
-            <AnimatePresence mode="wait">
-              {copied ? (
-                <motion.span
-                  key="check"
-                  initial={{ opacity: 0 }}
-                  animate={{ opacity: 1 }}
-                  exit={{ opacity: 0 }}
-                  className="flex items-center text-green-600 dark:text-green-400"
-                >
-                  <FaCheck className="mr-1" /> Copied
-                </motion.span>
-              ) : (
-                <motion.span
-                  key="copy"
-                  initial={{ opacity: 0 }}
-                  animate={{ opacity: 1 }}
-                  exit={{ opacity: 0 }}
-                  className="flex items-center"
-                >
-                  <FaCopy className="mr-1" /> Copy Code
-                </motion.span>
-              )}
-            </AnimatePresence>
-          </motion.button>
-        </div>
-
-        {/* Language Selector */}
-        <div className="px-4 pt-3 pb-2 flex flex-wrap gap-2 border-b border-gray-200 dark:border-gray-700">
-          {languages.map((lang) => (
-            <motion.button
-              key={lang.id}
-              whileHover={{ scale: 1.03 }}
-              whileTap={{ scale: 0.97 }}
-              onClick={() => setSelectedLanguage(lang.id)}
-              className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-colors ${
-                selectedLanguage === lang.id
-                  ? "bg-blue-500 text-white shadow-md"
-                  : "bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-600"
-              }`}
-            >
-              {lang.name}
-            </motion.button>
-          ))}
-        </div>
-
-        {/* Code Block */}
-        <div className="relative">
-          <AnimatePresence mode="wait">
-            <motion.div
-              key={selectedLanguage}
-              initial={{ opacity: 0 }}
-              animate={{ opacity: 1 }}
-              exit={{ opacity: 0 }}
-              transition={{ duration: 0.2 }}
-              className="overflow-x-auto p-4 bg-gray-900 text-white"
-            >
-              <pre className="text-sm leading-relaxed">
-                <code
-                  className={`language-${selectedLanguage}`}
-                  dangerouslySetInnerHTML={{
-                    __html: highlightCode(
-                      codeExamples[selectedLanguage],
-                      selectedLanguage
-                    ),
-                  }}
-                />
-              </pre>
-            </motion.div>
-          </AnimatePresence>
-
-          {/* Language indicator (shown on hover) */}
-          <AnimatePresence>
-            {isHovered && (
-              <motion.div
-                initial={{ opacity: 0, y: 10 }}
-                animate={{ opacity: 1, y: 0 }}
-                exit={{ opacity: 0, y: 10 }}
-                className="absolute bottom-3 right-3 px-2 py-1 bg-gray-800 text-gray-300 text-xs rounded-md"
-              >
-                {selectedLanguage.toUpperCase()}
-              </motion.div>
-            )}
-          </AnimatePresence>
-        </div>
-      </motion.div>
-    </div>
-  );
-};
-
-export default CodeBlock;
\ No newline at end of file
diff --git a/app/visualizer/stack/push-pop/page.jsx b/app/visualizer/stack/push-pop/page.jsx
index c4737a9..8e0ad4b 100755
--- a/app/visualizer/stack/push-pop/page.jsx
+++ b/app/visualizer/stack/push-pop/page.jsx
@@ -3,7 +3,8 @@ import Navbar from "@/app/components/navbarinner";
 import ModuleHeader from "@/app/components/modules/Header";
 import Content from "@/app/visualizer/stack/push-pop/content";
 import Quiz from "@/app/visualizer/stack/push-pop/quiz";
-import Code from "@/app/visualizer/stack/push-pop/codeBlock";
+import CodeBlock from "@/app/components/modules/CodeBlock";
+import codeExamples from "./code";
 import ExploreOther from "@/app/components/ui/exploreOther";
 import ModuleCard from "@/app/components/ui/ModuleCard";
 import { MODULE_MAPS } from "@/lib/modulesMap";
@@ -77,7 +78,7 @@ export default function Page() {
         </section>
 
         <section className="px-6">
-          <Code />
+          <CodeBlock title="Stack Push & Pop Implementation" codeExamples={codeExamples} />
         </section>
 
         <section className="px-6 md:px-12 my-12">
diff --git a/app/visualizer/trees/binaryTree/types/animation.jsx b/app/visualizer/trees/binaryTree/types/animation.jsx
index 8b1d272..d6c04a7 100755
--- a/app/visualizer/trees/binaryTree/types/animation.jsx
+++ b/app/visualizer/trees/binaryTree/types/animation.jsx
@@ -2,7 +2,8 @@
 import Footer from "@/app/components/footer";
 import ExploreOther from "@/app/components/ui/exploreOther";
 import Content from "@/app/visualizer/trees/binaryTree/types/content";
-import CodeBlock from "@/app/visualizer/trees/binaryTree/types/codeBlock";
+import CodeBlock from "@/app/components/modules/CodeBlock";
+import codeExamples from "./code";
 import GoBackButton from "@/app/components/ui/goback";
 import BackToTop from "@/app/components/ui/backtotop";
 
@@ -23,7 +24,7 @@ const InfixToPostfixVisualizer = () => {
           <div className='bg-black border border-none dark:bg-gray-600 w-full h-[2px] rounded-xl mt-2 mb-5'></div>
           <Content />
         <p className="text-lg text-center text-gray-600 dark:text-gray-400 mb-8"></p>
-        <CodeBlock />
+        <CodeBlock title="Binary tree types" codeExamples={codeExamples} />
         <ExploreOther
           title="Explore other implementation"
           links={[{ text: "Structure & Properties", url: "./properties" }]}
diff --git a/app/visualizer/trees/binaryTree/types/code.js b/app/visualizer/trees/binaryTree/types/code.js
new file mode 100755
index 0000000..f8dcb9e
--- /dev/null
+++ b/app/visualizer/trees/binaryTree/types/code.js
@@ -0,0 +1,165 @@
+const codeExamples = {
+    javascript: `class TreeTypes {
+  static Full(capacity = 7) {
+    const tree = Array.from({ length: capacity }, (_, i) => i + 1);
+    console.log("Full Binary Tree (level):", tree.join(" "));
+  }
+
+  static Degenerate(count = 4) {
+    const tree = Array.from({ length: count }, (_, i) => i + 1);
+    console.log("Degenerate/Skewed (in-order):", tree.join(" -> "));
+  }
+
+  static Complete(count = 10) {
+    const tree = Array.from({ length: count }, (_, i) => i + 1);
+    console.log("Complete Binary Tree (level):", tree.join(" "));
+  }
+}
+
+TreeTypes.Full(7);
+TreeTypes.Degenerate(4);
+TreeTypes.Complete(10);`,
+
+    python: `class TreeTypes:
+    @staticmethod
+    def Full(capacity=7):
+        tree = [i + 1 for i in range(capacity)]
+        print("Full Binary Tree (level):", *tree)
+
+    @staticmethod
+    def Degenerate(count=4):
+        tree = [i + 1 for i in range(count)]
+        print("Degenerate/Skewed (in-order):", " -> ".join(map(str, tree)))
+
+    @staticmethod
+    def Complete(count=10):
+        tree = [i + 1 for i in range(count)]
+        print("Complete Binary Tree (level):", *tree)
+
+
+if __name__ == "__main__":
+    TreeTypes.Full(7)
+    TreeTypes.Degenerate(4)
+    TreeTypes.Complete(10)`,
+
+    java: `public class TreeTypes {
+
+    public static void Full(int capacity) {
+        int[] tree = new int[capacity];
+        for (int i = 0; i < capacity; i++) tree[i] = i + 1;
+        System.out.print("Full Binary Tree (level):");
+        for (int v : tree) System.out.print(" " + v);
+        System.out.println();
+    }
+
+    public static void Degenerate(int count) {
+        int[] tree = new int[count];
+        for (int i = 0; i < count; i++) tree[i] = i + 1;
+        System.out.print("Degenerate/Skewed (in-order):");
+        for (int i = 0; i < count; i++) {
+            System.out.print(i == 0 ? " " : " -> ");
+            System.out.print(tree[i]);
+        }
+        System.out.println();
+    }
+
+    public static void Complete(int count) {
+        int[] tree = new int[count];
+        for (int i = 0; i < count; i++) tree[i] = i + 1;
+        System.out.print("Complete Binary Tree (level):");
+        for (int v : tree) System.out.print(" " + v);
+        System.out.println();
+    }
+
+    public static void main(String[] args) {
+        Full(7);
+        Degenerate(4);
+        Complete(10);
+    }
+}`,
+
+    c: `#include <stdio.h>
+#include <stdlib.h>
+
+typedef struct {
+    int *tree;
+    int size;
+} TreeArray;
+
+void Full(int capacity) {
+    TreeArray t = { malloc(capacity * sizeof(int)), capacity };
+    for (int i = 0; i < capacity; i++) t.tree[i] = i + 1;
+    printf("Full Binary Tree (level):");
+    for (int i = 0; i < capacity; i++) printf(" %d", t.tree[i]);
+    printf("\n");
+    free(t.tree);
+}
+
+void Degenerate(int count) {
+    TreeArray t = { malloc(count * sizeof(int)), count };
+    for (int i = 0; i < count; i++) t.tree[i] = i + 1;
+    printf("Degenerate/Skewed (in-order):");
+    for (int i = 0; i < count; i++) {
+        printf(i ? " -> %d" : " %d", t.tree[i]);
+    }
+    printf("\n");
+    free(t.tree);
+}
+
+void Complete(int count) {
+    TreeArray t = { malloc(count * sizeof(int)), count };
+    for (int i = 0; i < count; i++) t.tree[i] = i + 1;
+    printf("Complete Binary Tree (level):");
+    for (int i = 0; i < count; i++) printf(" %d", t.tree[i]);
+    printf("\n");
+    free(t.tree);
+}
+
+int main() {
+    Full(7);
+    Degenerate(4);
+    Complete(10);
+    return 0;
+}`,
+
+    cpp: `#include <iostream>
+#include <vector>
+
+class TreeTypes {
+public:
+    static void Full(int capacity = 7) {
+        std::vector<int> tree(capacity);
+        for (int i = 0; i < capacity; ++i) tree[i] = i + 1;
+        std::cout << "Full Binary Tree (level):";
+        for (int v : tree) std::cout << ' ' << v;
+        std::cout << '\n';
+    }
+
+    static void Degenerate(int count = 4) {
+        std::vector<int> tree(count);
+        for (int i = 0; i < count; ++i) tree[i] = i + 1;
+        std::cout << "Degenerate/Skewed (in-order):";
+        for (int i = 0; i < count; ++i) {
+            std::cout << (i ? " -> " : " ") << tree[i];
+        }
+        std::cout << '\n';
+    }
+
+    static void Complete(int count = 10) {
+        std::vector<int> tree(count);
+        for (int i = 0; i < count; ++i) tree[i] = i + 1;
+        std::cout << "Complete Binary Tree (level):";
+        for (int v : tree) std::cout << ' ' << v;
+        std::cout << '\n';
+    }
+};
+
+int main() {
+    TreeTypes::Full(7);
+    TreeTypes::Degenerate(4);
+    TreeTypes::Complete(10);
+    return 0;
+}`,
+  };
+
+export default codeExamples;
diff --git a/app/visualizer/trees/binaryTree/types/codeBlock.jsx b/app/visualizer/trees/binaryTree/types/codeBlock.jsx
deleted file mode 100755
index 10f90ae..0000000
--- a/app/visualizer/trees/binaryTree/types/codeBlock.jsx
+++ /dev/null
@@ -1,320 +0,0 @@
-'use client';
-import { useState, useRef } from 'react';
-import { FaCopy, FaCheck, FaCode } from 'react-icons/fa';
-import { motion, AnimatePresence } from 'framer-motion';
-import hljs from 'highlight.js';
-import 'highlight.js/styles/github.css';
-import 'highlight.js/styles/github-dark.css';
-
-export const highlightCode = (code, language) => {
-  const validLanguage = hljs.getLanguage(language) ? language : 'plaintext';
-  return hljs.highlight(code, { language: validLanguage }).value;
-};
-
-const CodeBlock = () => {
-  const [selectedLanguage, setSelectedLanguage] = useState("javascript");
-  const [copied, setCopied] = useState(false);
-  const [isHovered, setIsHovered] = useState(false);
-  const topRef = useRef(null);
-
-  const languages = [
-    { id: "javascript", name: "JavaScript" },
-    { id: "python", name: "Python" },
-    { id: "java", name: "Java" },
-    { id: "c", name: "C" },
-    { id: "cpp", name: "C++" },
-  ];
-
-  const copyToClipboard = async (text) => {
-    try {
-      await navigator.clipboard.writeText(text);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    } catch (err) {
-      console.error("Failed to copy text: ", err);
-    }
-  };
-
-  const codeExamples = {
-    javascript: `class TreeTypes {
-  static Full(capacity = 7) {
-    const tree = Array.from({ length: capacity }, (_, i) => i + 1);
-    console.log("Full Binary Tree (level):", tree.join(" "));
-  }
-
-  static Degenerate(count = 4) {
-    const tree = Array.from({ length: count }, (_, i) => i + 1);
-    console.log("Degenerate/Skewed (in-order):", tree.join(" -> "));
-  }
-
-  static Complete(count = 10) {
-    const tree = Array.from({ length: count }, (_, i) => i + 1);
-    console.log("Complete Binary Tree (level):", tree.join(" "));
-  }
-}
-
-TreeTypes.Full(7);
-TreeTypes.Degenerate(4);
-TreeTypes.Complete(10);`,
-
-    python: `class TreeTypes:
-    @staticmethod
-    def Full(capacity=7):
-        tree = [i + 1 for i in range(capacity)]
-        print("Full Binary Tree (level):", *tree)
-
-    @staticmethod
-    def Degenerate(count=4):
-        tree = [i + 1 for i in range(count)]
-        print("Degenerate/Skewed (in-order):", " -> ".join(map(str, tree)))
-
-    @staticmethod
-    def Complete(count=10):
-        tree = [i + 1 for i in range(count)]
-        print("Complete Binary Tree (level):", *tree)
-
-
-if __name__ == "__main__":
-    TreeTypes.Full(7)
-    TreeTypes.Degenerate(4)
-    TreeTypes.Complete(10)`,
-
-    java: `public class TreeTypes {
-
-    public static void Full(int capacity) {
-        int[] tree = new int[capacity];
-        for (int i = 0; i < capacity; i++) tree[i] = i + 1;
-        System.out.print("Full Binary Tree (level):");
-        for (int v : tree) System.out.print(" " + v);
-        System.out.println();
-    }
-
-    public static void Degenerate(int count) {
-        int[] tree = new int[count];
-        for (int i = 0; i < count; i++) tree[i] = i + 1;
-        System.out.print("Degenerate/Skewed (in-order):");
-        for (int i = 0; i < count; i++) {
-            System.out.print(i == 0 ? " " : " -> ");
-            System.out.print(tree[i]);
-        }
-        System.out.println();
-    }
-
-    public static void Complete(int count) {
-        int[] tree = new int[count];
-        for (int i = 0; i < count; i++) tree[i] = i + 1;
-        System.out.print("Complete Binary Tree (level):");
-        for (int v : tree) System.out.print(" " + v);
-        System.out.println();
-    }
-
-    public static void main(String[] args) {
-        Full(7);
-        Degenerate(4);
-        Complete(10);
-    }
-}`,
-
-    c: `#include <stdio.h>
-#include <stdlib.h>
-
-typedef struct {
-    int *tree;
-    int size;
-} TreeArray;
-
-void Full(int capacity) {
-    TreeArray t = { malloc(capacity * sizeof(int)), capacity };
-    for (int i = 0; i < capacity; i++) t.tree[i] = i + 1;
-    printf("Full Binary Tree (level):");
-    for (int i = 0; i < capacity; i++) printf(" %d", t.tree[i]);
-    printf("\n");
-    free(t.tree);
-}
-
-void Degenerate(int count) {
-    TreeArray t = { malloc(count * sizeof(int)), count };
-    for (int i = 0; i < count; i++) t.tree[i] = i + 1;
-    printf("Degenerate/Skewed (in-order):");
-    for (int i = 0; i < count; i++) {
-        printf(i ? " -> %d" : " %d", t.tree[i]);
-    }
-    printf("\n");
-    free(t.tree);
-}
-
-void Complete(int count) {
-    TreeArray t = { malloc(count * sizeof(int)), count };
-    for (int i = 0; i < count; i++) t.tree[i] = i + 1;
-    printf("Complete Binary Tree (level):");
-    for (int i = 0; i < count; i++) printf(" %d", t.tree[i]);
-    printf("\n");
-    free(t.tree);
-}
-
-int main() {
-    Full(7);
-    Degenerate(4);
-    Complete(10);
-    return 0;
-}`,
-
-    cpp: `#include <iostream>
-#include <vector>
-
-class TreeTypes {
-public:
-    static void Full(int capacity = 7) {
-        std::vector<int> tree(capacity);
-        for (int i = 0; i < capacity; ++i) tree[i] = i + 1;
-        std::cout << "Full Binary Tree (level):";
-        for (int v : tree) std::cout << ' ' << v;
-        std::cout << '\n';
-    }
-
-    static void Degenerate(int count = 4) {
-        std::vector<int> tree(count);
-        for (int i = 0; i < count; ++i) tree[i] = i + 1;
-        std::cout << "Degenerate/Skewed (in-order):";
-        for (int i = 0; i < count; ++i) {
-            std::cout << (i ? " -> " : " ") << tree[i];
-        }
-        std::cout << '\n';
-    }
-
-    static void Complete(int count = 10) {
-        std::vector<int> tree(count);
-        for (int i = 0; i < count; ++i) tree[i] = i + 1;
-        std::cout << "Complete Binary Tree (level):";
-        for (int v : tree) std::cout << ' ' << v;
-        std::cout << '\n';
-    }
-};
-
-int main() {
-    TreeTypes::Full(7);
-    TreeTypes::Degenerate(4);
-    TreeTypes::Complete(10);
-    return 0;
-}`,
-  };
-
-  return (
-    <div
-      className="max-w-4xl mx-auto"
-      ref={topRef}
-      onMouseEnter={() => setIsHovered(true)}
-      onMouseLeave={() => setIsHovered(false)}
-    >
-      <motion.div
-        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"
-      >
-        {/* 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 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">
-              Binary tree types
-            </h3>
-          </div>
-
-          <motion.button
-            whileHover={{ scale: 1.05 }}
-            whileTap={{ scale: 0.95 }}
-            onClick={() => copyToClipboard(codeExamples[selectedLanguage])}
-            className="flex items-center gap-2 px-3 py-1.5 bg-gray-100 dark:bg-gray-600 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-500 transition-colors text-gray-800 dark:text-gray-100 text-sm font-medium"
-            aria-label="Copy code"
-          >
-            <AnimatePresence mode="wait">
-              {copied ? (
-                <motion.span
-                  key="check"
-                  initial={{ opacity: 0 }}
-                  animate={{ opacity: 1 }}
-                  exit={{ opacity: 0 }}
-                  className="flex items-center text-green-600 dark:text-green-400"
-                >
-                  <FaCheck className="mr-1" /> Copied
-                </motion.span>
-              ) : (
-                <motion.span
-                  key="copy"
-                  initial={{ opacity: 0 }}
-                  animate={{ opacity: 1 }}
-                  exit={{ opacity: 0 }}
-                  className="flex items-center"
-                >
-                  <FaCopy className="mr-1" /> Copy Code
-                </motion.span>
-              )}
-            </AnimatePresence>
-          </motion.button>
-        </div>
-
-        {/* Language Selector */}
-        <div className="px-4 pt-3 pb-2 flex flex-wrap gap-2 border-b border-gray-200 dark:border-gray-700">
-          {languages.map((lang) => (
-            <motion.button
-              key={lang.id}
-              whileHover={{ scale: 1.03 }}
-              whileTap={{ scale: 0.97 }}
-              onClick={() => setSelectedLanguage(lang.id)}
-              className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-colors ${
-                selectedLanguage === lang.id
-                  ? "bg-blue-500 text-white shadow-md"
-                  : "bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-600"
-              }`}
-            >
-              {lang.name}
-            </motion.button>
-          ))}
-        </div>
-
-        {/* Code Block */}
-        <div className="relative">
-          <AnimatePresence mode="wait">
-            <motion.div
-              key={selectedLanguage}
-              initial={{ opacity: 0 }}
-              animate={{ opacity: 1 }}
-              exit={{ opacity: 0 }}
-              transition={{ duration: 0.2 }}
-              className="overflow-x-auto p-4 bg-gray-900 text-white"
-            >
-              <pre className="text-sm leading-relaxed">
-                <code
-                  className={`language-${selectedLanguage}`}
-                  dangerouslySetInnerHTML={{
-                    __html: highlightCode(
-                      codeExamples[selectedLanguage],
-                      selectedLanguage
-                    ),
-                  }}
-                />
-              </pre>
-            </motion.div>
-          </AnimatePresence>
-
-          {/* Language indicator (shown on hover) */}
-          <AnimatePresence>
-            {isHovered && (
-              <motion.div
-                initial={{ opacity: 0, y: 10 }}
-                animate={{ opacity: 1, y: 0 }}
-                exit={{ opacity: 0, y: 10 }}
-                className="absolute bottom-3 right-3 px-2 py-1 bg-gray-800 text-gray-300 text-xs rounded-md"
-              >
-                {selectedLanguage.toUpperCase()}
-              </motion.div>
-            )}
-          </AnimatePresence>
-        </div>
-      </motion.div>
-    </div>
-  );
-};
-
-export default CodeBlock;
\ No newline at end of file
diff --git a/lib/modulesMap.js b/lib/modulesMap.js
index 782205b..7b5b717 100755
--- a/lib/modulesMap.js
+++ b/lib/modulesMap.js
@@ -26,4 +26,11 @@ export const MODULE_MAPS = {
     queueLinkedList : "b217f8ad-38e3-4f55-b066-2f5f67d7ea36",
     singlyLinkedList : "c2a06c17-8ecc-49e7-a17b-aaf75544e782",
     circularLinkedList : "202bc165-82de-4fb5-bb2a-ec3b4dec60c7",
+    linkedListTraversal : "f6f8a85c-c4cd-4d99-ab47-dec4ac50bdcb",
+    linkedListComparison : "e311947a-acbb-4efa-88e4-8deffc0966f4",
+    linkedListDeletion : "135efbb5-5484-4648-b996-fd0de89707e6",
+    linkedListInsertion : "692bfad1-e982-45be-a493-617cab321099",
+    linkedListMerge : "c87d8e3d-96c1-46be-a023-88b23fd62548",
+    linkedListReverse : "b7ba9d5f-9d35-494e-b938-0e1d77023787",
+    doublyLinkedList : "e9efcb99-3ce8-40d8-b161-2575a3363044",
 }
\ No newline at end of file
diff --git a/public/sitemap-0.xml b/public/sitemap-0.xml
index e72cd9d..956fd78 100755
--- a/public/sitemap-0.xml
+++ b/public/sitemap-0.xml
@@ -1,47 +1,50 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
-<url><loc>https://dsavisualizer.in/blogs</loc><lastmod>2026-07-31T20:25:16.992Z</lastmod></url>
-<url><loc>https://dsavisualizer.in/blogs/Content/dsaDifferent</loc><lastmod>2026-07-31T20:25:16.998Z</lastmod></url>
-<url><loc>https://dsavisualizer.in/blogs/Content/dsaWebDev</loc><lastmod>2026-07-31T20:25:16.998Z</lastmod></url>
-<url><loc>https://dsavisualizer.in/blogs/Content/timeRequired</loc><lastmod>2026-07-31T20:25:16.998Z</lastmod></url>
-<url><loc>https://dsavisualizer.in/blogs/Content/whatIsDS</loc><lastmod>2026-07-31T20:25:16.998Z</lastmod></url>
-<url><loc>https://dsavisualizer.in/dashboard</loc><lastmod>2026-07-31T20:25:16.998Z</lastmod></url>
-<url><loc>https://dsavisualizer.in/login</loc><lastmod>2026-07-31T20:25:16.998Z</lastmod></url>
-<url><loc>https://dsavisualizer.in/visualizer</loc><lastmod>2026-07-31T20:25:16.998Z</lastmod></url>
-<url><loc>https://dsavisualizer.in/visualizer/linkedList/operations/comparison</loc><lastmod>2026-07-31T20:25:16.998Z</lastmod></url>
-<url><loc>https://dsavisualizer.in/visualizer/linkedList/operations/deletion</loc><lastmod>2026-07-31T20:25:16.998Z</lastmod></url>
-<url><loc>https://dsavisualizer.in/visualizer/linkedList/operations/insertion</loc><lastmod>2026-07-31T20:25:16.998Z</lastmod></url>
-<url><loc>https://dsavisualizer.in/visualizer/linkedList/operations/merge</loc><lastmod>2026-07-31T20:25:16.998Z</lastmod></url>
-<url><loc>https://dsavisualizer.in/visualizer/linkedList/operations/reverse</loc><lastmod>2026-07-31T20:25:16.998Z</lastmod></url>
-<url><loc>https://dsavisualizer.in/visualizer/linkedList/operations/traversal</loc><lastmod>2026-07-31T20:25:16.998Z</lastmod></url>
-<url><loc>https://dsavisualizer.in/visualizer/linkedList/types/circular</loc><lastmod>2026-07-31T20:25:16.998Z</lastmod></url>
-<url><loc>https://dsavisualizer.in/visualizer/linkedList/types/doubly</loc><lastmod>2026-07-31T20:25:16.998Z</lastmod></url>
-<url><loc>https://dsavisualizer.in/visualizer/linkedList/types/singly</loc><lastmod>2026-07-31T20:25:16.998Z</lastmod></url>
-<url><loc>https://dsavisualizer.in/visualizer/queue/implementation/array</loc><lastmod>2026-07-31T20:25:16.998Z</lastmod></url>
-<url><loc>https://dsavisualizer.in/visualizer/queue/implementation/linkedList</loc><lastmod>2026-07-31T20:25:16.998Z</lastmod></url>
-<url><loc>https://dsavisualizer.in/visualizer/queue/operations/enqueue-dequeue</loc><lastmod>2026-07-31T20:25:16.998Z</lastmod></url>
-<url><loc>https://dsavisualizer.in/visualizer/queue/operations/isempty</loc><lastmod>2026-07-31T20:25:16.998Z</lastmod></url>
-<url><loc>https://dsavisualizer.in/visualizer/queue/operations/isfull</loc><lastmod>2026-07-31T20:25:16.998Z</lastmod></url>
-<url><loc>https://dsavisualizer.in/visualizer/queue/operations/peek-front</loc><lastmod>2026-07-31T20:25:16.998Z</lastmod></url>
-<url><loc>https://dsavisualizer.in/visualizer/queue/types/circular</loc><lastmod>2026-07-31T20:25:16.998Z</lastmod></url>
-<url><loc>https://dsavisualizer.in/visualizer/queue/types/deque</loc><lastmod>2026-07-31T20:25:16.998Z</lastmod></url>
-<url><loc>https://dsavisualizer.in/visualizer/queue/types/priority</loc><lastmod>2026-07-31T20:25:16.998Z</lastmod></url>
-<url><loc>https://dsavisualizer.in/visualizer/queue/types/singleEnded</loc><lastmod>2026-07-31T20:25:16.998Z</lastmod></url>
-<url><loc>https://dsavisualizer.in/visualizer/searching/binarysearch</loc><lastmod>2026-07-31T20:25:16.998Z</lastmod></url>
-<url><loc>https://dsavisualizer.in/visualizer/searching/linearsearch</loc><lastmod>2026-07-31T20:25:16.998Z</lastmod></url>
-<url><loc>https://dsavisualizer.in/visualizer/sorting/bubblesort</loc><lastmod>2026-07-31T20:25:16.998Z</lastmod></url>
-<url><loc>https://dsavisualizer.in/visualizer/sorting/insertionsort</loc><lastmod>2026-07-31T20:25:16.998Z</lastmod></url>
-<url><loc>https://dsavisualizer.in/visualizer/sorting/mergesort</loc><lastmod>2026-07-31T20:25:16.998Z</lastmod></url>
-<url><loc>https://dsavisualizer.in/visualizer/sorting/quicksort</loc><lastmod>2026-07-31T20:25:16.998Z</lastmod></url>
-<url><loc>https://dsavisualizer.in/visualizer/sorting/selectionsort</loc><lastmod>2026-07-31T20:25:16.998Z</lastmod></url>
-<url><loc>https://dsavisualizer.in/visualizer/stack/implementation/usingArray</loc><lastmod>2026-07-31T20:25:16.998Z</lastmod></url>
-<url><loc>https://dsavisualizer.in/visualizer/stack/implementation/usingLinkedList</loc><lastmod>2026-07-31T20:25:16.998Z</lastmod></url>
-<url><loc>https://dsavisualizer.in/visualizer/stack/isempty</loc><lastmod>2026-07-31T20:25:16.998Z</lastmod></url>
-<url><loc>https://dsavisualizer.in/visualizer/stack/isfull</loc><lastmod>2026-07-31T20:25:16.998Z</lastmod></url>
-<url><loc>https://dsavisualizer.in/visualizer/stack/peek</loc><lastmod>2026-07-31T20:25:16.998Z</lastmod></url>
-<url><loc>https://dsavisualizer.in/visualizer/stack/polish/postfix</loc><lastmod>2026-07-31T20:25:16.998Z</lastmod></url>
-<url><loc>https://dsavisualizer.in/visualizer/stack/polish/prefix</loc><lastmod>2026-07-31T20:25:16.998Z</lastmod></url>
-<url><loc>https://dsavisualizer.in/visualizer/stack/push-pop</loc><lastmod>2026-07-31T20:25:16.998Z</lastmod></url>
-<url><loc>https://dsavisualizer.in/visualizer/trees/binaryTree/types</loc><lastmod>2026-07-31T20:25:16.998Z</lastmod></url>
-<url><loc>https://dsavisualizer.in/visualizer/trees/traversing/in-order</loc><lastmod>2026-07-31T20:25:16.998Z</lastmod></url>
+<url><loc>https://dsavisualizer.in/blogs</loc><lastmod>2026-08-02T13:55:10.312Z</lastmod></url>
+<url><loc>https://dsavisualizer.in/blogs/Content/dsaDifferent</loc><lastmod>2026-08-02T13:55:10.318Z</lastmod></url>
+<url><loc>https://dsavisualizer.in/blogs/Content/dsaWebDev</loc><lastmod>2026-08-02T13:55:10.318Z</lastmod></url>
+<url><loc>https://dsavisualizer.in/blogs/Content/timeRequired</loc><lastmod>2026-08-02T13:55:10.318Z</lastmod></url>
+<url><loc>https://dsavisualizer.in/blogs/Content/whatIsDS</loc><lastmod>2026-08-02T13:55:10.318Z</lastmod></url>
+<url><loc>https://dsavisualizer.in/cookies</loc><lastmod>2026-08-02T13:55:10.318Z</lastmod></url>
+<url><loc>https://dsavisualizer.in/dashboard</loc><lastmod>2026-08-02T13:55:10.318Z</lastmod></url>
+<url><loc>https://dsavisualizer.in/login</loc><lastmod>2026-08-02T13:55:10.318Z</lastmod></url>
+<url><loc>https://dsavisualizer.in/privacy</loc><lastmod>2026-08-02T13:55:10.318Z</lastmod></url>
+<url><loc>https://dsavisualizer.in/terms</loc><lastmod>2026-08-02T13:55:10.318Z</lastmod></url>
+<url><loc>https://dsavisualizer.in/visualizer</loc><lastmod>2026-08-02T13:55:10.318Z</lastmod></url>
+<url><loc>https://dsavisualizer.in/visualizer/linkedList/operations/comparison</loc><lastmod>2026-08-02T13:55:10.318Z</lastmod></url>
+<url><loc>https://dsavisualizer.in/visualizer/linkedList/operations/deletion</loc><lastmod>2026-08-02T13:55:10.318Z</lastmod></url>
+<url><loc>https://dsavisualizer.in/visualizer/linkedList/operations/insertion</loc><lastmod>2026-08-02T13:55:10.318Z</lastmod></url>
+<url><loc>https://dsavisualizer.in/visualizer/linkedList/operations/merge</loc><lastmod>2026-08-02T13:55:10.318Z</lastmod></url>
+<url><loc>https://dsavisualizer.in/visualizer/linkedList/operations/reverse</loc><lastmod>2026-08-02T13:55:10.318Z</lastmod></url>
+<url><loc>https://dsavisualizer.in/visualizer/linkedList/operations/traversal</loc><lastmod>2026-08-02T13:55:10.318Z</lastmod></url>
+<url><loc>https://dsavisualizer.in/visualizer/linkedList/types/circular</loc><lastmod>2026-08-02T13:55:10.318Z</lastmod></url>
+<url><loc>https://dsavisualizer.in/visualizer/linkedList/types/doubly</loc><lastmod>2026-08-02T13:55:10.318Z</lastmod></url>
+<url><loc>https://dsavisualizer.in/visualizer/linkedList/types/singly</loc><lastmod>2026-08-02T13:55:10.318Z</lastmod></url>
+<url><loc>https://dsavisualizer.in/visualizer/queue/implementation/array</loc><lastmod>2026-08-02T13:55:10.318Z</lastmod></url>
+<url><loc>https://dsavisualizer.in/visualizer/queue/implementation/linkedList</loc><lastmod>2026-08-02T13:55:10.318Z</lastmod></url>
+<url><loc>https://dsavisualizer.in/visualizer/queue/operations/enqueue-dequeue</loc><lastmod>2026-08-02T13:55:10.318Z</lastmod></url>
+<url><loc>https://dsavisualizer.in/visualizer/queue/operations/isempty</loc><lastmod>2026-08-02T13:55:10.318Z</lastmod></url>
+<url><loc>https://dsavisualizer.in/visualizer/queue/operations/isfull</loc><lastmod>2026-08-02T13:55:10.318Z</lastmod></url>
+<url><loc>https://dsavisualizer.in/visualizer/queue/operations/peek-front</loc><lastmod>2026-08-02T13:55:10.318Z</lastmod></url>
+<url><loc>https://dsavisualizer.in/visualizer/queue/types/circular</loc><lastmod>2026-08-02T13:55:10.318Z</lastmod></url>
+<url><loc>https://dsavisualizer.in/visualizer/queue/types/deque</loc><lastmod>2026-08-02T13:55:10.318Z</lastmod></url>
+<url><loc>https://dsavisualizer.in/visualizer/queue/types/priority</loc><lastmod>2026-08-02T13:55:10.318Z</lastmod></url>
+<url><loc>https://dsavisualizer.in/visualizer/queue/types/singleEnded</loc><lastmod>2026-08-02T13:55:10.318Z</lastmod></url>
+<url><loc>https://dsavisualizer.in/visualizer/searching/binarysearch</loc><lastmod>2026-08-02T13:55:10.318Z</lastmod></url>
+<url><loc>https://dsavisualizer.in/visualizer/searching/linearsearch</loc><lastmod>2026-08-02T13:55:10.318Z</lastmod></url>
+<url><loc>https://dsavisualizer.in/visualizer/sorting/bubblesort</loc><lastmod>2026-08-02T13:55:10.318Z</lastmod></url>
+<url><loc>https://dsavisualizer.in/visualizer/sorting/insertionsort</loc><lastmod>2026-08-02T13:55:10.318Z</lastmod></url>
+<url><loc>https://dsavisualizer.in/visualizer/sorting/mergesort</loc><lastmod>2026-08-02T13:55:10.318Z</lastmod></url>
+<url><loc>https://dsavisualizer.in/visualizer/sorting/quicksort</loc><lastmod>2026-08-02T13:55:10.318Z</lastmod></url>
+<url><loc>https://dsavisualizer.in/visualizer/sorting/selectionsort</loc><lastmod>2026-08-02T13:55:10.318Z</lastmod></url>
+<url><loc>https://dsavisualizer.in/visualizer/stack/implementation/usingArray</loc><lastmod>2026-08-02T13:55:10.318Z</lastmod></url>
+<url><loc>https://dsavisualizer.in/visualizer/stack/implementation/usingLinkedList</loc><lastmod>2026-08-02T13:55:10.318Z</lastmod></url>
+<url><loc>https://dsavisualizer.in/visualizer/stack/isempty</loc><lastmod>2026-08-02T13:55:10.318Z</lastmod></url>
+<url><loc>https://dsavisualizer.in/visualizer/stack/isfull</loc><lastmod>2026-08-02T13:55:10.318Z</lastmod></url>
+<url><loc>https://dsavisualizer.in/visualizer/stack/peek</loc><lastmod>2026-08-02T13:55:10.318Z</lastmod></url>
+<url><loc>https://dsavisualizer.in/visualizer/stack/polish/postfix</loc><lastmod>2026-08-02T13:55:10.318Z</lastmod></url>
+<url><loc>https://dsavisualizer.in/visualizer/stack/polish/prefix</loc><lastmod>2026-08-02T13:55:10.318Z</lastmod></url>
+<url><loc>https://dsavisualizer.in/visualizer/stack/push-pop</loc><lastmod>2026-08-02T13:55:10.318Z</lastmod></url>
+<url><loc>https://dsavisualizer.in/visualizer/trees/binaryTree/types</loc><lastmod>2026-08-02T13:55:10.318Z</lastmod></url>
+<url><loc>https://dsavisualizer.in/visualizer/trees/traversing/in-order</loc><lastmod>2026-08-02T13:55:10.318Z</lastmod></url>
 </urlset>
\ No newline at end of file